"main"要素内のすべての "sub"要素を選択する方法

Question

<div class="main"> 
    <p>I don't want this</p> 
    <div class="sub">I want this</div> 
</div> 

<div class="main"> 
    <p>I don't want this</p> 
    <div class="sub">I want this</div> 
</div> 

"main"要素内のすべての "sub"要素を選択する方法は誰でも知っています。 私は試しました document.getElementsByClassName("main").getElementsByClassName("sub")
しかし、それは動作しません。明確にするために、私はすべての "サブ"要素を "メイン"クラスの中に入れたいが、どうやってそれをどうやって理解することはできない。すべてのヘルプは

Answer 1

は単にdocument.querySelectorAll()とCSSセレクタを使用いただければ幸いです。あなたの投稿をHTMLに.main要素内部.sub要素を配置しないただし

var subs = document.querySelectorAll('.main .sub'); 

を。彼らは兄弟です。場合：

var subs = document.querySelectorAll('.main + .sub'); 

または：

var subs = document.querySelectorAll('.sub'); 

Answer 2

は現在、あなたの例では、あなたのHTMLには子クラスを持っていません。あなたのHTMLは、代わりに次のようになります。

<div class="main">I don't want this 
    <div class="sub">I want this</div> 
</div> 

Answer 3

あなたのコードは動作しません、あなたは内の各項目を反復処理する必要があると思いますので、document.getElementsByClassName("main")の結果は、HTMLCollection（要素のリストのようなもの）であるため、このリストを開き、それぞれの要素に.getElementsByClassName("sub")を呼び出し、すべての結果リストを連結します。

しかし、もっと簡単な方法があります。あなたのサンプルコードで.sub要素のどれもが.mainの中にネストされていない。また

var elements = document.querySelectorAll('.main .sub'); 

を使用できるように、今日のブラウザでは、document.querySelectorAllをサポートしています。したがって、上記の結果はとにかく空になります。

Answer 4

document.getElementsByClassName("sub")は、例では.sub要素を選択するのに十分です。