通过文档界面访问 html 个元素

Question

LocatingNodes.html

<!DOCTYPE html>
<html>
    <head>
        <script src = "../js/LocatingNodes.js" type="text/javascript">
        </script>
    </head>
    <body>
        <h2 style = "color:black" id="cute_text">Click on a button to change the color</h2>
        <form>
        <input onclick="change_color1()" type="button" value="Change using method 1">
        </form>
    </body>
</html>

LocatingNodes.js

function change_color1()
{
    alert(document.childNodes[0]);
    alert(document.childNodes[1]);
    alert(document.childNodes[1].childNodes[0]);
    alert(document.childNodes[1].childNodes[1]);
    alert(document.childNodes[1].childNodes[2]);
    alert(document.childNodes[1].childNodes[2].childNodes[0]);
    alert(document.childNodes[1].childNodes[2].childNodes[1]);
    alert(document.childNodes[1].childNodes[2].childNodes[2]);
    alert(document.childNodes[1].childNodes[2].childNodes[3]);
    alert(document.childNodes[1].childNodes[2].childNodes[4]);
    alert(document.childNodes[1].childNodes[2].childNodes[5]);
    document.childNodes[1].childNodes[2].childNodes[1].style.color="red";
}

我试过运行上面的程序。我在 11 alert windows 中得到的输出如下：

[object DocumentType],
[object HTMLhtmlElement],
[object HTMLHeadElement],
[object Text],
[object HTMLBodyElement], 
[object Text], 
[object HTMLHeadingElement], 
[object Text], 
[object HTMLFormElement], 
[object Text], 
undefined

当我点击最后一个警报 window 的 'OK' 时，标题的颜色变为红色。我想知道它是如何拾取元素的。此外，我在访问 body 中的标签时没有获得元素标签。有人可以解释一下输出是如何进行的吗？另外，为什么 [object Text] 在标签内的每个标签之后打印？

Answer 1

I am wondering that how it is picking up the elements.

文档对象实现了NodeList interface, so all child nodes are available through the childNodes property. Also see MDN: Node.childNodes.

Also I didn't get the element tag while accessing tags in the body.

不清楚你的意思，[object HTMLBodyElement]是OP代码中的第五个元素：

alert(document.childNodes[1].childNodes[2]);

Can someone please explain how the output is being carried out?

当您向警报发送 DOM 元素时，将调用 toString 方法。结果取决于实现，在你的主机中你得到你所看到的。其他主机可能 return 不同的字符串。

Also, why [object Text] is being printed after every tag that is within tag?

空白被保留为文本节点，所以哪里有空白就会有一个文本节点。一些浏览器会删除完全是空白的文本节点，或者不允许文本节点的地方。其他人不会（即关于保留空格，您可能会在不同的主机上得到不同的结果）。

通过文档界面访问 html 个元素

Accessing html elements through document interface

html

javascript

dom

domdocument