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

Question

我尝试解析这个页面上的颜色名称：http://www.google.com/design/spec/style/color.html#

使用以下代码：

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);
}

然而，打印的结果总是“undefined”。 然而，稍作修改后的代码可以正常工作：

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

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

唯一的区别是我直接访问querySelector的结果，而不是通过name变量访问。

我尝试在Chrome、Safari和Firefox中运行，它们都没有返回颜色名称。但是IE这次却做对了。

这是一个普遍的bug或特性问题，还是网站的问题？

- jaheba

Answer 1

如果在全局作用域中运行该代码，变量 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);
    }
}());

或者，您可以将该代码放入一个常规的命名函数中，并从全局范围调用该函数。

- Ja͢ck

---

谢谢。我今天学到只有函数有真正的作用域，只有IE允许你覆盖“name”的类型。 - jaheba

Answer 2

看来变量name有些特殊。

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

即使是一个空白的选项卡（至少在Chrome中），也会展示此行为。如果您将变量命名为其他名称，则此问题将消失。我认为(!)原因是您正在控制台中执行代码，而name始终指的是window.name; 如果您在脚本中运行它，它就会消失; 但我并不确定我的解释是否正确。

- Amadan