Detaillierte Einführung in den nativen und leistungsstarken DOM-Selektor querySelector (Code im Anhang)

Dieser Artikel stellt hauptsächlich einige relevante Kenntnisse über den nativen, leistungsstarken DOM-Selektor querySelector vor.

In der traditionellen JavaScript-Entwicklung ist das Finden des DOM oft das erste, worauf Entwickler stoßen Es gibt nicht viele DOM-Auswahlmethoden, die von nativem JavaScript bereitgestellt werden. Sie beschränken sich nur auf die Suche nach Tag, Name, ID usw. Wenn Sie eine genauere Auswahl treffen möchten, müssen Sie dies nicht tun. Verwenden Sie keine regulären Ausdrücke, die sehr umständlich aussehen, oder verwenden Sie eine Bibliothek. Tatsächlich bieten alle Browser-Hersteller Unterstützung für die Methoden querySelector und querySelectorAll. Sogar Microsoft hat IE 8 als Unterstützung für diese Funktion bereitgestellt. Dies erleichtert Entwicklern die Suche erheblich. Sie können den benötigten Knoten genauso schnell finden wie mit CSS-Selektoren.

Die Verwendung von querySelector und querySelectorAll ist sehr einfach. Wie der Titel sagt, ist es genau das gleiche wie CSS. Für Frontend-Entwickler ist dies eine Lernerfahrung mit nahezu null Schwierigkeiten. Wenn wir ein p mit der ID test haben, können Sie zum Abrufen dieses Elements etwa Folgendes tun:

document.getElementById("test");
Jetzt lasst uns Versuchen Sie es mit einer neuen Methode, um dieses p zu erhalten:

document.querySelector("#test");
document.querySelectorAll("#test")[0];

Das Folgende ist eine kleine Demonstration:

Ich bin der p, dessen ID test ist

Es fühlt sich an, als gäbe es eine Kein großer Unterschied, aber in einer etwas komplizierteren Situation wird die ursprüngliche Methode sehr problematisch. Zu diesem Zeitpunkt kommen die Vorteile von querySelector und querySelectorAll zum Tragen. Im folgenden Beispiel werden wir beispielsweise das erste untergeordnete Element p des Unterelements p von p mit Klassentest im Dokument auswählen. Dies ist natürlich ein Bissen, aber wir verwenden die neue Methode in diesem Artikel, um dies auszuwählen Element ist besser, als es in Worten zu beschreiben.

document.querySelector("p.test>p:first-child");
document.querySelectorAll("p.test>p:first-child")[0];

Das Folgende ist eine kleine Demonstration:

Ich bin das p-Tag in der Ebene

Jetzt sollten Sie ein sehr klares Verständnis der Parameter in querySelector und querySelectorAll haben Methoden Ja, die empfangenen Parameter sind genau die gleichen wie bei CSS-Selektoren. Der Unterschied zwischen querySelector und querySelectorAll besteht darin, dass querySelector zum Abrufen eines Elements verwendet wird, während querySelectorAll mehrere Elemente abrufen kann. querySelector gibt das erste übereinstimmende Element zurück oder Null, wenn kein übereinstimmendes Element vorhanden ist. querySelectorAll gibt ein Array zurück, das übereinstimmende Elemente enthält. Wenn keine übereinstimmenden Elemente vorhanden sind, ist das zurückgegebene Array leer. Im letzten Beispiel dieses Artikels verwenden wir querySelectorAll, um alle Elemente mit Klassenbetonung fett darzustellen.

var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
  emphasisText[i].style.fontWeight = "bold";
}

Dies ist eine native Methode, die schneller als jquery ist. Der Nachteil ist, dass IE6 und 7 sie nicht unterstützen.

W3C-Spezifikation und -Implementierung in der Bibliothek

querySelector: Gibt den ersten passenden Elementknoten innerhalb der Teilbäume des Knotens zurück, muss die Methode null zurückgeben (das angegebene Element zurückgeben). Der erste im Satz übereinstimmender Selektoren im Teilbaum des Knotens. Wenn es keine Übereinstimmung gibt, wird null zurückgegeben)

querySelectorAll: Gibt eine NodeList zurück, die alle übereinstimmenden Elementknoten innerhalb der Teilbäume des Knotens in Dokumentreihenfolge enthält Wenn keine solchen Knoten vorhanden sind, muss die Methode eine leere NodeList zurückgeben leerer Satz)

Es gibt kein Problem, wenn BaseElement ein Dokument ist und die Implementierung jedes Browsers grundsätzlich gleich ist, wenn BaseElement jedoch ein gewöhnlicher Dom-Knoten ist (Dom-Knoten, der diese beiden Methoden unterstützt). Die Implementierung des Browsers ist etwas seltsam. Zum Beispiel:

<p class= "test"  id= "testId" > 
   <p><span>Test</span></p> 
</p> 
<script type= "text/javascript" >   
   var  testElement= document.getElementById( &#39;testId&#39; ); 
   var  element = testElement.querySelector( &#39;.test span&#39; ); 
   var  elementList = document.querySelectorAll( &#39;.test span&#39; ); 
   console.log(element); // <span>Test</span>
   console.log(elementList); // 1  
</script>

Laut W3C sollte dieses Beispiel Folgendes zurückgeben: element: null; elementList: [], da es keine Übereinstimmung im testElement als baseElement gibt, das mit den Selektoren übereinstimmt . node; aber der Browser ignoriert baseElement und kümmert sich nur um Selektoren, was bedeutet, dass baseElement zu diesem Zeitpunkt nicht mit unseren erwarteten Ergebnissen übereinstimmt.

Die menschliche Weisheit ist immer grenzenlos. Andrew Dupont hat eine Methode erfunden, um dieses seltsame Problem vorübergehend zu beheben. Diese Methode besteht darin, die BaseElement-ID vor Selektoren anzugeben, um den Übereinstimmungsbereich einzuschränken Pandemie-Framework;

Implementierung von Jquery:

var  oldContext = context,
old = context.getAttribute( "id"  ),
nid = old || id,

rreee

Schauen wir uns nicht andere Stellen in diesem Code an, sondern schauen wir uns an, wie er diese Methode implementiert; dieser Code stammt aus dem JQuery1.6-Fragment; hat keine ID, legen Sie eine id = "__sizzle__" fest und fügen Sie sie dann vor Selektoren hinzu, wenn Sie sie verwenden, um den Bereich einzuschränken; context.querySelectorAll( "[id='" + nid + "' ] " + query; Da diese ID selbst nicht das ist, was baseElement haben sollte, muss sie schließlich entfernt werden: oldContext.removeAttribute( "id" );, Mootools-Implementierung:

var  currentId = _context.getAttribute( 'id' ), slickid = 'slickid__' ;
_context.setAttribute( 'id' , slickid);
_expression = '#'  + slickid + ' '  + _expression;
context = _context.parentNode;

Mootools和Jquery类似：只不过slickid = 'slickid__'；其实意义是一样的；方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;IE 8 ：不支持baseElement为object；

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Node.Js实现端口重用步骤详解

js继承中的方法重写重点讲解

js方法的重写和重载的技巧详解

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den nativen und leistungsstarken DOM-Selektor querySelector (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!