与特定的ID

Question

获取元素的孙子我有以下几点：

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

与first ID的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那么这将返回NodeListsArray如果你这样做document.querySelector那么它将返回特定元素

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

console.dir(btn) 
console.dir(btn1)