gpt4 book ai didi

javascript - 在Javascript中遍历DOM(nodeType)

转载 作者:行者123 更新时间:2023-12-02 15:16:44 26 4
gpt4 key购买 nike

我开始探索如何使用 Javascript 操作 DOM。我从非常基础的开始,但我立即陷入困境。

所以从W3我发现HTML中有3种类型的节点:

  1. 元素
  2. 属性
  3. 文字

以此片段为例<p id="myId">My paragraph</p>我想说:

  1. <p>
  2. ID
  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>

正如您从我的变量名称中可以想象的那样,我希望警报结果为“1”(它将是元素“body”),但我收到的是文本“3”。但我的“head”元素中没有任何文本。

我该如何解释这一点?

最佳答案

JavaScript 也关心换行符 (\n),因此当您使用 nextSibling 时,它也会获得换行符。

因此,使用以下代码:

headElement.nextSibling

现在会产生\n来获取body元素,您需要再次使用nextSibling:

headElement.nextSibling.nextSibling

或者,您可以使用nextElementSibling通过它,您可以获得 element 类型的下一个同级:

headElement.nextElementSibling

关于javascript - 在Javascript中遍历DOM(nodeType),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34408542/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com