4

我见过一些 JavaScript 代码来访问这样的 HTML 元素：elementID.innerHTML，它可以工作，尽管几乎我搜索的每个教程都使用document.getElementById(). 我什至不知道是否有短地址的术语。

起初我简单地认为每个 id'ed HTML 元素都直接在下面，window但使用getParent()显示树结构在那里，所以我想要的元素是否嵌套并不重要。我写了一个简短的测试用例：

http://jsfiddle.net/hYzLu/

<div id="fruit">Mango<div id="color">red</div></div>
<div id="car">Chevy</div>
<div id="result" style="color: #A33"></div>

result.innerHTML = "I like my " + color.innerHTML + " " + car.innerHTML;

“短”方法看起来像是一个不错的捷径，但我觉得它有问题，因为它实际上没有出现在教程中。

为什么是document.getElementById()首选，或者在某些情况下甚至可能需要？

4

3 回答 3

1

此外，我还要补充一点，并非所有 ID 都可以具有不能用作变量名的值。例如，如果您的 ID 是“nav-menu”。

虽然我想你可以写 window["nav-menu"].innerHTML

这让我想到，如果您创建一个与 ID 同名的窗口级别变量会发生什么？签出这个 jsfiddle（在 chrome 中测试）：http: //jsfiddle.net/8yH5y/

这似乎完全是个坏主意。如果您将多次使用引用，只需使用 document.getElementById("id") 并将结果存储到变量中。

于 2012-05-17T17:39:12.260 回答
1

为什么我不应该更“直接”地访问元素 (elemId.innerHTML)

因为，根据该线程中的其他人的说法，不完全支持通过 id name 任意引用。

所以，我认为你应该做的是将他们的选择存储到一个var中，然后引用这个var。

试试吧

var color = document.getElementById('color');
color.innerHTML = 'something';

这样做是一件好事的原因是在 DOM 中执行查找是一个昂贵的过程，内存方面。因此，如果将元素的引用存储到变量中，它就会变成静态的。因此，您不会每次都执行查找.doSomething()。

请注意，javascript 库倾向于添加 shim 函数以增加跨浏览器的通用函数支持。例如，使用 jquery 的选择器而不是纯 javascript，这将是一个好处。不过，如果您实际上担心内存/性能，原生 JS 通常会赢得速度测试。（jsperf.com 是衡量速度和进行比较的好工具。）

于 2012-05-17T17:23:14.677 回答
1

我想这更安全。如果您有一个result在与您正在做的相同上下文中命名的变量，result.HTML我很确定浏览器会抛出一个摆动器。以本例中的方式执行document.getElementById()此操作显然会为您提供关联的 DOM 元素。

此外，如果您将 HTML 动态添加到页面中，我可能是错的，但您也可能会遇到意外行为result：)

于 2012-05-17T17:19:00.570 回答