您好,登錄后才能下訂單哦!
這篇文章主要介紹“總結(jié)DOM的知識(shí)點(diǎn)”,在日常操作中,相信很多人在總結(jié)DOM的知識(shí)點(diǎn)問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”總結(jié)DOM的知識(shí)點(diǎn)”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
什么是: 專(zhuān)門(mén)操作網(wǎng)頁(yè)內(nèi)容的API標(biāo)準(zhǔn)——w3c
為什么: 統(tǒng)一不同瀏覽器操作網(wǎng)頁(yè)內(nèi)容的API標(biāo)準(zhǔn)
優(yōu)點(diǎn): 幾乎所有瀏覽器100%兼容
什么是: 網(wǎng)頁(yè)中所有內(nèi)容在內(nèi)存中都是保存在一棵樹(shù)形結(jié)構(gòu)中
網(wǎng)頁(yè)中每項(xiàng)內(nèi)容(元素,文本,屬性,注釋...),都是樹(shù)上的一個(gè)節(jié)點(diǎn)對(duì)象。
唯一的樹(shù)根節(jié)點(diǎn): document
為什么: 樹(shù)形結(jié)構(gòu)是最好的保存上下級(jí)包含關(guān)系的結(jié)構(gòu)
節(jié)點(diǎn)對(duì)象: Node
網(wǎng)頁(yè)中每項(xiàng)內(nèi)容都是DOM樹(shù)上的一個(gè)節(jié)點(diǎn)對(duì)象:
所有節(jié)點(diǎn)都有的三個(gè)屬性:
nodeType: 節(jié)點(diǎn)類(lèi)型
前端學(xué)習(xí)圈:767273102 ,從最基礎(chǔ)的HTML+CSS+JavaScript。jQuery,Ajax,node,angular等到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的資料都有整理
何時(shí): 只要判斷節(jié)點(diǎn)的類(lèi)型時(shí) 包括: document 9 element 1 attribute 2 text 3 問(wèn)題: 無(wú)法進(jìn)一步區(qū)分元素的標(biāo)簽名
nodeName: 節(jié)點(diǎn)名稱(chēng)
何時(shí): 只要進(jìn)一步判斷元素的標(biāo)簽名時(shí) ——可代替nodeType 包括: document #document element 全大寫(xiě)標(biāo)簽名 attribute 屬性名——不常用! text #text
nodeValue: 節(jié)點(diǎn)值 ——不常用
document null element null attribute 屬性值 text 文本內(nèi)容
1.不需要查找可直接獲得節(jié)點(diǎn):
document.documentElement html
document.head head
document.body body
document.forms[id/i] form
2.按節(jié)點(diǎn)間關(guān)系查找:
何時(shí): 如果已經(jīng)獲得一個(gè)節(jié)點(diǎn)了。想找周?chē)?jié)點(diǎn)時(shí)。
包括: 2種樹(shù):
節(jié)點(diǎn)樹(shù): 包含網(wǎng)頁(yè)中所有內(nèi)容的完整樹(shù)結(jié)構(gòu)
2大類(lèi)關(guān)系:
1.父子: 4種:
elem.parentNode elem的父節(jié)點(diǎn)
elem.childNodes elem的直接子節(jié)點(diǎn)
elem.firstChild elem下的第一個(gè)直接子節(jié)點(diǎn)
elem.lastChild elem下的最后一個(gè)直接子節(jié)點(diǎn)
2.兄弟: 2種:
elem.previousSibling elem的前一個(gè)兄弟元素
elem.nextSibling elem的后一個(gè)兄弟元素
問(wèn)題: 受看不見(jiàn)的空字符的干擾!
2.元素樹(shù): 僅包含元素節(jié)點(diǎn)的樹(shù)結(jié)構(gòu)
2大類(lèi)關(guān)系:
父子: 4種:
elem.parentElement elem的父元素
elem.children elem的直接子元素
elem.firstElementChild elem下的第一個(gè)直接子元素
elem.lastElementChild elem下的最后一個(gè)直接子元素
2.兄弟: 2種:
elem.previousElementSibling elem的前一個(gè)兄弟元素 elem.nextElementSibling elem的后一個(gè)兄弟元素
今后只要用DOM操作網(wǎng)頁(yè)內(nèi)容,都用元素樹(shù)
說(shuō)明: 元素樹(shù)不是一棵新樹(shù),其實(shí)只是節(jié)點(diǎn)樹(shù)的一個(gè)子集
childNodes和children: 動(dòng)態(tài)集合(live collection)
什么是: 不實(shí)際存儲(chǔ)屬性值,每次訪問(wèn)集合都重新查找DOM樹(shù)
優(yōu): 首次查找,效率高! 因?yàn)椴挥梅祷赝暾膶傩浴?br/>缺: 每次訪問(wèn)集合,都會(huì)重新查找DOM樹(shù),降低效率
遍歷:
不好: for(var i=0;i<children.length;i++){...}
好: for(var i=0,len=children.length;i<len;i++){...}
遍歷指定父元素下的所有后代元素: 2種:
1.遞歸: 2步:
1.定義函數(shù)僅遍歷指定父元素下的所有直接子元素
2.對(duì)每個(gè)直接子節(jié)點(diǎn)調(diào)用和父節(jié)點(diǎn)完全相同的操作
深度優(yōu)先: 當(dāng)一個(gè)節(jié)點(diǎn)同時(shí)擁有子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)時(shí),總是優(yōu)先遍歷子節(jié)點(diǎn)。
所有子節(jié)點(diǎn)遍歷完,才返回遍歷兄弟節(jié)點(diǎn)。
2.循環(huán): 2步:
1.定義迭代器:
迭代器: 可以依次獲得每個(gè)后代元素節(jié)點(diǎn)的 專(zhuān)門(mén)對(duì)象 如何: 創(chuàng)建: var iterator=document.createNodeIterator( parent, NodeFilter.SHOW_ELEMENT, null, false );
2.循環(huán)調(diào)用迭代器,獲得下一個(gè)節(jié)點(diǎn)對(duì)象:
var curr=iterator.nextNode() 內(nèi)置深度優(yōu)先遍歷的算法 如果curr返回null,說(shuō)明遍歷結(jié)束
3.按HTML查找: 4種:
1.按id查找:
var elem=document.getElementById("id") 返回值: 一個(gè)元素 如果找不到返回null! 強(qiáng)調(diào): 1. 只能在document上調(diào)用
2.按標(biāo)簽名查找:
var elems=parent.getElementsByTagName("標(biāo)簽名") 返回值: 多個(gè)元素的集合 如果找不到返回空集合 強(qiáng)調(diào): 1\. 可在任意父元素上調(diào)用 2\. 不但找直接子元素,且在所有后代中查找
3.按name查找:
var elems=document.getElementsByName("name") 返回值: 多個(gè)元素的集合 如果找不到返回空集合 強(qiáng)調(diào): 只能在document上調(diào)用
4.按class查找:
var elems=parent.getElementsByClassName("class") 返回值: 多個(gè)元素的集合 如果找不到返回空集合 強(qiáng)調(diào): 1.可在任意父元素上調(diào)用 2.不但找直接子元素,且在所有后代中查找 3.只要元素的一個(gè)class名匹配,就能找到該元素 強(qiáng)調(diào): 返回的集合都是動(dòng)態(tài)集合 問(wèn)題: 每次只能按一個(gè)條件查找 當(dāng)查找條件復(fù)雜時(shí),步驟很繁瑣 解決: 用選擇器查找:
1.僅查找一個(gè)符合條件的:
var elem=parent.querySelector("選擇器") 返回值: 一個(gè)元素 如果找不到,返回null
2.查找多個(gè)符合條件的元素:
var elems=parent.querySelectorAll("選擇器") 返回值: 多個(gè)元素的集合 如果找不到返回空集合 返回非動(dòng)態(tài)集合: 實(shí)際存儲(chǔ)屬性值,即使反復(fù)訪問(wèn)集合, 也不會(huì)導(dǎo)致反復(fù)查找DOM樹(shù) 強(qiáng)調(diào): 1\. 可在任何父元素上調(diào)用 2\. 選擇器只要相對(duì)于當(dāng)前父元素內(nèi)部即可 3\. 選擇器的兼容性,受制于當(dāng)前瀏覽器的兼容性
鄙視: 按HTML查找和按選擇器查找的差別:
1.返回值: 按HTML查找返回動(dòng)態(tài)集合 按選擇器查找返回非動(dòng)態(tài)集合 2.效率: 首次查找: 按HTML查找效率高 按選擇器查找效率低 3.易用性: 按HTML查找繁瑣 按選擇器查找簡(jiǎn)單
總結(jié): 今后,只要一個(gè)條件即可找到想要的元素,首選按HTML查找
只要查找條件復(fù)雜,都選按選擇器查找
jQuery中就是這么選擇的
內(nèi)容: .innerHTML .textContent .value
屬性: 3種:
1.HTML標(biāo)準(zhǔn)屬性: 2種:
1.核心DOM: 最初的DOM API,要求支持所有結(jié)構(gòu)化文檔
優(yōu): 幾乎萬(wàn)能 缺: 繁瑣 獲取屬性節(jié)點(diǎn): var attrNode=elem.attributes[i] 獲取屬性值: attrNode.value 其實(shí)可以一步: var value=elem.getAttribute("屬性名") 修改屬性值: elem.setAttribute("屬性名","值") 移除屬性: elem.removeAttribute("屬性名") 判斷是否包含指定屬性: elem.hasAttribute("屬性名")
2.HTML DOM: 專(zhuān)門(mén)操作HTML內(nèi)容的API
對(duì)核心DOM 常用API的簡(jiǎn)化 優(yōu): 簡(jiǎn)單 缺: 不是萬(wàn)能 簡(jiǎn)化: HTML DOM提前將所有標(biāo)準(zhǔn)屬性,封裝在了元素對(duì)象上,可用.直接訪問(wèn). 比如: 獲取屬性值: elem.屬性名 修改屬性值: elem.屬性名="值" 移除屬性: elem.屬性名="" 判斷是否包含指定屬性: elem.屬性名!=="" 特例: class屬性: ES的對(duì)象中已經(jīng)先入為主的包含了內(nèi)部屬性class,用來(lái)記錄對(duì)象創(chuàng)建時(shí)的類(lèi)型名。 HTML的class屬性就無(wú)法同時(shí)存在 所以: DOM: html的class屬性,更名為className
2.狀態(tài)屬性: disabled selected checked
1.不能用核心DOM修改: 因?yàn)橹凳莃ool類(lèi)型
2.只能用HTML DOM,打.修改
3.自定義擴(kuò)展屬性:
何時(shí): 2種:
1\. 在元素上保存自定義數(shù)據(jù) 2\. 代替其他選擇器,用來(lái)查找元素綁定事件
如何: 2套:
不能用HTML DOM訪問(wèn), 因?yàn)椴皇菢?biāo)準(zhǔn)屬性,未被提前封裝在DOM元素對(duì)象中 1. 普通屬性名+核心DOM 2. HTML5: 定義屬性時(shí): data-屬性名="值" 獲取或修改屬性值: elem.dataset.屬性名
固定用法: 用自定義擴(kuò)展屬性代替其它選擇器,為元素綁定事件
為什么: id: 唯一 class: 經(jīng)常變化 elem: 做一種效果,可能使用任何元素 解決: 今后,只要給元素綁定事件時(shí),都要先為元素添加自定義擴(kuò)展屬性, 再用自定義擴(kuò)展屬性查找元素,綁定事件 優(yōu): 沒(méi)有個(gè)數(shù)限制, 不會(huì)受樣式影響而變化,不受元素限制 如何: 定義: data-屬性名="值" 查找: 只能用屬性選擇器查找:[data-屬性名=值]
1.內(nèi)聯(lián)樣式:
修改: elem.style.css屬性名 強(qiáng)調(diào): 1. css屬性名都要去橫線變駝峰 2.長(zhǎng)度數(shù)值必須加px單位 獲取: 問(wèn)題: 不能用elem.style.css屬性名 原因: elem.style僅包含內(nèi)聯(lián)樣式! 無(wú)法獲得內(nèi)部或外部樣式表中的樣式 解決: 獲取計(jì)算后的樣式! 計(jì)算后的樣式: 最終應(yīng)用到元素上的所有樣式的集合 且將相對(duì)值換算為絕對(duì)值 何時(shí): 只要獲取樣式時(shí),都要獲取計(jì)算后的樣式 如何: 2步: 1. 獲得計(jì)算后的style對(duì)象: var style=getComputedStyle(elem); 2. 從style中獲得css屬性值 var value=style.css屬性值 強(qiáng)調(diào): getComputedStyle獲得樣式都是只讀!
2.內(nèi)部/外部: 3步:
1.獲得樣式表對(duì)象:
var sheet=document.styleSheets[i];
2.獲得樣式表對(duì)象中的cssRule
什么是cssRule: 樣式表中每個(gè){}就是一個(gè)cssRule 如何獲得: var rule=sheet.cssRules[i]
3.獲得cssRule中的style對(duì)象的css屬性
var value=rule.style.css屬性
問(wèn)題: 用elem.style.css屬性一句話只能修改一個(gè)css屬性
如果同時(shí)修改多個(gè)屬性,代碼會(huì)很繁瑣
解決: 用class批量應(yīng)用樣式
如何: 2步:
在css中準(zhǔn)備好各種class
用程序,在對(duì)應(yīng)情況下,選擇對(duì)應(yīng)的class應(yīng)用!
添加: 3步:
創(chuàng)建空元素
var a=document.createElement("a");
2.設(shè)置必要屬性
a.href="
http://tmooc.cn
";
a.innerHTML="go to tmooc";
3.將新元素添加到DOM樹(shù):3種api:
parent.appendChild(a) 將a追加到指定父元素下末尾
parent.insertBefore(a, child) 將a插入到指定父元素下的現(xiàn)有子元素之前
parent.replaceChild(a, child) 用a替換指定父元素下的現(xiàn)有子元素
優(yōu)化: 盡量減少操作DOM樹(shù)的次數(shù), 從而減少重排重繪
為什么:
HTML頁(yè)面加載過(guò)程:
html -> DOM Tree
↓ Render Tree -> ***layout -> paint ↑
css -> cssRules
如何:
如果同時(shí)添加父元素和子元素時(shí),應(yīng)先在內(nèi)存中,將所有子元素添加到父元素中,
再最后一次性將父元素添加到頁(yè)面上
優(yōu)化: 盡量減少操作DOM樹(shù)的次數(shù)
為什么: 減少重排重繪
如何: 2種:
1.如果同時(shí)添加父元素和子元素,則應(yīng)該現(xiàn)在內(nèi)存中,將子元素添加到父元素,再最后將父元素一次性整體添加到DOM Tree
2.如果父元素已經(jīng)在頁(yè)面上了,要添加多個(gè)平級(jí)子元素,則應(yīng)該使用文檔片段:
什么是文檔片段: 內(nèi)存中臨時(shí)存儲(chǔ)多個(gè)子元素的虛擬父元素 何時(shí): 只要向網(wǎng)頁(yè)中同時(shí)添加多個(gè)平級(jí)子元素時(shí),都可用文檔片段 如何: 3步: 1.創(chuàng)建文檔片段 2.將子元素添加到文檔片段 3.將文檔片段整體添加到DOM 樹(shù)
刪除: parent.removeChild(child)
通常: child.parentNode.removeChild(child)
Image: 創(chuàng)建: var img=new Image();
Select: 代表頁(yè)面上一個(gè)select元素
屬性:
.selectedIndex 獲得當(dāng)前select選中的option的下標(biāo)位置
.value 獲得select中選中的option的值
如果選中的option沒(méi)有value屬性,則用innerHTML代替
.options 獲得當(dāng)前select下所有option的集合
.options.length 獲得select下所有option的個(gè)數(shù) .options.length=0
.length => .options.length
清空所有option .length=0
方法: .add(option) 追加一個(gè)option
問(wèn)題: .add不支持文檔片段 .remove(i) 移除i位置的option
Option: 代表select下一個(gè)option元素
創(chuàng)建: var opt=new Option(text,value)
屬性: .text .value .index
Table: 代表一個(gè)table元素
管著行分組:
創(chuàng)建行分組: var thead=table.createTHead()
var tbody=table.createTBody() var tfoot=table.createTFoot()
刪除行分組: table.deleteTHead()
table.deleteTFoot()
獲取行分組: table.tHead table.tFoot table.tBodies[i]
行分組: 管著行:
添加行: var tr=行分組.insertRow(i)
在i位置插入一個(gè)新行 固定套路: 1\. 在末尾追加新行: .insertRow() 2\. 在開(kāi)頭插入新行: .insertRow(0)
刪除行: 行分組.deleteRow(i) ——不常用!
問(wèn)題: i要求是在當(dāng)前行分組內(nèi)的相對(duì)下標(biāo)位置 無(wú)法自動(dòng)獲得 應(yīng)換為: table.deleteRow(tr.rowIndex) tr.rowIndex可自動(dòng)獲得當(dāng)前行在整個(gè)table內(nèi)的位置
獲取行: 行分組.rows[i]
行: 管著格
添加格: var td=tr.insertCell(i)
固定用法: 行末尾追加一個(gè)格: tr.insertCell() 說(shuō)明: 只能創(chuàng)建td,不能創(chuàng)建th
刪除格: tr.deleteCell(i)
獲取格: tr.cells[i]
Form: 代表一個(gè)form元素
獲取: var form=document.forms[i/id]
屬性: .elements 獲得表單中所有表單元素的集合
.elements.length 獲得表單中,表單元素的個(gè)數(shù) .length => .elements.length
方法: .submit() 代替submit按鈕,在程序中實(shí)現(xiàn)手動(dòng)提交表單
表單元素:
獲取: form.elements[i/id/name]
更簡(jiǎn)化: form.name
方法: .focus 讓當(dāng)前表單元素獲得焦點(diǎn)
到此,關(guān)于“總結(jié)DOM的知識(shí)點(diǎn)”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。