JavaScript-Selektorfunktionen querySelector und querySelectorAll

Selektoren sind eine sehr leistungsstarke Funktion von Css . Bisher wurden Seitenelemente im Allgemeinen über getElementById und getElementsByTagName abgerufen, was in einigen Szenarien sehr unpraktisch war.

Später erweiterte DOM den Selector API Standard, wobei Selector API Level 1 zwei Methoden umfasste: querySelector und querySelectorAll , die Seitenelemente über CSS-Selektoren abgleichen können.

1. querySelector fragt ein einzelnes Element ab

querySelector wird verwendet, um das erste Element auf der Seite abzufragen, das den Regeln entspricht. Es kann für Document und Element aufgerufen werden und erhält einen Selektor-String-Parameter. Wenn es gefunden wird, gibt es ein HTMLElement Objekt zurück, andernfalls gibt es null zurück.

Das Syntaxformat ist wie folgt:

Dokumentinstanz.querySelector (Selektorzeichenfolge);

Elementinstanz.querySelector (Selektorzeichenfolge);

1. Dokumentinstanzaufruf

Document Instanz dient dazu, die passenden Elemente der gesamten Seite abzurufen.

Ein einfaches Beispiel sieht wie folgt aus:

// Holen Sie das Body-Element let body = document.querySelector("body");

console.log(Text)

// Holen Sie das Element mit der ID „Container“, nur das erste wird abgerufen. let container = document.querySelector("#container");

konsole.log(Container)

// Holen Sie das Element, das btn in der Klasse enthält. Nur das erste wird abgerufen. let btn = document.querySelector(".btn");

konsole.log(btn);



// Holen Sie das Element, das btn enthält, in der direkten Unterklasse des Containers. Nur das erste wird abgerufen. let containerBtn = document.querySelector("#container>.btn");

console.log(containerBtn);

2. Aufruf einer Elementinstanz

Element Aufruf der Elementinstanz dient dazu, die passenden Elemente im Teilbaum des Elements abzurufen.

Einfaches Beispiel:

// Holen Sie sich das Element mit der ID „Container“. let container = document.querySelector("#container");

// Es muss geprüft werden, ob das Elementobjekt existiert. Nur wenn es existiert, gibt es eine querySelector-Methode if (container) {

	// Finde nur Elemente im Container, deren Klasse btn enthält.

	let containerBtn = container.querySelector(".btn");

	console.log(containerBtn);

}

Da CSS über den Selektor jedes Element auf der Seite abrufen kann, kann Element Aufruf der Elementinstanz theoretisch direkt als Aufrufmethode Document geschrieben werden, und Sie müssen nur den Zeichenfolgenparameter des Selektors ändern.

Beispielsweise kann das obige Beispiel direkt wie folgt geschrieben werden:

let containerBtn = document.querySelector("#container .btn");

Und da es ein if-Urteil weniger gibt, ist der Code prägnanter. Natürlich wurde in einigen Geschäftsszenarien die ELement bereits bestimmt, sodass es bequemer ist, sie direkt mithilfe ELement Elementinstanz aufzurufen.

2. querySelectorAll fragt alle Elemente ab

Die Methode querySelectorAll ähnelt querySelector , gibt jedoch alle übereinstimmenden Elemente in NodeList zurück.

Einfaches Beispiel:

// Angenommen, die Seite hat zwei Div-Klassen, die Artikel enthalten

// Alle Elemente abrufen, deren Klasse den Artikel enthält. let articleList = document.querySelectorAll(".article");

console.log(Artikelliste);

console.log(Artikelliste.Länge);

// Konsolenausgabe:

// Knotenliste(2) [div.Artikel, div.Artikel]

// 2

Die Methode querySelectorAll gibt alle Elemente zurück. In der Praxis ist eine Durchquerung häufig erforderlich. Die Durchquerung kann mit der herkömmlichen for -Durchquerung, for of Durchquerung und forEach -Durchquerung durchgeführt werden.

// für die Durchquerung für (let item of articleList) {

	konsole.log(Element);

}

// für die Durchquerung for (let i = 0; i < articleList.length; i++) {

	console.log(Artikelliste[i]);

	console.log(Artikelliste.Element(i));

}

// forEach durchläuft articleList.forEach((item, index) => {

	Konsole.log(Element, Index);

});

1. Probleme mit for bei der Durchquerung

Wenn „for or in durchquert wird, werden auch einige Methoden in der Prototypkette durchlaufen, z. B. entries , „ forEach “ usw.

2. Das Problem von Schnappschüssen statt Echtzeit

Die mit querySelectorAll abgerufene NodeList ist eine Momentaufnahme und keine Echtzeitdaten.

Betrachten Sie das folgende Beispiel:

//Verwenden Sie querySelectorAll zum Abrufen. ArticleList ist statisch und nicht in Echtzeit. let articleList = document.querySelectorAll(".article");

console.log(Artikelliste);

console.log(Artikelliste.Länge); // 2

setzeTimeout(() => {

	// Ein Element hinzufügen let div = document.createElement("div");

	div.className = "Artikel";

	Dokument.body.appendChild(div);	

	console.log(Artikelliste);

	// Noch 2

	console.log(Artikelliste.Länge);

}, 0);

Schließlich wird ein Timer eingestellt und ein div Element mit class article in die Seite eingefügt, aber die Länge der articleList beträgt immer noch 2.

Wenn getElementsByClassName zum Abrufen verwendet wird, handelt es sich bei articleList um Echtzeitdaten.

Betrachten Sie das folgende Beispiel:

//Verwenden Sie getElementsByClassName zum Abrufen. ArticleList ist in Echtzeit. Let articleList = document.getElementsByClassName("article");

console.log(Artikelliste);

console.log(Artikelliste.Länge);



setzeTimeout(() => {

	// Ein Element hinzufügen let div = document.createElement("div");

	div.className = "Artikel";

	Dokument.body.appendChild(div);

	

	console.log(Artikelliste);

	// Hier ist 3

	console.log(Artikelliste.Länge);

}, 0);

Zeigen Sie die Druckergebnisse in der Konsole an:

Dynamische Effekte der HTMLCollection:

Das durch die Verwendung von getElementsByClassName erhaltene Objekt ist vom Typ HTMLCollection und ändert sich mit dem Dokumentfluss.

3. Zusammenfassung

• 1. querySelector und querySelectorAll erhalten Seitenelemente gemäß CSS-Selektoren, was sehr leistungsstark ist.
• 2. Die querySelectorAll erhaltenen Elemente sind Schnappschüsse, statisch, nicht in Echtzeit. Achten Sie auf Fallstricke.

Dies ist das Ende dieses Artikels über JavaScript -Selektorfunktionen querySelector und querySelectorAll Weitere Informationen zu querySelector und querySelectorAll in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!