Element.querySelectorAll seltsames Verhalten bei der Abfrage von HTML-Element Kinder

Question

Ich begegne einem seltsamen Verhalten bei der Verwendung querySelectorAll, um Kinder für ein Element zu suchen.

wir die folgende HTML-Elemente Baum haben:

<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>

wenn die erste DIV nehmen und machen element.queryAelectorAll("div div div div") Sie nur die interne meisten DIV <div class="yui3-video-coverage-item-img-wrap"></div>, bekommen nehme aber geben es Ihnen eigentlich alle die DIV-Elemente in diesem kleinen Baum.

jetzt die Abfrage auf das gleiche Element auf die folgende Weise: element.queryAelectorAll("div div div div div div div div div div") mit dem gleichen Ergebnis.

Jetzt haben wir nicht so viele Hierarchien von DOM-Elementen.

es ist so komisch und ich habe es stundenlang verwirrt.

Answer 1

Nachdem mich und meine Mitarbeiter an der Wand über sie unseren Kopf schlagen, fanden wir schnell folgendes heraus:

Element.prototype.querySelectorAll Abfrage aus der document Ebene von DOM und alle Ergebnisse filtern, die NICHT innerhalb Strom Element, das wir abfragen.

Das bedeutet, das Ergebnis ist genau wie Sie das DOM docuemnt.querySelectorAll abfragen und nur alle Elemente gefiltert, die nicht in dem Wurzelelement enthalten sind, von dem Sie abfragen.

Der Grund, warum wir dieses Problem hatten, ist, dass das DOM, das wir abgefragt haben, REAKT ist und wir so viele div Elemente und keine Klasse hatten, in die wir uns einleben konnten.

Wir fanden that article, die es in großen Details erklärt. Also stell bitte sicher, dass du diese Regel für die Zukunft kennst.