私は次のように持っている固有のID

Question

を持つ要素の孫を取得します。

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

DIV firstのIDとすることは、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()あなたがセレクタに合う要素のセットを返します代わりにquerySelectorAll()のbutton要素を取得したい場合：

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これはNodeListsのArrayが返されないと、あなたがdocument.querySelectorを行う場合、それは特定の要素

が返されます