在Javascript中遍历DOM（节点类型）_Javascript_Html_Dom

在Javascript中遍历DOM（节点类型）

javascript html dom

在Javascript中遍历DOM（节点类型）,javascript,html,dom,Javascript,Html,Dom,我开始探索如何使用Javascript操纵DOM。我从最基本的开始，但马上就被卡住了因此，从W3开始，我发现HTML中有3种类型的节点：元素属性正文以这段代码为例，我想说：身份证我的段落但当我在代码中应用这个概念时，它就不起作用了。以下是我的例子： <! DOCTYPE html> <html> <head></head> <body> <script> var htm

我开始探索如何使用Javascript操纵DOM。我从最基本的开始，但马上就被卡住了

因此，从W3开始，我发现HTML中有3种类型的节点：

元素

属性

正文

以这段代码为例，我想说：

身份证

我的段落

但当我在代码中应用这个概念时，它就不起作用了。以下是我的例子：

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

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

        alert (bodyElement.nodeType);

    </script>
</body>


var htmlElement=document.documentElement；
var headElement=htmlElement.firstChild
var bodyElement=headElement.nextSibling；
警报（bodyElement.nodeType）；

正如您可以从我的变量名想象的那样，我希望警报的结果是“1”（它将是元素“body”），而我收到的是一个文本“3”。但是我的“head”元素中没有任何文本

我如何解释这一点呢？

JavaScript也关心新行（\n），因此当您使用nextSibling时，它也会获得新行字符

因此，使用以下代码：

headElement.nextSibling

will results

\n

现在要获取body元素，您需要再次使用nextSibling：

headElement.nextSibling.nextSibling

或者，您可以使用它来获得类型为

元素的下一个兄弟：
headElement.nextElementSibling

\n
是字符节点还是节点also@Ludo，是，但它不是文档的一部分。documentElement