Question

我是javascript的新手，所以在做一些学习时我发现有一些id的元素就像

一样

html部分

<canvas id="someid"><canvas>

js part

someid.someProperty = something; // works as well as getElementById('someid')

但在所有教程中，我发现它被告知要使用getElementById。播下一种或另一种方式的好处？我应该选择哪种方式？检查Firefox，Opera，DWB和geany内部浏览器（webkit）。

Answer 1

某些浏览器为命名的DOM元素创建隐式全局变量。在Firefox中以这种方式引用元素会产生以下警告：

“ID / NAME在全局范围内引用的元素。使用W3C标准 document.getElementById（）代替。“

遵循警告的建议。使用getElementById：

受标准
是明确的（因此更清晰）
要求您为要引用的每个元素创建适当范围的变量
对于现代开发者来说更容易识别

没有充分的理由使用非标准方法。

Answer 2

在所有情况下都使用document.getElementById("whatever")。以下是一些相关问题：

使用自动全局变量存在以下问题：

不是标准定义的行为
并非所有浏览器都支持
易受全局命名空间冲突的影响
某些名称属性（但不是全部）可以这样使用
可以在ID和名称之间发生冲突
代码的可读性较差，因为读者必须弄清楚您是否正在使用之前已输入值的全局变量，或者这是否是自动定义的变量。

使用document.getElementById()：

受标准
所有浏览器均支持
不依赖任何全局变量
所有用途中的明确行为

Answer 3

对于JS，您打算编写它总是很好的手动将变量绑定到DOM元素，否则如果某个Object绑定到window对象并且与您的元素共享相同的ID名称，则可能会得到不希望的结果

var someid = {}; // Some Object

someid.style.color = "red";  // DOM element remains untouched
// we just nested properties and values to the 'someid' Object.
// #someid text has not become red.

var myElement = document.getElementById('someid');
// var myElement = querySelector('#someid');
myElement.style.color = "red";
// Wow, now it is

Javascript DOM元素通过id访问而不使用函数

3 个答案: