Element.querySelectorクエリHTML要素の子要素のときの奇妙な動作

Question

子要素を検索するのにquerySelectorAllを使用すると、私は奇妙な動作に遭遇します。

我々は、次のHTML要素の木があります：最初のDIVを撮るとき

<div class="channels-featured-section"> 
 
\t <div class="yui3-video-coverage-item "> 
 
\t \t <span class="now-playing">NOW<br>PLAYING</span> 
 
\t \t <a href="#" class="yui3-video-coverage-item-trigger"> 
 
\t \t \t <div> 
 
\t \t \t </div> 
 
\t \t \t <p></p> 
 
\t \t \t <div class="yui3-video-coverage-item "> 
 
\t \t \t \t <span class="now-playing">NOW<br>PLAYING</span> 
 
\t \t \t \t <a href="#" class="yui3-video-coverage-item-trigger"> 
 
\t \t \t \t \t <div></div> 
 
\t \t \t \t \t <p>?</p> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </a> 
 
\t </div> 
 
</div>

をし、あなただけの内部最もDIV <div class="yui3-video-coverage-item-img-wrap"></div>を取得すると仮定し、実際それはあなたのすべてを与えてelement.queryAelectorAll("div div div div")作りますその小さな木の中のDIV要素。

同じ要素に対して次のようにクエリを実行します。element.queryAelectorAll("div div div div div div div div div div")同じ結果が得られます。

現在、DOM要素の階層はあまり多くありません。

それはとても奇妙で、私は何時間もそれについて戸惑いました。 DOMのdocumentレベルから

Element.prototype.querySelectorAllクエリと現在の内部ではありませんすべての結果をフィルタリング：

Answer 1

は、私と私の同僚はそれについて壁に私たちの頭を打った後、我々は速い次を発見しました我々が照会している要素。

意味は、DOM docuemnt.querySelectorAllを照会し、照会するルート要素に含まれていないすべての要素をフィルタリングしたようなものです。

私たちがその問題を抱えていた理由は、問い合わせたDOMがREACTであり、非常に多くの要素があり、私たちがハングアップするクラスがないからです。

that articleは非常に詳細に説明しています。だから将来のためのルールを知っていることを確認してください。