摘要:前端知識(shí)點(diǎn)即文檔對(duì)象模型,是一種用于和文檔的編程接口。指的是返回當(dāng)前元素的所有元素節(jié)點(diǎn),代碼如下打印結(jié)果很直觀的返回元素節(jié)點(diǎn)的屬性。接下來對(duì)比父節(jié)點(diǎn),父元素兩者在通常情況下是一樣的,因?yàn)榘氐墓?jié)點(diǎn)只有可能是元素節(jié)點(diǎn)。運(yùn)行劫奪一致,都是。
前端DOM知識(shí)點(diǎn)
DOM即文檔對(duì)象模型(Document Object Model,DOM)是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結(jié)構(gòu)化的表示方法,可以改變文檔的內(nèi)容和呈現(xiàn)方式。DOM把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系起來。DOM屬于瀏覽器的,而非JavaScript語言規(guī)范里規(guī)定的核心內(nèi)容。W3C規(guī)范中常用的DOM節(jié)點(diǎn)類型有以下幾種: 一、查找元素
document.getElementById 根據(jù)ID獲取一個(gè)標(biāo)簽 document.getElementsByName 根據(jù)name屬性獲取標(biāo)簽集合 document.getElementsByClassName 根據(jù)class屬性獲取標(biāo)簽集合 document.getElementsByTagName 根據(jù)標(biāo)簽名獲取標(biāo)簽集合
parentNode // 父節(jié)點(diǎn) childNodes // 所有的子節(jié)點(diǎn) firstChild // 第一個(gè)子節(jié)點(diǎn) lastChild // 最后一個(gè)子節(jié)點(diǎn) nextSibling // 下一個(gè)兄弟節(jié)點(diǎn) previousSibling // 上一個(gè)兄弟節(jié)點(diǎn) parentElement // 父節(jié)點(diǎn)標(biāo)簽元素 children // 所有的子標(biāo)簽 firstElementChild // 第一個(gè)子標(biāo)簽元素 lastElementChild // 最后一個(gè)子標(biāo)簽元素 nextElementSibling // 下一個(gè)子標(biāo)簽元素 previousElementSibling // 上一個(gè)子標(biāo)簽元素
區(qū)別:childNodes,children
childNodes指的是返回當(dāng)前元素子節(jié)點(diǎn)的所有類型節(jié)點(diǎn),其中連空格和換行符都會(huì)默認(rèn)文本節(jié)點(diǎn)
打印結(jié)果:
其中空格和文本均打印為文本節(jié)點(diǎn)
如果給li標(biāo)簽添加屬性總長度不會(huì)改變,因?yàn)?b>childNodes只會(huì)返回文本和元素節(jié)點(diǎn),并不能返回屬性節(jié)點(diǎn)。
children指的是返回當(dāng)前元素的所有元素節(jié)點(diǎn),代碼如下
打印結(jié)果:
children很直觀的返回元素節(jié)點(diǎn)的屬性。
接下來對(duì)比parentNode(父節(jié)點(diǎn)),parentElement(父元素)
兩者在通常情況下是一樣的,因?yàn)榘氐墓?jié)點(diǎn)只有可能是元素節(jié)點(diǎn)。
文本節(jié)點(diǎn)只是文本本身,文本節(jié)點(diǎn)的父節(jié)點(diǎn)是元素節(jié)點(diǎn)。
運(yùn)行劫奪一致,都是HTML。然而再往上一層,就是根部document,并不是元素,執(zhí)行下面代碼:
執(zhí)行結(jié)果:
區(qū)別就在于parentNode找的是節(jié)點(diǎn),就可以顯示出來,parentElement找的是元素,因此找到根部document的時(shí)候就出現(xiàn)值為null的報(bào)錯(cuò)。
二、操作innerText //文本 innerHTML //HTML內(nèi)容 value //值
attributes // 獲取所有標(biāo)簽屬性 setAttribute(key,value) // 設(shè)置標(biāo)簽屬性 getAttribute(key) // 獲取指定標(biāo)簽屬性
className // 獲取所有的類名 classList.remove(cls) // 刪除指定類 classList.add(cls) // 添加類
a.創(chuàng)建標(biāo)簽
// 方式一 var tag = document.createElement("a") tag.innerText = "wupeiqi" tag.className = "c1" tag. // 方式二 var tag = "b.操作標(biāo)簽
// 方式一 var obj = ""; xxx.insertAdjacentHTML("beforeEnd",obj); xxx.insertAdjacentElement("afterBegin",document.createElement("p")) //注意:第一個(gè)參數(shù)只能是"beforeBegin"、 "afterBegin"、 "beforeEnd"、 "afterEnd" // 方式二 var tag = document.createElement("a") xxx.appendChild(tag) xxx.insertBefore(tag,xxx[1])5.樣式操作
var obj = document.getElementById("i1") obj.style.fontSize = "32px"; obj.style.backgroundColor = "red";6.位置操作
//總文檔高度 document.documentElement.offsetHeight //當(dāng)前文檔占屏幕高度 document.documentElement.clientHeight //自身高度 tag.offsetHeight //距離上級(jí)定位高度 tag.offsetTop //父定位標(biāo)簽 tag.offsetParent //滾動(dòng)高度 tag.scrollTop /* clientHeight -> 可見區(qū)域:height + padding clientTop -> border高度 offsetHeight -> 可見區(qū)域:height + padding + border offsetTop -> 上級(jí)定位標(biāo)簽的高度 scrollHeight -> 全文高:height + padding scrollTop -> 滾動(dòng)高度 特別的: document.documentElement代指文檔根節(jié)點(diǎn) */7.提交表單
document.geElementById("form").submit()8.其他操作
console.log 輸出框 alert 彈出框 confirm 確認(rèn)框 // URL和刷新 location.href 獲取URL location.href = "url" 重定向 location.reload() 重新加載 // 定時(shí)器 setInterval 多次定時(shí)器 clearInterval 清除多次定時(shí)器 setTimeout 單次定時(shí)器 clearTimeout 清除單次定時(shí)器三、事件
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/101294.html
摘要:所有我們不熟悉或者沒有掌握的知識(shí)皆可稱之為知識(shí)盲區(qū),有知識(shí)盲區(qū)并不可怕,針對(duì)知識(shí)盲區(qū)去學(xué)習(xí)即可。只有這樣,我們才會(huì)準(zhǔn)確知道自己的知識(shí)盲區(qū)所處何處,以及發(fā)現(xiàn)更多的知識(shí)盲區(qū)。節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象是,其他的具體節(jié)點(diǎn)對(duì)象全都是繼承自對(duì)象。 前端時(shí)間在部門內(nèi)進(jìn)行分享,準(zhǔn)備素材時(shí)偶然發(fā)現(xiàn)下面的一個(gè)現(xiàn)象,因?yàn)楹彤?dāng)時(shí)分享的主題無關(guān),就先記下來了,事后重新審視,并把一些思考記錄如下: 一、問題 HTML: ...
摘要:前端知識(shí)點(diǎn)總結(jié)什么是什么是專門操作網(wǎng)頁內(nèi)容的標(biāo)準(zhǔn)為什么統(tǒng)一不同瀏覽器操作網(wǎng)頁內(nèi)容的標(biāo)準(zhǔn)優(yōu)點(diǎn)幾乎所有瀏覽器兼容什么是網(wǎng)頁中所有內(nèi)容在內(nèi)存中都是保存在一棵樹形結(jié)構(gòu)中網(wǎng)頁中每項(xiàng)內(nèi)容元素文本屬性注釋,都是樹上的一個(gè)節(jié)點(diǎn)對(duì)象。 前端知識(shí)點(diǎn)總結(jié)——DOM 1.什么是DOM: Document Object Model 什么是: 專門操作網(wǎng)頁內(nèi)容的API標(biāo)準(zhǔn)——w3c 為什么: 統(tǒng)一不同瀏覽器操作網(wǎng)...
摘要:前端渲染過程的二三事本文不會(huì)介紹整個(gè)前端渲染過程的步驟,只是記錄最近閱讀的文章的些許思考和感悟。那么現(xiàn)在我們可以明白這個(gè)問題的關(guān)鍵所在了,因?yàn)樵诖蟛糠猪撁嬷惺菗碛械?,而由于其解析順序,那么在事件之前必定已?jīng)成功構(gòu)造樹。 前端渲染過程的二三事 本文不會(huì)介紹整個(gè)前端渲染過程的步驟,只是記錄最近閱讀的文章的些許思考和感悟。(文章地址一(系列),文章地址二) 希望大家在閱讀這篇文章之前能將上述...
摘要:手把手教你做個(gè)人火的時(shí)候,隨便一個(gè)都能賺的盆滿缽滿,但是,個(gè)人沒有服務(wù)端,沒有美工,似乎就不能開發(fā)了,真的是這樣的嗎秘密花園經(jīng)典的中文手冊(cè)。涵蓋前端知識(shí)體系知識(shí)結(jié)構(gòu)圖書推薦以及入門視頻教程,全的簡(jiǎn)直不要不要的了。 JavaScript 實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制區(qū)域文本的功能,不需要依賴 flash。...
摘要:下面我們撇開網(wǎng)絡(luò)方面的優(yōu)化,只分析靜態(tài)資源方面的優(yōu)化。不過,也會(huì)阻止的構(gòu)建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析,我們可以清楚的認(rèn)識(shí)到,非必要優(yōu)先加載的,選擇異步加載是最優(yōu)選擇。 為什么做優(yōu)化 經(jīng)典問題:白屏?xí)r間過長,用戶體驗(yàn)差產(chǎn)生的原因:網(wǎng)絡(luò)問題、關(guān)鍵渲染路徑(CRP)問題 怎么做優(yōu)化 如何做好優(yōu)化呢,網(wǎng)上隨便一搜,就有很多優(yōu)化總結(jié),無非就是網(wǎng)絡(luò)優(yōu)化、靜態(tài)資源(h...
閱讀 1452·2021-11-11 16:54
閱讀 9438·2021-11-02 14:44
閱讀 2387·2021-10-22 09:53
閱讀 3270·2019-08-30 11:18
閱讀 1962·2019-08-29 13:29
閱讀 2017·2019-08-27 10:58
閱讀 1635·2019-08-26 11:38
閱讀 3532·2019-08-26 10:31