Home > Web Front-end > JS Tutorial > body text

Solution to the problem that getElementsByClassName cannot be used in IE_javascript skills

WBOY
Release: 2016-05-16 17:24:19
Original
1209 people have browsed it

Today I wrote a small program using getElementsByClassName, and I am excited to test it. It works fine on mainstream browsers such as FF and Google, and it works on IE9 as well. However, problems arise when I test it on IE6 and 8. The browser reported an error. After struggling with the code, it seemed that there was no problem, so I decided to find Du Niang. . . I finally found the problem, but it turns out that the getElementsByClassName method is not supported in IE6 and 8. Then I searched for a solution on the Internet and found a better method. It was written by a foreigner. After a closer look, it turned out to be a problem in 2005. . . First enter the code:

Copy the code The code 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; icurrent = 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; jclassesToCheck = "[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; kclassesToCheck.push(new RegExp("(^|\s)" classes[k] "(\s|$ )"));
}
for(var l=0, ll=elements.length; lcurrent = elements[l];
match = false ;
for(var m=0, ml=classesToCheck.length; mmatch = classesToCheck[m].test(current.className);
if (!match ) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};

For specific how to use it, please see the usage method in it.

After using this method, it can be displayed in IE6 and 8, but there is still a random problem. Sometimes an error will be reported after refreshing several times. There is no solution for the time being. Then I wondered if I could use jquery to solve this refresh error problem. Of course, jquery can also replace the getElementsByClassName method. I won’t introduce how to use it here. However, the reality is not what people want. There will still be problems with refreshing, and the errors are random. Sometimes the error is reported during the first loading process, and sometimes the error is reported after refreshing several times. Heroes. Seek solution.
Related labels:
ie
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template