javascript getElementsByClassName function_javascript skills-JS Tutorial-php.cn

javascript getElementsByClassName function_javascript skills

WBOY

Release： 2016-05-16 18:30:55

Original

1292 people have browsed it

I saw a script on the Internet today that gets Elements based on ClassName. I record it here for future use.

Copy code The code is as follows:

 
var getElementsByClassName = function(searchClass, node, tag) { 
if (document.getElementsByClassName) { 
return document.getElementsByClassName(searchClass) 
} else { 
node = node || document; 
tag = tag || "*"; 
var classes = searchClass.split(" "), 
elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag), 
patterns = [], 
returnElements = [], 
current, 
match; 
var i = classes.length; 
while (--i >= 0) { 
patterns.push(new RegExp("(^|\s)" classes[i] "(\s|$)")); 
} 
var j = elements.length; 
while (--j >= 0) { 
current = elements[j]; 
match = false; 
for (var k = 0, kl = patterns.length; k < kl; k ) { 
match = patterns [k].test(current.className); 
if (!match) break; 
} 
if (match) returnElements.push(current); 
} 
return returnElements; 
} 
} 

The following are some other related introductions on the Internet, you can refer to them together.

GetElementsByClassName in DOM is explained as follows: The DOM API provides three methods to get elements (getElementById, getElementsByName, getElementsByTagName). People who often write CSS will naturally have questions. Is there a way to get elements based on style class names? Unfortunately, there is no such method in DOM1/2. The prototype has extended the DOM method very early and added getElementsByClassName. Judging from the method name, it seems to be very orthodox, and the names of the previous three methods are also similar. Analyze its code. But I found that it is still implemented through getElementsByTagName. This method is not elegant, because it needs to traverse all elements, detect whether the element contains the target style class name, and return an array of elements that meet the conditions. I googled it, but couldn't find a more elegant and efficient alternative.

Copy code The code is as follows:

 
function getElementsByClassName(className, parentElement){ 
var elems = ($(parentElement)||document.body).getElementsByTagName("*"); 
var result=[]; 
for (i=0; j=elems[i]; i ){ 
if ((" " j.className " ").indexOf(" " className " ")!=-1){ 
result.push(j); 
} 
} 
return result; 
} 

Since there is getElementsByClassName, you can also have getElementsByAttribute (such as: getElementsByValue, getElementsByStyle, getElementsByType)

Copy code The code is as follows:

 
document.getElementsByClassName = function(className,oBox) { 
//Suitable for getting a specific className contained in an HTML block All HTML elements of 
this.d= oBox || document; 
var children = this.d.getElementsByTagName('*') || document.all; 
var elements = new Array(); 
for (var ii = 0; ii < children.length; ii ) { 
var child = children[ii]; 
var classNames = child.className.split(' '); 
for (var j = 0; j < classNames.length; j ) { 
if (classNames[j] == className) { 
elements.push(child); 
break; 
} 
} 
} 
return elements; 
} 

document.getElementsByType = function(sTypeValue,oBox) { 
//Suitable for obtaining the same content within an HTML block All HTML elements of a specific type, such as: input, script, link, etc. 
this.d= oBox || document; 
var children = this.d.getElementsByTagName('*') || document. all; 
var elements = new Array(); 
for (var ii = 0; ii < children.length; ii ) { 
if (children[ii].type == sTypeValue) { 
elements.push(children[ii]); 
} 
} 
return elements; 
} 

function $() { 
var elements = new Array( ); 
for (var ii = 0; ii < arguments.length; ii ) { 
var element = arguments[ii]; 
if (typeof element == 'string') 
element = document.getElementById(element); 
if (arguments.length == 1) 
return element; 
elements.push(element); 
} 
return elements; 
} 

$Cls = function (s,o){ 
return document.getElementsByClassName(s,o); 
}; 

$Type = function (s,o){ 
return document.getElementsByType(s,o); 
}; 

$Tag = function (s,o){ 
this.d=o || document; 
return this.d.getElementsByTagName(s); 
}; 

$Name = function (s){ //The name method can only be used for the entire document and cannot be limited to it
 return document.getElementsByName(s); 
}; 