带有 id 的 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?

推荐答案

应该发生的是命名元素"被添加为 document 对象的明显属性.这是一个非常糟糕的主意，因为它允许元素名称与 document 的真实属性发生冲突.

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 还添加了命名元素作为 window 对象的属性，从而使情况变得更糟.这很糟糕，因为现在您必须避免以您的 document 或 window 对象(或项目中的任何其他库代码)的任何成员命名您的元素可能想用.

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 或 function 声明都会影响它们，因此您不必太担心这里的命名，但是如果您尝试对具有冲突名称的全局变量进行赋值，而您忘记声明它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 以及依赖于在 window 上可见或作为全局变量的命名元素通常被认为是不好的做法.坚持使用 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，现在既有以前未标准化的将命名元素放在 document 属性上的做法，也有以前仅用于 IE 的将它们放在 上的做法window 是 标准化 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 的任何东西，以及用于识别"目的的任何带有 name 的东西:即表单、图像、锚点和其他一些，但不是其他不相关的实例name 属性，例如表单输入字段中的控件名称、 中的参数名称或 中的元数据类型.识别" name 是应该避免使用 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 be avoided in favour of id.

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