CSS selector getElementsByClassName () method for HTML5 practice and Analysis

The querySelector () method and querySelectorAll () method in HTML5 are described in the previous articles. I don't know how you understand them? The querySelector () method returns the first element that matches the passed CSS selector; querySelectorAll () the method returns all elements that match the passed CSS identifier and is a NodeList object. After a brief review, I will share with you the getElementsByClassName method, a new method.

As HTML4 has gained a lot of applications in the Web development field, there have been many changes in HTML4. Because the class name is widely used in CSS, in many cases, the class name is not the ID but the class name to be obtained when writing JavaScript code. Then, HTML5 adds the getElementsByClassName () method. The getElementsByClassName () method can be called through the document Object and all HTML elements. The method for getting the class name of an element first appeared in many JavaScript libraries. They are implemented through the DOM function and consume a lot of performance. With this native getElementsByClassName () method, it saves a lot of performance.

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

 

 

1. Get all classes named box with a red background

 

HTML code

Menglong xiaozhan div

Menglong xiaozhan div Menglong xiaozhan IMenglong xiaozhan div Menglong xiaozhan em

Menglong xiaozhan em Menglong xiaozhan em

 

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 whose ID is box2 and whose surface class is "box", and add a red background.

 

HTML code

Menglong xiaozhan div

Menglong xiaozhan div Menglong xiaozhan IMenglong xiaozhan div Menglong xiaozhan em

Menglong xiaozhan em Menglong xiaozhan em

 

JavaScript code

 

// Obtain the element whose class name Is oi and op, and add the red background 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, NodeList is returned only when the matching element can be found. When you call the getElementsByClassName () method on a document object, all elements that match the class name are always returned. When you call the getElementsByClassName () method on an element, only the matching elements in the child element are returned.

This method makes it easier to add event handlers to elements with certain class names, so that you do not have to restrict the use of IDs or tags to add event handlers. Because the returned object is NodeList, using this method has the same performance problems as using the getElementsByTagName () method and other DOM methods that return NodeList. Must be added using a for loop. Therefore, Menglong believes that using methods in the JavaScript library to obtain elements has its own advantages and disadvantages, and using the getElementsByClassName () method to obtain elements.

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

The CSS selector -- getElementsByClassName () method for HTML5 practice and analysis is all described. To sum up, the getElementsByClassName () method obtains the element class name using the JavaScript native method. The getElementsByClassName () method is a newly added method in HTML5. Thank you for your support.