document.getElementById("someId") 与 someId 的区别

Question

document.getElementById("someId") 与 someId 的区别

8

这个问题可能看起来很傻，但是使用document.getElementById("someId")和仅仅键入someId来访问一个元素(其id为"someId")有什么区别呢？

例如：

document.getElementById("someId").style.top = "12px";

vs

someId.style.top = "12px";

这是一个示例代码http://jsfiddle.net/pRaTA/（我发现它在火狐浏览器中无法工作）。

- kwa

2

第二种形式的问题是名称冲突。例如，在您的jsfiddle中将“abc”更改为“document”，并查看每种情况下会发生什么。 - Alohci

请参见可能的重复项这里DOM树元素是否是全局变量？ - Bergi

5个回答

2

声明一个元素的DOM id并不意味着它在所有浏览器中都作为全局变量可用。唯一跨平台兼容的方法是首先执行以下操作。

var someId = document.getElementById("someId");

编辑: 我编写了这个测试代码，验证了基于webkit内核的浏览器似乎在未声明id变量之前就将其作为变量提供。根据这篇文章，IE也会显示此行为。

Firefox: object/undefined
Safari: object/object
Chrome: object/object
IE: object/object (未经验证)

代码:

 <html>
    <head>
    </head>
 <body>
   <div id="foo"></div>
   <script type="text/javascript">

     alert("getElementById: "+typeof document.getElementById("foo"));
     alert("as a var: "+typeof foo);

   </script>
 </body>

- Martin Algesten

是的，在火狐浏览器中无法工作。顺便说一句，它在IE中也可以工作！http://jsfiddle.net/pRaTA/ - kwa

2

太棒了，我从来不知道 Webkit 浏览器可以这样做。这里有一个潜在的重复问题：https://dev59.com/-3A75IYBdhLWcg3wK1wp - Martin Algesten

谢谢你提供的链接！有趣的是，我真的以为我会因为问这个问题而被嘲笑！ :) - kwa

0

在客户端脚本中，我们使用document.getElementById来获取网页中的元素对象。要检索DOM中特定的元素及其属性和方法，您需要使用getElementById方法。在Jquery中，您可以简单地使用var objX = $('#id')。

直接写下id将无法完成任务。因为如果不遍历文档，如何从DOM中提取元素对象。document.getElementById方法将从文档中提取元素信息。我希望这有些意义。

- Karan

0

访问元素作为以元素ID命名的全局对象的属性（您的第二个示例）是一种方便，起源于IE，并被Safari和Chrome复制。这是一个非常糟糕的想法，你不应该使用它。主要问题是命名冲突（例如，具有完全有效的ID，如“alert”或“document”的元素）。

另一方面，document.getElementById()是长期建立的DOM标准，除了一些白痴的IE缺陷之外，是万无一失的。始终优先使用它而不是其他形式。

- Tim Down

0

仅使用someId是一种选择元素的旧方法（我认为这是IE实现的）。document.getElementById是标准的，适用于所有浏览器。

考虑到只支持旧版IE浏览器的情况，document.getElementById仍然更可靠和易读。如果使用所有数字作为ID，则更可靠。

例如：

input element id="123"

document.getElementById('123').value; // this one works
123.value; // this one doesn't

- gianebao

考虑到您只支持旧版IE浏览器的情况。 - gianebao

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Emmett · Accepted Answer

区别在于，虽然在一些浏览器中someId可以使用，但document.getElementById("someId")实际上符合W3C标准。