两个相似的 javascript 选择器有什么区别

Question

这两个选择器有什么区别：

function myFunction() {
    var x = document.querySelectorAll("#srow .cell");
  console.log(x[1]);
}
myFunction();

和

function myFunction() {
    var x = document.getElementById("srow").querySelectorAll(".cell");
  console.log(x[1]);
}
myFunction();

都是return第二个元素

Answer 1

它们相似但执行不同的操作。

• 第一种情况 returns 所有具有 class .cell 的元素至少有一个具有 id srow.
的父元素
• 第二种情况获取所有id为srow的元素中的一个然后returns所有id为class的子元素.cell .

这里有一个例子来展示它们的区别：https://jsfiddle.net/1m3k3gzL/

虽然 HTML5 明确禁止重复 ids，但典型的浏览器通常允许这种事情发生。