HTML DOM對象 獲取各種類型的節點

HTML DOM對象 獲取各種類型的節點

1.節點（node）的分類

nodeName　　　　　　　　　　nodeValue　　　　　　　　　　nodeType

元素節點 標簽名　　　　　　　　null　　　　　　　　　　　　　　1nt

屬性節點屬性名　　　　　　　　屬性值　　　　　　　　　　　　　2

文本節點#text　　　　　　　　   文本值　　　　　　　　　　　　　3

注釋節點#comment　　　　　　 注釋內容　　　　　　　　　　　　 8

2.元素節點的4種獲取方式

<div id="tt"  class="div"  name="yy"></div>

var stt = document.getElementById("tt");

var stt = document.getElementsByClassName("div")[0];　　　　[0]代表相同名字時第一個元素內容也就是父級元素下所有內容

詳細解釋：通過document.getElementsByClassName("div")獲取到name為div的元素。[ n] n代表相同name情況下第幾個元素

3.獲取節點所有的子節點

console.log(stt.childNodes);

var sttChild = stt.childNode;

console.log(sttChild.nodeName//獲取節點的name,sttChild.nodeValue//獲取節點的值,sttChild.nodeType//獲取節點的類型)

4.獲取節點的屬性節點

var sttattr = stt.attributes;

注意當一個元素內有多個屬性 比如 id   class  style name  同時存在時 誰在前面先獲取誰

 節點的層次關系

<div id="tt"  class="div"  name="yy"></div>

var stt = document.getElementById("tt");

stt.childNodes//獲取所有子節點

stt.firstChild//獲取第一個子節點

stt.lastChid//獲取最后一個子節點

兄弟關系

stt.previousSibling//獲取前一個兄弟的節點

stt.nextSibling//獲取下一個兄弟的節點

stt.ownerDocument //獲取根節點