为什么我不应该更直接地访问元素（elemId.innerHTML）

我已经看过一些JavaScript代码来访问这样的HTML元素：elementID.innerHTML，它可以工作，尽管几乎每个我搜索的教程都使用document.getElementById()。我甚至不知道是否有短期寻址的术语。为什么我不应该更直接地访问元素（elemId.innerHTML）

起初我简单地想过，每个id的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()首选，或者在某些情况下甚至可能需要？

来源

2012-05-17 Heitor Chang

因为Firefox不支持。 – SLaks

这不是标准规范。 –

下次我会记住在发布代码之前跨浏览器进行测试:( –

为什么不应该访问的元素更多“直接”（elemId.innerHTML）

因为，根据其他人在这个线程，通过ID名称随意引用不完全支持。

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

尝试，而不是

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

为什么会做一个很好的事情是，在执行DOM中的查找是一个昂贵的过程，记忆聪明的原因。因此，如果将元素的引用存储到变量中，它将变为静态。因此，每次您想要.doSomething()时都不会执行查找。

请注意，JavaScript库倾向于添加匀场函数来增加跨浏览器的一般功能支持。这对于使用jquery的选择器而不是纯粹的javascript会有好处。尽管如此，如果您实际上担心内存/性能，本地JS通常会赢得速度测试。（jsperf.com是测量速度和比较的好工具。）

来源

2012-05-17 17:23:14 Kristian

不是他所看到的那样，你可以在JavaScript中引用类似于DOM中具有相应ID的元素，但可以很好地演示对象缓存:) – mattytommo

我意识到事后。 EW。大声笑 – Kristian

哈哈告诉我，它是**非常**老派:) – mattytommo

这是更安全我想。如果你有一个名为result的变量在你正在做的result.HTML的相同上下文中，我敢肯定浏览器会抛出一个摇摆。在这个例子中，以document.getElementById()的方式进行操作显然会为您提供关联的DOM元素。

另外，如果你是动态添加HTML页面我可能是错的，但你也可以遇到意外的行为在什么result而言是:)

来源

2012-05-17 17:19:00 mattytommo

另外我会补充一点，并不是所有的ID都可以具有不能作为变量名称的值。例如，如果你的ID是“nav-menu”。

虽然我想你可以写窗口[“导航菜单”。innerHTML的

这使我想到，会发生什么，如果你创建具有相同名称作为ID窗位变量？结帐这jsfiddle（在铬测试）：http://jsfiddle.net/8yH5y/

这真的看起来像一个坏主意。只要使用document.getElementById（“id”）并将结果存储到一个变量中，如果您将多次使用该引用。

来源

2012-05-17 17:39:12

为什么我不应该更直接地访问元素（elemId.innerHTML）

回答

相关问题