直接通过ID访问DOM元素有哪些缺点?

3
今天我偶然发现可以通过元素的id在Javascript中访问DOM元素,例如像这样:

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或框架方法。


这在Firefox(2)中不起作用。 - Crescent Fresh
3个回答

7

这是专属于微软的东西。它在很多浏览器中不起作用,尤其是在标准模式下(你想要标准模式来避免怪异模式的不一致性,例如IE错误地获取width)。


4
你还应该关注名称空间。现在你把它当作全局名称空间中的变量,你必须确信你自己和你包含的任何库都没有声明与DOM id相同的全局变量。对于你的高亮函数也是如此。
另外,虽然带有破折号的 id 是完全有效的,但这些 id 无法通过此方法访问。
例如:<div id="container-wrapper"><div id="container"> ... </div></div>将变成container-wrapper.style.color,然后尝试从 container 中减去 wrapper.style.color。

2

这不是任何标准的一部分。此外,简单变量可以被覆盖。变量content可以在脚本或外部库中的任何地方重新声明(是的,我知道全局变量很糟糕,但人们仍然使用它们...),你的脚本将会崩溃。

而且,当然你不能使用像alertdocument等的ID。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接