DOM文檔對(duì)象模型

　　HTML中每個(gè)內(nèi)容（標(biāo)簽、文本內(nèi)容、屬性）都是一個(gè)節(jié)點(diǎn)對(duì)象Node。

　　node（節(jié)點(diǎn)）的屬性

三大屬性：

　　1、nodeType節(jié)點(diǎn)類型

　　　　專門區(qū)分節(jié)點(diǎn)的類型：

　　　　　　document　　9

　　　　　　 element　　? 1

　　　　　　 attribute? ? ? ? ?2

　　　　　　? ? text? ? ? ? ? ? ?3

　　2、nodeName節(jié)點(diǎn)名稱

　　　　document　　#document

　　　　? element　　全大寫的標(biāo)簽名

　　　　? attribute　　屬性名

　　　　　 text　　　#text

　　3、nodeValue節(jié)點(diǎn)值

　　　　　　null　　

　　　　　　null

　　　　　　屬性

　　　　　　文本內(nèi)容

?

　　　　DOM的操作之查找

查找：

　　1、直接獲取的三個(gè)元素：

　　　　html　　document.documentElement

　　　　head　　　　　　.head

　　　　body　　　　　　.body

　　2、節(jié)點(diǎn)關(guān)系

　　　　父子關(guān)系：

　　　　　　node.parentNode　　返回node的父節(jié)點(diǎn)

　　　　　　node.childNodes　　 返回Node的所有直接子節(jié)點(diǎn)

　　　　　　node.firstChild　　　 返回node下第一個(gè)子節(jié)點(diǎn)

　　　　　　node.lastChild　　　 返回node下最后一個(gè)子節(jié)點(diǎn)

　　　　兄弟關(guān)系：

　　　　　　node.previousSibling　　返回當(dāng)前節(jié)點(diǎn)前一個(gè)兄弟節(jié)點(diǎn)

　　　　　　node.nextSibling　　　　獲得當(dāng)前節(jié)點(diǎn)后一個(gè)兄弟節(jié)點(diǎn)

　　不但包含有用的元素節(jié)點(diǎn)，還包含了看不見的換行、空格干擾。

　　下一種方法只獲取節(jié)點(diǎn)信息：

　　父子關(guān)系：

　　　　elem.parentElement　　返回一個(gè)父元素對(duì)象

　　　　? ? ? ? .children　　　　　返回子元素對(duì)象的集合（IE8支持）

　　　　? ? ? ? .firstElementChild? ?返回第一個(gè)子元素對(duì)象?

　　　　? ? ? ? .lastElementChild　返回最后一個(gè)子元素對(duì)象

　　兄弟關(guān)系：

　　　　? ? ? ? .previousElementSibling　返回當(dāng)前元素的前一個(gè)兄弟元素對(duì)象

　　　　? ? ? ? . nextElementSibling　　? 返回當(dāng)前元素的下一個(gè)兄弟元素對(duì)象（IE9+）

　　

　　　　按HTML查找

what？

　　在整個(gè)網(wǎng)頁或指定父元素下，查找屬性或標(biāo)簽符合要求的元素對(duì)象。

what？

　　只要是按照基本的條件有選擇的查找元素。

四種方法：

　　1、通過id查找html元素

　　2、通過類名查找html元素

　　3、通過標(biāo)簽名查找html屬性

　　4、通過元素的name屬性查找html元素

　　

　　按選擇器查找：

按HTML查找每一次只能使用一個(gè)查詢條件，選擇器查找條件復(fù)雜的都可以查找。

　　1、僅查找一個(gè)元素：

　　　　var? elem = 父元素.querySelector（“選擇器”）；

　　2、查找多個(gè)元素：

　　　　var? elem = 父元素.querySelectorAll（“選擇器”）；

　　　非動(dòng)態(tài)！

　　

?鄙視題： getXXX vs SeletorAPI的差別是什么？ 如何選擇？

　　1、返回值： getXXX 返回值：動(dòng)態(tài)集合
　　 　 SeletorAPI 返回值：非動(dòng)態(tài)集合
　　2、效率： getXXX 首次查詢效率高
　　　? SeletorAPI 首次查詢效率低
　　3、易用： getXXX 條件復(fù)雜是，更繁瑣

　　SeletorAPI 更簡單，因?yàn)榉爆嵉墓ぷ骶徒唤o了選擇器
　　如果通過一個(gè)條件就可以得到元素時(shí)，首選getXXX；
　　如果條件復(fù)雜時(shí)，首選SeletorAPI

　　

在JS中修改html：

　　DOM分兩種，核心DOM，HTML DOM。

核心DOM：可以操作一切結(jié)構(gòu)文檔的API（HTML和XML）

　　優(yōu)點(diǎn)：萬能　　缺點(diǎn)：繁瑣

HTML DOM：對(duì)核心DOM中常用的API的簡化

　　優(yōu)點(diǎn)：簡單　　缺點(diǎn)：不是萬能，只有對(duì)部分API的簡化

視情況而定使用哪種方法，優(yōu)先用簡單的。

　　核心DOM訪問屬性：

　　　　獲得屬性值：var value = elem.getAttribute("屬性名");

　　　　修改屬性值：elem.setAttribute("屬性名","屬性值");

　　　　判斷是否包含屬性：var bool != elem.hasAttribute("屬性名");

　　　　移除屬性：elem.removeAttribute("屬性名");

　　HTML DOM屬性：

　　　　elem.屬性名;

　　　　elem.屬性名 = "屬性值";

　　　　elem.屬性名 != "";　　//判斷是否為空則判斷是否包含屬性

　　　　elem.屬性名 = "";　　//屬性名設(shè)為空則刪除

?

轉(zhuǎn)載于:https://www.cnblogs.com/yeming980912/p/10981536.html

總結(jié)

以上是生活随笔為你收集整理的JS中的DOM的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。