Question

今天我偶然发现了在Javascript中访问DOM元素的可能性，只需通过其id即可。像这样：

elementid.style.backgroundColor = "blue"

我测试了一个非常短的片段，如果这适用于IE，Firefox和Chrome - 它确实如此。这是我使用的片段：

<html><head>
<script>
    function highlight() {
        content.style.backgroundColor = "blue";
        content.style.color = "white";
    }
</script>
</head>
<body>
    <div id="content">test content</div>
    <div onclick="highlight()">highlight content</div>
</body></html>

所以我想知道在哪些情况下document.getElementById('elementid')应该使用（或类似的框架替换如$（））以及直接访问的缺点是什么。

我无法在此找到任何有用的文档。无处不在使用getElementById或框架方法。

Answer 1

微软gubbins是正当的。它在许多浏览器中都不起作用 - 特别是在标准模式下（并且您希望标准模式避免quirks mode不一致，例如IE使width错误）。

Answer 2

您还应该关注名称空间。现在你把它当作全局名称空间中的一个变量来对待它，你不得不信任你或你包含的任何库都声明任何与DOM id同名的全局变量。您的高亮功能也是如此。

虽然带有破折号的id完全有效，但通过此方法无法访问。

e.g。 <div id="container-wrapper"><div id="container"> ... </div></div>

将成为container-wrapper.style.color，然后尝试从容器中减去wrapper.style.color。

Answer 3

这不是任何标准的一部分。此外，简单的变量可以被覆盖。 Var content可以在你的脚本或外部库的任何地方重新声明（并且，是的，我知道全局变量是邪恶的，但ppl仍然使用它们......）并且你的脚本将会中断。

当然，您无法使用alert或document等ID。

通过ID直接访问DOM元素有什么缺点？

3 个答案: