Tatsächlicher HTML5-Kampf und Analyse von CSS-Selektoren – Methode getElementsByClassName()

Die querySelector()-Methode in HTML5 wurde Ihnen in den vorherigen Artikeln vorgestellt. Ich frage mich, wie gut Sie sie verstehen. Die querySelector()-Methode ist das erste Element das mit dem CSS-Selektor übereinstimmt; die Methode querySelectorAll() gibt alle Elemente zurück, die mit dem übergebenen CSS-Selektor übereinstimmen, der ein NodeList-Objekt ist. Lassen Sie mich nach einer kurzen Überprüfung eine neue Methode „getElementsByClassName()“ vorstellen.

Da HTML4 im Bereich der Webentwicklung weit verbreitet ist, hat dies zu vielen Änderungen in HTML4 geführt. Da Klassennamen in CSS weit verbreitet sind, benötigen Sie beim Schreiben von JavaScript-Code in vielen Fällen nicht die ID, sondern den Klassennamen. Seitdem hat HTML5 die Methode getElementsByClassName() hinzugefügt. Die Methode getElementsByClassName() kann über das Dokumentobjekt und alle HTML-Elemente aufgerufen werden. Die Methode zum Abrufen des Klassennamens eines Elements erschien erstmals in vielen JavaScript-Bibliotheken. Sie werden alle über die DOM-Funktion implementiert, was in Bezug auf die Leistung viel Geld kostet. Mit dieser nativen getElementsByClassName()-Methode wird viel Leistung gespart.

Die Methode getElementsByClassName() empfängt einen Parameter, der auch eine Zeichenfolge von CSS-Selektoren ist, die einer oder mehrere sein können. Die Methode getElementsByClassName() gibt eine NodeList mit allen Elementen der angegebenen Klasse zurück. Beachten Sie, dass bei der Übergabe mehrerer Klassennamen die Reihenfolge der Klassennamen keine Rolle spielt. Hier werden zunächst die theoretischen Grundlagen vorgestellt.

1. Holen Sie sich alle Klassennamensfelder und fügen Sie einen roten Hintergrund hinzu

HTML-Code

<p id="box1" class="box">梦龙小站p</p>
<p>梦龙小站p</p>
<section id="box2">
	<i id="oi123123" class="oi">梦龙小站i</i>
	<p class="box">梦龙小站p</p>
</section>
<section id="box3" class="box3">
	<em class="op">梦龙小站em</em>
</section>
<p>
	<em class="box">梦龙小站em</em>
	<em id="op123123" class="op">梦龙小站em</em>
</p>

JavaScript-Code

var allBox = document.getElementsByClassName("box"),
	i, len;

alert(allBox[0].id) //[object NodeList]

for(i=0, l = allBox.length; i < l; i++){
	allBox[i].style.background = "red";
}

Vorschaueffekt

2. Holen Sie sich das Element mit dem Klassennamensfeld im Element mit dem ID-Namensfeld2 , und Fügen Sie einen roten Hintergrund hinzu

HTML-Code

<p id="box1" class="box">梦龙小站p</p>
<p>梦龙小站p</p>
<section id="box2">
	<i id="oi123123" class="oi">梦龙小站i</i>
	<p class="box">梦龙小站p</p>
</section>
<section id="box3" class="box3">
	<em class="op">梦龙小站em</em>
</section>
<p>
	<em class="box">梦龙小站em</em>
	<em id="op123123" class="op">梦龙小站em</em>
</p>

JavaScript-Code

//获取类名是oi和op的元素，并加上红色背景
var allBox = document.getElementById("box2").getElementsByClassName("box"),	i, len;

alert(allBox[0].id) //[object NodeList]


for(i=0, l = allBox.length; i < l; i++){	allBox[i].style.background = "red";
}

Vorschaueffekt

Beim Aufrufen dieser Methode, solange Es kann eine Übereinstimmung gefunden werden. Es werden nur die Elemente von NodeList zurückgegeben. Der Aufruf der Methode getElementsByClassName() für ein Dokumentobjekt gibt immer alle Elemente zurück, die mit dem Klassennamen übereinstimmen. Wenn Sie die Methode getElementsByClassName() für ein Element aufrufen, werden nur übereinstimmende Elemente unter den Nachkommenelementen zurückgegeben.

Verwenden Sie diese Methode, um Ereignishandler einfacher zu Elementen mit bestimmten Klassennamen hinzuzufügen, sodass Sie nicht mehr auf das Hinzufügen von Ereignishandlern mithilfe von IDs oder Tags beschränkt sein müssen. Da es sich bei dem zurückgegebenen Objekt um eine NodeList handelt, treten bei der Verwendung dieser Methode dieselben Leistungsprobleme auf wie bei der Verwendung der Methode getElementsByTagName() und anderer DOM-Methoden, die NodeList zurückgeben. Alle müssen mithilfe einer for-Schleife hinzugefügt werden. Daher ist Menglong der Ansicht, dass die Verwendung von Methoden in der JavaScript-Bibliothek zum Abrufen von Elementen und die Verwendung der Methode getElementsByClassName() zum Abrufen von Elementen Vor- und Nachteile haben.

Die Methode getElementsByClassName() unterstützt einige moderne Browser wie IE9+, Firefox3+, Safari3.1+, Chrome und Opera9.5+.

Damit ist die Einführung in den eigentlichen HTML5-Kampf und die Analyse der CSS-Methode selector-getElementsByClassName() abgeschlossen. Zusammenfassend lässt sich sagen, dass die Methode getElementsByClassName() native JavaScript-Methoden verwendet, um den Namen der Elementklasse abzurufen. Die Methode getElementsByClassName() ist eine neu hinzugefügte Methode in HTML5. Für verwandte Inhalte zu HTML5 beachten Sie bitte die entsprechenden Aktualisierungen von HTML5 auf Menglong Station. Vielen Dank an alle für Ihre Unterstützung.

Das Obige ist der Inhalt der CSS-Methode selector-getElementsByClassName() im tatsächlichen Kampf und in der Analyse von HTML5. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!