使用Javascript遍歷DOM（nodeType）

我開始探索如何使用Javascript來操縱DOM。我從最基本的開始，但立刻就被卡住了。使用Javascript遍歷DOM（nodeType）

所以從W3我發現，有3種類型節點的HTML：

元素
屬性
文本

以這個片段爲例<p id="myId">My paragraph</p>我會說：

<p>
ID
我第

但是，當我在應用代碼這一概念，這是行不通的。這裏我舉的例子：

<! DOCTYPE html> 
<html> 
<head></head> 
<body>  
    <script> 

     var htmlElement = document.documentElement; 
     var headElement = htmlElement.firstChild 
     var bodyElement = headElement.nextSibling; 

     alert (bodyElement.nodeType); 

    </script> 
</body>

你可以從我的變量名想象，我希望有「1」作爲我的警覺的結果（這將是元素「主體」），而不是我收到一個文本「3」。但是我的「頭」元素中沒有任何文字。

我該如何解釋？

來源

2015-12-22 Giovanni Vigorelli

' \ n'是一個字符節點 – Kaiido

<！DOCTYPE html>也是一個節點 – Ludo

@盧多，是的，但它不是'document.documentElement'的一部分 – Kaiido

JavaScript也在關注新行（\ n），所以當你使用nextSibling時，它也會得到新的行字符。

因此，使用下面的代碼：

headElement.nextSibling

將結果\n現在讓身體元素，你需要再次使用nextSibling：

headElement.nextSibling.nextSibling

或者，你可以使用nextElementSibling通過您剛纔獲得下一個兄弟類型element：

headElement.nextElementSibling

來源

2015-12-22 05:05:50

使用Javascript遍歷DOM（nodeType）

回答

相關問題