querySelector 返回 String 而不是 DOM-Element

querySelector returns String instead of DOM-Element

本文关键字：DOM-Element 返回 String querySelector      更新时间：2023-09-26

我试图解析此页面上的颜色名称：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这次努力做到了。

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

如果在全局范围内运行该代码，则变量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);
    }
}());

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

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

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

即使空白标签页（至少在 Chrome 中）也会表现出这种行为。如果你把你的变量命名为别的东西，它就会消失。我相信（！）原因是您在控制台中执行，而name总是指的是window.name;如果您在脚本中运行它，它会消失;但我不是100%确定我的解释是正确的。

相关文章：