相关疑难解决方法(0)

带有id的DOM树元素是否成为全局变量?

研究一个简单的HTMLElement包装器的想法我偶然发现了Internet Explorer和Chrome的以下内容:

对于DOM树中具有ID的给定HTMLElement,可以使用其ID作为变量名来检索div.所以对于一个喜欢的div

<div id="example">some text</div>
Run Code Online (Sandbox Code Playgroud)

Internet Explorer 8和Chrome中,您可以执行以下操作:

alert(example.innerHTML); //=> 'some text'
Run Code Online (Sandbox Code Playgroud)

要么

alert(window['example'].innerHTML); //=> 'some text'
Run Code Online (Sandbox Code Playgroud)

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

javascript dom global-variables identifier getelementbyid

341
推荐指数
5
解决办法
4万
查看次数

为什么我们不在JavaScript中使用元素ID作为标识符?

我开始使用的所有浏览器都允许id="myDiv"通过简单地编写来访问元素:

myDiv
Run Code Online (Sandbox Code Playgroud)

见这里:http://jsfiddle.net/L91q54Lt/

无论如何,这种方法似乎记录很少,事实上,我遇到的来源甚至没有提及,而是假设有人会使用

document.getElementById("myDiv")
Run Code Online (Sandbox Code Playgroud)

或者可能

document.querySelector("#myDiv")
Run Code Online (Sandbox Code Playgroud)

即使在事先知道其ID(即不在运行时计算)时也要访问DOM元素.我可以说,后者的方法具有保持代码安全的优势,如果有人无意中尝试myDiv在更广泛的范围内重新定义(虽然不是这么好的想法......),用一些不同的值覆盖它并继续而没有注意到冲突.

但其他那个呢?除了代码设计之外,使用上面的简短形式是否有任何问题,或者我在这里缺少什么?

javascript dom getelementbyid

52
推荐指数
3
解决办法
5907
查看次数

我真的需要调用getElementById()吗?

可能重复:
IE/Chrome:DOM树元素是全局变量吗?

我在浏览器中偶然发现了一个意外但有用的行为:它为我的html代码中具有ID的每个元素创建一个变量.所以当我有:

<div id="ohlala"> ... </div>
Run Code Online (Sandbox Code Playgroud)

浏览器似乎在幕后运行此代码:

var ohlala = document.getElementById("ohlala");
Run Code Online (Sandbox Code Playgroud)

所以我可以通过以下方式轻松更改该元素的文本:

ohlala.innerHTML="test"
Run Code Online (Sandbox Code Playgroud)

在网上尝试:http://jsfiddle.net/Facby/ 问题是:为什么我需要自己写这个document.getElementById()位?该代码的可移植性如何?我在Opera,FireFox和Chrome上试过,它有效!我可以依靠这个功能吗?浏览器是否总是为每个具有id的元素创建变量?在这种情况下,我必须更加小心我的javascript代码中使用的名称不要与HTML中的类似ID冲突,对吧?

javascript

13
推荐指数
1
解决办法
2375
查看次数

为什么window [id] === document.getElementById(id)

我注意到在几个浏览器中,dom元素只能通过它们的id访问:

HTML

<div id="chocolat"></div>
Run Code Online (Sandbox Code Playgroud)

JS

alert(chocolat.id); //alerts "chocolat
chocolat; //points to the node
window.chocolat; //idem
chocolat === document.getElementById('chocolat'); // true
Run Code Online (Sandbox Code Playgroud)

(在这里测试:http://jsfiddle.net/GUUPT/)这适用于Chrome上的某些版本的IE,但它不适用于Firefox(5).

我好奇这是从哪里来的?这是标准吗?

javascript

7
推荐指数
1
解决办法
1363
查看次数