Das Lemma »ParentNode#querySelector«
- Beispieldokument für diese Lektion
userpage.fu-berlin.de/~ram/pub/xhtml_jf47ht81Ht/main
- Auswertung
this.document.querySelector( "#erste" ).nodeName
"UL"
Das Lemma »#querySelector« (Elemente via Selektor, also via CSS-Selektor) wird durch die Sprache »ParentNode#« beschrieben.
- Inklusionsdiagramm zu »#querySelector«
ParentSelector > querySelector
Für das obige Beispiel ist die folgende Herleitung relevant.
- Inklusionsdiagramm zu »Ⓖ.document.querySelector«
Ⓖ.document > Document > ParentNode > querySelector
#querySelector- Ergibt das erste Element, welches sich irgendwo unterhalb des Kontexts befindet, und auf welches der als string-Argument angegebene Selektor zutrifft
Man kann diese Funktion also nicht nur mit einem Dokument als Kontext aufrufen, sondern mit jedem anderen Dokumentteil, welcher die Sprache »ParentNode« spricht.
- Die Verbreitung von »ParentNode#«
Dokument > ParentNode
DokumentFragment > ParentNode
Element > ParentNode
- Quelle
www.w3.org/TR/2015/REC-dom-20151119/
Einige weitere Beispiele
- Auswertung
this.document.querySelector( "li" ).outerHTML
"<li class="m a">Anton</li>"
- Auswertung
this.document.querySelector( ".w" ).outerHTML
"<li class="w b">Berta</li>"
- Auswertung
this.document.querySelector( "*" ).nodeName
"HTML"
- Auswertung
this.document.querySelector( "body .d" ).outerHTML
"<li class="d e w">Dora</li>"
- Auswertung
this.document.querySelector( "ul > .d" ).outerHTML
"<li class="d e w">Dora</li>"
- Auswertung
this.document.querySelector( ".c ~ li" ).outerHTML
"<li class="d e w">Dora</li>"
- Auswertung
this.document.querySelector( "li[class]" ).outerHTML
"<li class="m a">Anton</li>"
- Auswertung
this.document.querySelector( 'li[class="w b"]' ).outerHTML
"<li class="w b">Berta</li>"
- Auswertung
this.document.querySelector( 'li[class*=" "]' ).outerHTML
"<li class="m a">Anton</li>"
- Auswertung
this.document.querySelector( 'li[class^="w "]' ).outerHTML
"<li class="w b">Berta</li>"
- Auswertung
this.document.querySelector( '[class$=" w"]' ).outerHTML
"<li class="d e w">Dora</li>"
- Auswertung
this.document.querySelector( '[class~="c"]' ).outerHTML
"<li class="c m">Cäsar</li>"
- Auswertung
this.document.querySelector( ':not(html)' ).nodeName
"head"
- Auswertung
this.document.querySelector( ':nth-child(1)' ).nodeName
"head"