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个警报窗口中得到的输出如下：

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

当我点击最后一个警报窗口的“确定”时，标题的颜色变为红色。我想知道它是如何拾取元素的。在访问正文中的标签时，我也没有获得元素标记。有人可以解释输出是如何进行的吗？另外，为什么在标签内的每个标签之后打印[对象文本]？

Answer 1

我想知道它是如何拾取元素的。

文档对象实现NodeList interface，因此所有子节点都可通过 childNodes 属性获得。另请参阅MDN: Node.childNodes。

在访问正文中的标签时，我也没有获得元素标记。

不确定这里的含义，[object HTMLBodyElement]是OP代码中的第五个元素：

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

有人可以解释输出是如何进行的吗？

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

另外，为什么在标签内的每个标签之后打印[对象文本]？

空格被保留为文本节点，因此只要有空格，就会有文本节点。某些浏览器将删除完全是空白的文本节点，或者不允许文本节点的文本节点。其他人不会（也就是说，在保留空格方面，你可能会在不同的主机上获得不同的结果）。

通过文档界面访问html元素

1 个答案: