IE와의 javascript document.getElementsByClassName 호환성

IE와의 javascript document.getElementsByClassName 호환성

---

특정 클래스가있는 요소 배열을 검색하는 가장 좋은 방법은 무엇입니까?

document.getElementsByClassName을 사용하지만 IE는이를 지원하지 않습니다.

그래서 Jonathan Snook의 솔루션을 시도했습니다 .

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = document.getElementsByClassName(document.body,'tab');

...하지만 IE는 여전히 다음과 같이 말합니다.

개체가이 속성 또는 메서드를 지원하지 않습니다.

아이디어, 더 나은 방법, 버그 수정이 있습니까?

jQuery 또는 기타 "대량 자바 스크립트"와 관련된 솔루션은 사용하지 않는 것이 좋습니다.

최신 정보:

나는 그것을 작동시켰다!

마찬가지로 @joe 언급 함수 방법 아니다 document.

따라서 작동 코드는 다음과 같습니다.

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = getElementsByClassName(document.body,'tab');

... 또한 IE8 + 지원 만 필요한 경우 다음과 같이 작동합니다.

if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) {
        return this.querySelectorAll("." + className);
    };
    Element.prototype.getElementsByClassName = document.getElementsByClassName;
}

평소처럼 사용하십시오.

var tabs = document.getElementsByClassName('tab');

---

문서화 방법이 아닙니다.

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

tabs = getElementsByClassName(document.body,'tab');  // no document

---

이전 브라우저 용 기능을 만들 수 있습니다.

if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
                ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}

---

function getElementsByClassName(className) {
if (document.getElementsByClassName) { 
  return document.getElementsByClassName(className); }
else { return document.querySelectorAll('.' + className); } }

Pretty sure this is the same as Leonid's function but this uses document.getElementsByClassName when it can.

---

You can't really replicate getElementsByClassName, because it returns a nodeList, and so its value is live, and updates with the document.

You can return a static Array of elements who share the same classnames- but it won't 'know'when the document changes.

(It won't take too many of these kind of things to make a library look svelte...)

function getArrayByClassNames(classes, pa){
    if(!pa) pa= document;
    var C= [], G;
    if(pa.getElementsByClassName){
        G= pa.getElementsByClassName(classes);
        for(var i= 0, L= G.length; i<L; i++){
            C[i]= G[i];
        }
    }
    else{
        classes= classes.split(/\s+/);
        var who, cL= classes.length,
        cn, G= pa.getElementsByTagName('*'), L= G.length;
        for(var i= 0; i<cL; i++){
            classes[i]= RegExp('\\b'+classes[i]+'\\b');
        }
        classnameLoop:
        while(L){
            who= G[--L];
            cn= who.className;
            if(cn){
                for(var i= 0; i<cL; i++){
                    if(classes[i].test(cn)== false) {
                        continue classnameLoop;
                    }
                }
                C.push(who);
            }
        }
    }
    return C;
}

//Example

var A= getArrayByClassNames('sideBar local')

---

IE8:

document.getElementsByClassName = function (className) {
    return document.querySelectorAll('.' + className)
}

---

function _getClass(whatEverClasNameYouWant){
var a=document.getElementsByTagName('*');
   for(b in a){
      if((' '+a[b].className+' ').indexOf(' '+whatEverClasNameYouWant+' ')>-1){
      return a[b];
      }
   }
}

---

I just want to improve querySelectorAll fallback for IE8.

Like others answered, the simple way is adding the function to Element.prototype with

this.querySelectorAll('.' + className);

But there are some problems:

• It doesn't work with untrimmed strings (at the beginning).
• It doesn't work with multiple classes.
• It doesn't work with "strange" class characters (/, $, *, etc.)
• It doesn't work with classes which begin with a digit (invalid identifiers)

That means there should be some "fixing", for example:

"abcd"     ->  ".abcd"
"a   b cd" ->  ".a.b.cd"
"   a b  " ->  ".a.b  "
"a/b$c d"  ->  ".a\/b\$c.d"
"1234"     ->  ".\000031234"

Code:

this.querySelectorAll(className
    .replace(/(?=[^ \w])/g, '\\')   // Escape non-word characters
    .replace(/\b\d/g, '\\00003$&')  // Escape digits at the beginning
    .replace(/(^| +)(?!$| )/g, '.') // Add "." before classes, removing spaces
);

참고URL : https://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie