2011-02-18 23 views
8

网页制作时,我一直使用的功能为什么document.getElementById()函数存在?

var someVariable = document.getElementById('myID'); 

去一个元素对象的引用。最近有人向我暗示,这不是必要的,因为已经有这样一个变量。它的名字等于id。我测试过它,它似乎工作。

<div id="myID">some text</div> 
<a href="someplace" onclick="alert(myID.innerHTML)">click here</a> 

此代码的工作,并预期它会提醒“一些文本”。 firefox错误控制台中只有一个警告:

元素在全局范围内由ID/NAME引用。使用WC3标准的document.getElementById()代替....

我主要使用jQuery现在,但我需要证明这一点给我的老板在工作,否则我将不得不有给他买了一箱巧克力 :-)。

任何想法,为什么上面的代码不应该工作,或者为什么它是一个非常错误的想法使用它(警告在Firefox中是不够的)???

谢谢您的回答

+0

直接引用在IE和`最近`Firefox版本:)中工作 – 2011-02-18 14:15:43

回答

8

通过ID/NAME在 全球范围内被引用的元素。使用WC3标准 的document.getElementById()代替....

您当前的呼叫会导致可能的变量冲突。

拍下这一刻:

<script> 
    var myID = 'foo'; 
</script> 
<div id="myID">some text</div> 
<a href="someplace" onclick="alert(myID.innerHTML)">click here</a> 

myID现在是不是你的HTML元素,但含有 '富' 的变量。 Example.

你应该总是使用的document.getElementById(),因为它是专为特定的函数来检索HTML元素而不是JavaScript的变量。

+0

@Crowder全局变量也进入`window`对象。 – Aistina 2011-02-18 14:19:34

+0

@Aistina:对不起,我误解了你的答案。出于某种原因,我认为你正在处理一个函数的内部范围,但除非你编辑了你的答案,否则你显然正在全球范围内工作。对不起'回合。 – 2011-02-18 14:37:26

10

任何想法,为什么上面的代码不应该工作以及为什么它是一个非常错误的观念来使用它(在Firefox警告是不够的)???

因为它是非标准的(but not for long)。尽管一些浏览器的确将具有ID的元素分配给全局变量,但他们没有义务这么做(而不是全部这样做)。例如,旧版本的Firefox不会出现这种行为。还有命名冲突的风险。

使用document.getElementById()确保所有浏览器的行为完全一样(当然,更多或更少的咳嗽)得到一个句柄元素时。

请参阅bobince's excellent answer以获取更多信息。

+1

+1,就我所知*而言,它从未被标准化 - 只是得到很好的支持。但是单独地,有`id`值你不能通过`window.X`使用,比如id“foo [bar]”。这是一个有效的HTML`id`值,但是如果你使用`window [“foo [bar]”]`,某些浏览器会找到该元素,但是某些浏览器(例如Firefox)不会:http://jsbin.com/otoso4/2 – 2011-02-18 14:20:39

1

可用于跨浏览器兼容性。第二个版本在Chrome中无法使用。这意味着它可能会在Safari中失败。

相关问题