Question

我在玩Chrome时注意到这两个功能都是一样的：

<img src="picture.jpg" id="myelement" />

function stuff(){
var x=document.getElementById("myelement");
x.style.display="none";
}//works almost everywhere

function stuff(){
myelement.style.display="none";
}//only works in Chrome

为什么Chrome允许我直接从ID访问元素而不使用'getElementById'？这样做是不好的做法？这会影响性能吗？

由于

Answer 1

Chrome会自动创建与具有ID的每个元素对应的全局变量。在生产代码中使用这些变量是一个非常糟糕的主意，因为javascript中没有变量是静态的 - 有人可能稍后将其他内容分配给myelement，你将无法知道。

如果您确实使用此功能（可能在测试环境中，如控制台），我猜它会比getElementById()更快，因为运行将myelement分配给相应节点的代码第一种方式。

Answer 2

不，它不会损害性能，Firefox也允许这样做。即使存在变量名冲突条件，本地变量也会获得优先权。

喜欢

＆lt; img src =“picture.jpg”id =“myelement”/＆gt;

function stuff（）

{

var myelement =“test variable”;

myelement.style.display = “无”; //这会导致错误，因为 myelement 现在是一个变量

}

Chrome中的DOM访问权限

2 个答案: