我设置了一些简单的 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.
是什么赋予了?那个文本节点到底在哪里,那不是标题节点吗?我很困惑并且已经玩了一堆(并且发现根据js,body节点实际上是HEAD的第三个孩子,但是查看对我来说没有意义的HTML)。我可以看到它是第三个后代或其他东西,但我认为孩子意味着直接孩子......任何帮助表示赞赏!