使用ids的DOM树元素会变成全局变量吗？ [英] Do DOM tree elements with ids become global variables?

问题描述

为一个简单的HTMLElement包装器创建一个想法我偶然发现了Internet Explorer和 Chrome ：

Working on an idea for a simple HTMLElement wrapper I stumbled upon the following for Internet Explorer and Chrome:

对于DOM树中具有ID的给定HTMLElement，可以使用其ID作为变量名称来检索div。所以对于像

For a given HTMLElement with ID in the DOM tree, it is possible to retrieve the div using its ID as the variable name. So for a div like

<div id="example">some text</div>

在 Internet  Explorer  8 和Chrome，您可以执行以下操作：

in Internet Explorer 8 and Chrome you can do:

alert(example.innerHTML); //=> 'some text'

或

alert(window['example'].innerHTML); //=> 'some text'

那么这是否意味着在DOM树中的每个元素在全局命名空间中转换为变量？而且这也意味着可以使用这个代替这些浏览器中的 getElementById 方法？

So, does this mean every element in the DOM tree is converted to a variable in the global namespace? And does it also mean one can use this as a replacement for the getElementById method in these browsers?

推荐答案

应该发生什么是命名元素作为文档对象的明显属性添加。这是一个非常糟糕的主意，因为它允许元素名称与文档的实际属性冲突。

What is supposed to happen is that ‘named elements’ are added as apparent properties of the document object. This is a really bad idea, as it allows element names to clash with real properties of document.

通过将命名元素添加为窗口对象的属性，情况更糟。这是双重的坏处，因为现在你必须避免在文档或窗口的任何成员之后命名你的元素对象（或项目中的任何其他库代码）可能需要使用。

IE made the situation worse by also adding named elements as properties of the window object. This is doubly bad in that now you have to avoid naming your elements after any member of either the document or the window object you (or any other library code in your project) might want to use.

这也意味着这些元素可视为全局变量。幸运的是，在这种情况下，您的代码中的任何真正的全局 var 或函数声明影响它们，因此您不需要担心在这里命名太多，但是如果您尝试使用冲突的名称对全局变量进行分配，并且您忘记声明它 var ，则会收到错误在IE中，它尝试将值分配给元素本身。

It also means that these elements are visible as global-like variables. Luckily in this case any real global var or function declarations in your code shadow them, so you don't need to worry so much about naming here, but if you try to do an assignment to a global variable with a clashing name and you forget to declare it var, you'll get an error in IE as it tries to assign the value to the element itself.

通常认为省略 var ，以及依赖于窗口或全局变量可见的命名元素。坚持 document.getElementById ，这是更广泛的支持和较不模糊的。如果您不喜欢打字，您可以编写一个名称较小的简单包装功能。无论哪种方式，使用id-to-element查找缓存没有任何意义，因为浏览器通常会优化 getElementById 调用以使用快速查找;所有你得到的是元素更改 id 或从文档中添加/删除的问题。

It's generally considered bad practice to omit var, as well as to rely on named elements being visible on window or as globals. Stick to document.getElementById, which is more widely-supported and less ambiguous. You can write a trivial wrapper function with a shorter name if you don't like the typing. Either way, there's no point in using an id-to-element lookup cache, because browsers typically optimise the getElementById call to use a quick lookup anyway; all you get is problems when elements change id or are added/removed from the document.

Opera复制IE，那么WebKit加入了，现在既是以前没有标准的做法，把命名元素放在文档属性上，而以前只有IE的做法就是把它们放在code>窗口是是 HTML5的标准化，他们的方法是记录和规范浏览器作者对我们造成的每一个可怕的做法，使他们永远成为网页的一部分。所以Firefox 4也会支持这一点。

Opera copied IE, then WebKit joined in, and now both the previously-unstandardised practice of putting named elements on document properties, and the previously-IE-only practice of putting them on window are being standardised by HTML5, whose approach is to document and standardise every terrible practice inflicted on us by browser authors, making them part of the web forever. So Firefox 4 will also support this.

什么是命名元素？任何具有 id 的东西，以及名称的任何东西都用于识别目的：即表单，图像，锚点和其他几个，但不包括名称属性的其他不相关的实例，例如表单输入字段中的控制名称， param> 或< meta> 中的元数据类型。 名称是应该避免的问题，有利于 id 。

What are ‘named elements’? Anything with an id, and anything with a name being used for ‘identifying’ purposes: that is, forms, images, anchors and a few others, but not other unrelated instances of a name attribute, like control-names in form input fields, parameter names in <param> or metadata type in <meta>. ‘Identifying’ names are the ones that should should be avoided in favour of id.

这篇关于使用ids的DOM树元素会变成全局变量吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！