Javascript 通过文档接口访问html元素_Javascript_Html_Dom_Domdocument

Javascript 通过文档接口访问html元素

javascript html dom

Javascript 通过文档接口访问html元素,javascript,html,dom,domdocument,Javascript,Html,Dom,Domdocument,locatignodes.html <!DOCTYPE html> <html> <head> <script src = "../js/LocatingNodes.js" type="text/javascript"> </script> </head> <body> <h2 style = "color:black" id="cut

locatignodes.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>

我试着运行上面的程序。我在11个警报窗口中获得的输出如下所示：

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

之后，当我单击最后一个警报窗口的“确定”时，标题的颜色变为红色。我想知道它是如何吸收元素的。此外，在访问主体中的标记时，我没有获得元素标记。有人能解释一下输出是如何执行的吗？另外，为什么要在标签中的每个标签后面打印[对象文本]

我想知道它是如何吸收元素的

文档对象实现了，因此所有子节点都可以通过childNodes属性使用。另见

此外，在访问主体中的标记时，我没有获得元素标记

不确定您在这里的意思，

[object HTMLBodyElement]

是OP代码中的第五个元素：

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

有人能解释一下输出是如何执行的吗

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

另外，为什么要在标签中的每个标签后面打印[对象文本]

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

谢谢@RobG。以上信息非常有用。如果我想跟踪标记，我该怎么做？正如您所说，“当您向警报发送DOM元素时，它的toString方法将被调用。结果取决于实现，在您的主机中，您可以看到您看到的内容。其他主机可能会返回不同的字符串。”如果我也想看到其他结果，我该怎么做？我的意思是，结果如何依赖于实现？是否需要更改代码？@kanchan您无法更改任何内容。测试其他主机以了解它们的功能，或者您可以编写自己的函数。您还将在控制台中获得不同的结果。谢谢@Rob。将尝试编写用于检查不同结果的函数。

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