在 JavaScript 中获取子元素
Muhammad Muzammil Hussain
2022年5月5日
本文解释了如何使用 JavaScript 从 HTML 中的网页正文中获取子节点。
使用 JavaScript 从 HTML 中的网页正文中获取子节点
使用 JavaScript 获取节点的子节点意味着访问整个页面并将其放入数组中。请务必记住，空格被视为网页中的文本节点。
在空格的情况下，过时的浏览器会以不同的方式处理它。其中一些被认为是 childNodes，而另一些则被认为是小于版本 8 的 Internet Explorer 之类的子节点。
<!DOCTYPE html>
<html>
<body>
<!-- we are writing a comment node! -->
<p>Click GET NODES button to get child nodes.</p>
<button onclick="getMyWebPageChildNodes()">GET NODES</button>
<p id="results"></p>
<script>
function getMyWebPageChildNodes() {
var myChildsNode = document.body.childNodes;
var textMessages = "";
var i;
for (i = 0; i < myChildsNode.length; i++) {
textMessages = textMessages + myChildsNode[i].nodeName + "<br>";
}
document.getElementById("results").innerHTML = textMessages;
}
</script>
</body>
</html>
在上面的代码中，我们创建了一个按钮并在该按钮上设置了一个名为 onClick 的侦听器。
我们对名为 getMyWebPageChildNodes 的 onclick 进行了操作。我们创建了一个名为 myChildsNode 的数组，并将所有子节点存储在此函数中。
之后，我们创建一个变量 textMessages，我们在其中存储节点，完全没有注释。创建一个 counter 变量来迭代 myChildsNode 数组。
我们创建了一个 for 循环，在其中我们获取网页上所有节点的名称，然后将其存储在 textMessages 变量中。完成后，你将获得所有节点名称，for 循环将终止。
在这里，我们将这些节点分配给我们的段落标签 id=results。最后，我们得到一个段落标签中的所有子节点。