Javascript querySelector返回字符串而不是DOM元素

我尝试分析此页面上的颜色名称：

使用此代码：

var all = document.querySelectorAll(".color-group");

for(var i=0; i<all.length; i++){
    var e = all[i];
    var name = e.querySelector('span.name');
    console.debug(name.innerHTML);
}

唯一的区别是我直接访问

querySelector

的结果，而不是通过

name

-变量

我尝试了Chrome、Safari和Firefox，它们都没有返回颜色名称。不过这次总算把事情做好了

---

这是一个常见的错误或功能，还是网站有问题？

似乎variable

name

有些特别之处

var name = 3; name
// => "3"
var dame = 3; dame
// => 3

---

这种行为甚至可以通过一个空白标签（至少在Chrome中）来展示。如果将变量命名为其他名称，它将消失。我相信（！）原因是您正在控制台中执行，

name

总是指

window.name

；如果你在脚本中运行它，它就会消失；但我不能100%确定我的解释是否正确。

如果在全局范围内运行该代码，则变量

name

与

window.name

的变量冲突（这是一个字符串）；考虑创建一个范围：

(function() {
    var all = document.querySelectorAll(".color-group");

    for(var i=0; i<all.length; i++){
        var e = all[i];
        var name = e.querySelector('span.name');
        console.debug(name.innerHTML);
    }
}());

（函数（）{
var all=document.queryselectoral（“.color group”）；
对于（var i=0；i谢谢你.TIL，只有函数才有真正的作用域，只有IE允许你覆盖
name
的类型。
(function() {
    var all = document.querySelectorAll(".color-group");

    for(var i=0; i<all.length; i++){
        var e = all[i];
        var name = e.querySelector('span.name');
        console.debug(name.innerHTML);
    }
}());