javascript - 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 这次成功了。

这是一般错误或功能，还是网站的问题？

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

或者，只需在常规命名函数中运行该代码，然后从全局范围调用它。