DOM之節點樹操作
阿新 • • 發佈：2017-07-14
class類 com size table next nod comment nodevalue sel
節點樹
每個html頁面載入瀏覽器的時候,瀏覽器都會生成一個樹形結構,這個樹形結構由節點組成,我們稱之為節點樹或文檔樹;
每個HTML標簽都是元素節點
每個標簽的屬性都是屬性節點
每個標簽的文本內容都是文本節點
節點分為: 元素節點 屬性節點 文本節點 註釋節點
nodeType 獲取節點的類型
nodeName 獲取節點的名稱
nodeValue 獲取節點的值
| 節點 | nodeType | nodeName | nodeValue |
| 元素節點 | 標簽名 | 1 | null |
| 屬性節點 | 屬性名 | 2 | 屬性值 |
| 文本節點 | #text |
3 | 文本內容 |
| 註釋節點 | #comment | 8 | 註釋內容 |
|
操作 |
作用 | 返回值 |
|
document.getElementById(id值) |
根據id獲取頁面指定元素 | 獲取到的是一個元素節點 |
|
doument.getElementsByName(name屬性值) |
據name名稱獲取頁面的指定元素 | NodeList,獲取到的是一個節點列表, |
|
document.getElementsByClassName(類名) |
根據class類名來獲取頁面的指定元素 | NodeList,節點列表 |
|
document.getElementsByTagName(標簽名) |
獲取頁面中指定的標簽元素 | NodeList,節點列表 |
|
document.getElementsByTagNameNS() |
根據命名空間獲取指定的元素; | |
| innerHTML | 獲取或設置標簽的內容 | |
| innerText | 獲取或設置標簽的文本 | |
| tagName | 用來獲取元素的標簽名 | |
| Element.getAttribute(字符串參數屬性名) | 根據指定屬性名獲取指定屬性的值 | 字符串 |
|
Element.setAttribute (字符串參數屬性名,字符串參數屬性值) |
給指定屬性設置指定的值; |
|
| Element.removeAttribute(字符串參數屬性名) |
刪除元素指定屬性 | |
| element.childNodes | 獲取某個元素節點的所有子節點 | 返回值是NodeList |
| element.attributes | 獲取某個元素節點的所有屬性節點 | 返回值是NodeList |
innerHTML和innerText的區別?
獲取標簽內容: innerHTML可以獲取到標簽內部的所有內容,包括文本,標簽，屬性等;innerText只能獲取到標簽裏面的文本內容;
設置標簽內容: innerHTML設置的帶標簽內容,可以被瀏覽器解析;innerText設置的帶標簽內容,只會被認為是單純的文本;
基於element元素節點的屬性
| childNodes | 獲取指定元素的所有子節點,包含空白,文本,元素(NodeList) |
| chidren | 獲取指定元素的所有元素子節點;(NodeList) |
| firstChild | 獲取指定元素的第一個子節點;(Node) |
| firstElementChild | 獲取指定元素的第一個元素子節點;(Element) |
| lastChild | 獲取指定元素的最後一個子節點;(Node) |
| lastElementChild | 獲取指定元素的最後一個元子節點;(Element) |
| parentNode | 獲取當前節點的父節點;(Node) |
| ownerDocument | 獲取到頁面的document節點,一個用瀏覽器打開的頁面就是一個document對象,這個對象也成為document節點 |
| previousSibling | 獲取當前節點的前一個兄弟節點;(Node) |
| previousElementSibling | 獲取當前節點的前一個兄弟元素節點;(Element) |
| nextSibling | 獲取當前節點的下一個兄弟節點 |
| nextElementSibling | 獲取當前節點的下一個兄弟元素節點 |
| attributes | 獲取當前節點的所有屬性節點 |
| childElementCount | 獲取當前節點的元素節點的個數 |
DOM之節點樹操作