Question

我有以下内容：

<div id="first">
  <div id="second">
    <button id="third"></button>
  </div>
</div>

ID为first的DIV永远不会更改其ID，但second和third可能会更改。

如果它从未改变，我会使用以下内容来定位third：

submission = document.getElementById("third");

但是，使用first，我现在如何访问它？我已尝试过以下方法，但得到的结果与上述结果不同（这就是我需要的）

submission = document.querySelectorAll("div#first div button");

这似乎有效，但看起来并不干净：

document.getElementById("first").children[0].children[0];

Answer 1

如果你想获得querySelector()元素而不是button，那么你应该使用querySelectorAll()来返回一组适合选择器的元素：

submission = document.querySelector("div#first div button");

希望这有帮助。

console.log( document.getElementById("third") );
console.log( document.querySelector("div#first div button") );

<div id="first">
  <div id="second">
    <button id="third"></button>
  </div>
</div>

Answer 2

var btn = document.querySelectorAll('#first> div> button');
var btn1 = document.querySelector('#first> div> button');

console.dir(btn)
console.dir(btn1)

<div id="first">
    <div id="second">
      <button id="third"></button>
    </div>
</div>

如果您执行document.querySelectorAll，则会返回Array的{{1}}，如果您执行NodeLists，则会返回特定元素

document.querySelector

获取具有特定ID的元素的孙子

2 个答案: