javascript - querySelector 有效，getElementById 无效

Question

我正在使用 Polymer 处理新的网络组件。在这个新组件中，我使用 javascript，在 xhr == 200 时动态创建节点和属性。创建所有元素后，我检索一些数据并进行分析。在此分析中，我希望获得具有特定 ID 的所有节点，如下所示:

var selection = document.querySelectorAll("#container > div");
for(var i = 0; i < selection.length; i++){
    var data1 = document.getElementById("span#vth" + selection[i].id);
    var data2 = document.querySelector("span#vta" + selection[i].id);
    console.log("data1 with id " + selection[i].id + ": " + data1);
    console.log("data2 with id " + selection[i].id + ": " + data2.innerHTML);
}

对于 document.getElementById 不起作用，它返回 null。 document.querySelector 确实有效。有人可以解释我为什么吗？提前致谢!

Answer 1

你的语法错误。

var data1 = document.getElementById("span#vth" + selection[i].id);

应该是

var data1 = document.getElementById('vth'+selection[i].id);

ID 只能使用一次，因此不需要元素特异性，并且您不包含哈希 #，因为它不是 ID 名称的一部分。

document.querySelector() 和 document.querySelectorAll() 的功能类似于 jQuery 选择器引擎，但是 getElementById() 和 getElementByClassName() 只接受字符串表示，不需要 . 或 # 作为序言。