gpt4 book ai didi

javascript - 意外的 childNodes 行为

转载 作者:行者123 更新时间:2023-11-28 20:43:18 26 4
gpt4 key购买 nike

我设置了一些简单的 HTML 和 JS 代码,以便更好地处理遍历 DOM。

这是我的 HTML:

<!DOCTYPE html>
<html>
<head>
<title>Sandbox</title>
</head>
<body>
<div>
<h1 id="title">Sandbox</h1>
<button id="clickMe" onclick="playingAroundWithNodes()">Play with nodes!</button>
</div>
</body>
<script type="text/javascript" src="Sandbox3.js"></script>
</html>

这是我的 JavaScript:

function playingAroundWithNodes() {

//Getting a reference to some nodes!

var theHtmlNode = document.childNodes[1];
var theHeadNode = theHtmlNode.childNodes[0];
var theBodyNode = theHtmlNode.childNodes[1];

//Let's check out those nodes!

console.log("theHtmlNode is a " + theHtmlNode.nodeName + " type node.");
console.log("theHeadNode is a " + theHeadNode.nodeName + " type node.");
console.log("theBodyNode is a " + theBodyNode.nodeName + " type node.");

}

这是我得到的控制台日志:

theHtmlNode is a HTML type node.
theHeadNode is a HEAD type node.
theBodyNode is a #text type node.

什么给了?那个文本节点到底在哪里,不是标题节点吧?我很困惑,并且已经玩了很多次(发现 body 节点实际上是根据 js 的 HEAD 的第三个子节点,但查看 HTML 对我来说没有意义)。我可以看到它是第三个后代或其他什么,但我认为 child 意味着直系 child ......任何帮助表示感谢!

最佳答案

首先,你对我有新的想法。我没有意识到document有一个childNodes根本没有属性(通常通过 document.documentElement 访问根元素(html))。

对于文本节点,这些发生取决于您如何格式化 HTML 文件。上面出现的文本节点可能是一个返回字符或结束 </head> 之间的几个空格。并开放<body> .

您可能正在寻找的是(最初是非标准的,但现在最近proposed for standardisation)element.childrenJohn Resig has a good overview .

因此,如果您按如下方式修改上面的代码,您将得到您所期望的结果:

var theHeadNode = theHtmlNode.children[0];
var theBodyNode = theHtmlNode.children[1];

关于javascript - 意外的 childNodes 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13941157/

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