使用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）

回答

相关问题