DOM文檔對象模型

　　HTML中每個內容（標簽、文本內容、屬性）都是一個節點對象Node。

　　node（節點）的屬性

三大屬性：

　　1、nodeType節點類型

　　　　專門區分節點的類型：

　　　　　　document　　9

　　　　　　 element　　? 1

　　　　　　 attribute? ? ? ? ?2

　　　　　　? ? text? ? ? ? ? ? ?3

　　2、nodeName節點名稱

　　　　document　　#document

　　　　? element　　全大寫的標簽名

　　　　? attribute　　屬性名

　　　　　 text　　　#text

　　3、nodeValue節點值

　　　　　　null　　

　　　　　　null

　　　　　　屬性

　　　　　　文本內容

?

　　　　DOM的操作之查找

查找：

　　1、直接獲取的三個元素：

　　　　html　　document.documentElement

　　　　head　　　　　　.head

　　　　body　　　　　　.body

　　2、節點關系

　　　　父子關系：

　　　　　　node.parentNode　　返回node的父節點

　　　　　　node.childNodes　　 返回Node的所有直接子節點

　　　　　　node.firstChild　　　 返回node下第一個子節點

　　　　　　node.lastChild　　　 返回node下最后一個子節點

　　　　兄弟關系：

　　　　　　node.previousSibling　　返回當前節點前一個兄弟節點

　　　　　　node.nextSibling　　　　獲得當前節點后一個兄弟節點

　　不但包含有用的元素節點，還包含了看不見的換行、空格干擾。

　　下一種方法只獲取節點信息：

　　父子關系：

　　　　elem.parentElement　　返回一個父元素對象

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

　　　　? ? ? ? .firstElementChild? ?返回第一個子元素對象?

　　　　? ? ? ? .lastElementChild　返回最后一個子元素對象

　　兄弟關系：

　　　　? ? ? ? .previousElementSibling　返回當前元素的前一個兄弟元素對象

　　　　? ? ? ? . nextElementSibling　　? 返回當前元素的下一個兄弟元素對象（IE9+）

　　

　　　　按HTML查找

what？

　　在整個網頁或指定父元素下，查找屬性或標簽符合要求的元素對象。

what？

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

四種方法：

　　1、通過id查找html元素

　　2、通過類名查找html元素

　　3、通過標簽名查找html屬性

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

　　

　　按選擇器查找：

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

　　1、僅查找一個元素：

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

　　2、查找多個元素：

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

　　　非動態！

　　

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

　　1、返回值： getXXX 返回值：動態集合
　　 　 SeletorAPI 返回值：非動態集合
　　2、效率： getXXX 首次查詢效率高
　　　? SeletorAPI 首次查詢效率低
　　3、易用： getXXX 條件復雜是，更繁瑣

　　SeletorAPI 更簡單，因為繁瑣的工作就交給了選擇器
　　如果通過一個條件就可以得到元素時，首選getXXX；
　　如果條件復雜時，首選SeletorAPI

　　

在JS中修改html：

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

核心DOM：可以操作一切結構文檔的API（HTML和XML）

　　優點：萬能　　缺點：繁瑣

HTML DOM：對核心DOM中常用的API的簡化

　　優點：簡單　　缺點：不是萬能，只有對部分API的簡化

視情況而定使用哪種方法，優先用簡單的。

　　核心DOM訪問屬性：

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

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

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

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

　　HTML DOM屬性：

　　　　elem.屬性名;

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

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

　　　　elem.屬性名 = "";　　//屬性名設為空則刪除

?

轉載于:https://www.cnblogs.com/yeming980912/p/10981536.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。