querySelectorAll liefert unerwartetes Ergebnis

F

framework_developer

Neues Mitglied
Ich habe hier folgenden DOM-Ausschnitt:

HTML: 
    <div class="cloned">
        <div class="cloned">
            
            <span>P1</span>
            
            <div id="foo">
                <ul>
                    <li class="cloned"><span>P1_1</span></li>
                
                    <li class="cloned"><span>P1_2</span></li>
                </ul>
            </div>
        </div>
    </div>

Und jetzt wollte ich mir ausgehend von #foo alle Elemente mit .cloned sowie deren Kinder rekursiv holen. (d.h. die beiden li-Nodes sowie deren span)

Da habe ich das verwendet:
Javascript: 
document.getElementById('foo').querySelectorAll('.cloned *');

Bloß entgegen meiner Erwartung wird mir auch das ul-Node mitgeliefert. Warum? Ich habe doch explizit gesagt, ausgehend von #foo bitte alle .cloned und deren Kinder. Ich hatte herausgefunden, dass wenn die Parents von #foo kein .cloned in der Class-List haben, dann bekomme ich ein erwartungsgemäßes Resultat. Aber das kann es doch nicht sein.
 
Der CSS Selektor wird von rechts nach links evaluiert.

Das heißt dein Selektor .cloned * sagt aus, dass jedes Element (*) das unter .cloned ist, zurückgegeben werden soll.
Und da du schon auf oberster ebene Elemente mit der Klasse .cloned definiert hast trifft es entsprechend auf alle Elemente unter #foo zu:
  • ul
  • li
  • span
  • li
  • span

Wenn du die direkten Unterelement haben möchtest dann verwende den Child-Selektor: .cloned > *
Gibt dann zurück:
  • span
  • span

Alternativ kannst du auch alle Element deren Eltern einer .cloned Klasse genügen, welche irgendwo unter der Id #foo liegen selektieren:
document.querySelectorAll('#foo .cloned *')
Würde in diesem Fall auch die zwei span's zurückgeben.
 
Zurück
Oben Unten