When developing a web page, in many cases we need to operate elements with the same class name, that is, elements with the same class. I took the written test yesterday and I didn’t answer a related question:
JavaScript gets the node with class test in the page
So I collected some relevant information and listed two methods I think are better. The shortcomings are also needed. I hope everyone will criticize and correct them. If you have a better way, I hope you can share it.
Solution1 Jeremy Keuth Solution
Uncle Jeremy Keuth talked about the getElementsByClass method in the third and fourth section of the book "JavaScript DOM Programming Art" (2nd Edition) (English: DOM Scripting-Web Design with JavaScript and the Document Object Model), and talked about how to apply this method in browsers that do not support this property (IE6, IE7 and IE8, let's despise them). Excerpts are here, and there are modifications in some places.
A new method has been added to HTML5 DOM to allow us to access elements through the class name in the class attribute, which is: getELmentsByClassName. Since the method is relatively new, some DOM implementations do not have it yet, so be careful when using it. Let’s first take a look at what this method can help us, and then discuss how to use this method reliably.
Similar to the getELmentsByTagName method, getElementsByClassName also only accepts one parameter, which is the class name:
The code copy is as follows:
getElementsByClassName(class)
The return value of this method is also similar to getElementsByTagName, both are an array of elements with the same class name. The following line of code returns an array containing all elements of the class name "sale":
The code copy is as follows:
document.getElementsByClassName("sale")
Use this method to find elements with multiple class names. To specify multiple class names, just separate the class names with spaces in the string parameters. For example, add the following line of code to the <script> tag:
The code copy is as follows:
alert(document.getElementsByClassName("sale important").length);
Complete code
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shopping List</title>
</head>
<body>
<h1>What to buy</h1>
<p>Don't forget to buy this stuff.</p>
<ul id="purchase">
<li>A thin of beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
<script>
alert(document.getElementsByClassName("sale important").length);
</script>
</body>
</html>
You will see a 1 in the warning box, indicating that only one element matches, because only one element has both the "important" and "sale" class names. Note that even in the class attribute of an element, the order of class names is "sale important" rather than the "important sale" specified in the parameter, it will still match the element. Not only does the actual order of class names not matter, it doesn't matter even if the elements have more class names. Like using getELmentsByTagName, you can also use getElementsByClassName and getElementById in combination. If you want to know how many class names contain test list items in an element with id purchase, you can find that specific object first, and then call getElementsByClassName:
The code copy is as follows:
var shopping=document.getElementById("purchase");
var sales = shopping.getElementsByClassName("sale");
In this way, the sales array contains only elements with the "sales" class located in the "purchase" list. Run the following line of code and you will see that the sales array contains two items:
The code copy is as follows:
alert(sales.length);
This getELmentsByClassName method is very useful, but only newer browsers (Safari 3.1, Chorme, Firefox 3 and Opera 9.5 or above) support it. To make up for this shortcoming, DOM script programmers need to use existing DOM methods to implement their own getElementsByClassName, which is a bit like a coming-of-age gift. In most cases, their implementation process is roughly similar to the following getElementsByClassName, which can be applied to new and old browsers.
The code copy is as follows:
function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
}else{
var results = [];
var elems = node.getElementsByTagName("*");
for(var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname)!=-1){
results[results.length]=elems[i];
}
}
return results;
}
}
The getElementsByClassName function accepts two parameters. The first node represents the search starting point in the DOM tree, and the second classname is the class name to be searched for. If the appropriate getElementsByClassName function already exists on the incoming node, then this new function directly returns the corresponding node list. If the getElementsByClassName function does not exist, the new function will loop through all tags and look for elements with the corresponding class name.
The disadvantage of this method is that it does not apply to multiple class names.
If you use this function to simulate the previous operation of obtaining the shopping list, you can write it like this:
The code copy is as follows:
var shopping=document.getElementById("purchase");
var sales = shopping.getElementsByClassName(shopping,"test");
console.log(sales);
Therefore, to solve the problem at the beginning of the article, the code used is as follows:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shopping List</title>
</head>
<body>
<h1>What to buy</h1>
<p>Don't forget to buy this stuff.</p>
<ul id="purchase">
<li>A thin of beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
<script>
function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
}else{
var results = [];
var elems = node.getElementsByTagName("*");
for(var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname)!=-1){
results[results.length]=elems[i];
}
}
return results;
}
}
var body = document.getElementsByTagName("body")[0];
var sales= getElementsByClassName(body,"sales");
console.log(sales);
</script>
</body>
</html>
Solution2 Robert Nyman Solution
There are many ways to search for matching DOM elements, but not many are truly efficient. One disadvantage of Uncle Jeremy Keuth's method is that it cannot be used for multiple class names. In 2008, Robert Nyman provided his own solution in the article The Ultimate GetElementsByClassName, Anno 2008. In 2005, Uncle Robert had already given his getElementsByClassName function. In 2008, he modified some code and added many new functions:
1. If the current browser supports the getElementsByClassName function, the native function is called;
2. If the current browser supports it, use XPath; //Xiaofeiyu: a powerful way to locate XML documents built in the browser, but the browser support is not unified
3. Supports search for multiple class names regardless of order;
4. Returns the real node array, not a native nodelist. //Xiaofeiyu: The native getElementsByClassName method returns a NodeList object, which is very similar to an array, with length and number index properties, but it is not an array, and you cannot use array-specific methods such as pop and push. In the code provided by Robert, the NodeList object is converted into an array. Methods where NodeList objects can be converted into arrays:
The code copy is as follows:
myList = Array.prototype.slice.call (myNodeList)
This is Uncle Robert's method. I don't understand some of the things I have yet to understand. I'll update it after I've studied them.
The code copy is as follows:
/*
Developed by Robert Nyman, http://www.robertnyman.com
Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("//b" + tag + "//b", "i") : null,
returnElements = [],
Current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace: null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
Current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|//s)" + classes[k] + "(//s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};