HTML5 actual combat and analysis of CSS selectors - getElementsByClassName() method

The querySelector() method and querySelectorAll() method in HTML5 have been introduced to you in the previous articles. I wonder how well you understand it? Let’s review here. The querySelector() method is return and transfer. The first element that matches the CSS selector; the querySelectorAll() method returns all elements that match the passed CSS selector, which is a NodeList object. After a brief review, let me share a new method-getElementsByClassName() method.

As HTML4 has been widely used in the field of web development, it has led to many changes in HTML4. Since class names are widely used in CSS, in many cases what you need to obtain when writing JavaScript code is not the ID but the class name. Ever since, HTML5 has added the getElementsByClassName() method. The getElementsByClassName() method can be called through the document object and all HTML elements. The method of obtaining the class name of an element first appeared in many JavaScript libraries. They are all implemented through the DOM function, which consumes a lot of money in terms of performance. With this native getElementsByClassName() method, a lot of performance is saved.

The getElementsByClassName() method receives a parameter, which is also a string of CSS selectors, which can be one or multiple. The getElementsByClassName() method returns a NodeList with all elements of the specified class. Note that when multiple class names are passed in, the order of the class names is not important. The theoretical basis will be introduced here first. Let’s take a look at a small example.

1. Get all the class name boxes and add a red background

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";
}

Preview effect

2. Get the element with the class name box in the element with the ID name box2, and add a red background

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";
}

Preview effect

When this method is called, the NodeList will be returned only if a matching element can be found. Calling the getElementsByClassName() method on a document object always returns all elements that match the class name. Calling the getElementsByClassName() method on an element will only return matching elements among descendant elements.

Use this method to more conveniently add event handlers to elements with certain class names, so you no longer have to be limited to adding event handlers using IDs or tags. Because the returned object is a NodeList, using this method has the same performance issues as using the getElementsByTagName() method and other DOM methods that return a NodeList. All must be added using a for loop. Therefore, Menglong believes that there are pros and cons to using methods in the JavaScript library to obtain elements, and using the getElementsByClassName() method to obtain elements.

The getElementsByClassName() method supports some modern browsers such as IE9+, Firefox3+, Safari3.1+, Chrome and Opera9.5+.

This concludes the introduction to HTML5 actual combat and analysis of the CSS selector-getElementsByClassName() method. To summarize, the getElementsByClassName() method uses JavaScript native methods to obtain the element class name. The getElementsByClassName() method is a newly added method in HTML5. For related content about HTML5, please pay attention to the relevant updates of HTML5 on Menglong Station. thanks for your support.

The above is the content of the HTML5 actual combat and analysis of the CSS selector-getElementsByClassName() method. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!