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

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

Answer 2

变量name似乎有一些特别之处。

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

即使是空白标签（至少在Chrome中）也会显示此行为。如果你将变量命名为别的东西，它就会消失。我相信（！）原因是你在控制台中执行，name总是引用window.name;如果你在脚本中运行它就会消失;但我并非100％确定我的解释是正确的。

querySelector返回String而不是DOM-Element

2 个答案: