document.getElementByClassName - Cross Browser Fix

Question

Я рассмотрел предыдущий запрос на помощь в исправлении кросс-браузера для document.getElementByClassName и нашел this link, который предоставил, казалось бы, идеальное исправление.

Однако я попытался реализовать его на сайте, который я создал, но не могу заставить исправление работать (или любые другие) на IE8 (браузер, с которым я работаю, чтобы получить совместимость с). Я все еще получаю сообщение об ошибке «Объект или свойство не поддерживается», означающее, что исправление явно не работает.

Вкратце по каким-либо причинам, почему это может быть неправильно, и не может найти никого, у кого проблемы с его работой. Я спрашиваю, сможете ли вы помочь мне в работе.

Сайт Я пытаюсь затруднительным работать на это http://lifeswitch.org.nz.s125738.gridserver.com/

Answer 1

Вы создали глобальную функцию, называемую getElementsByClassName, а не метод объекта document. Вам необходимо позвонить по номеру getElementsByClassName или window.getElementsByClassName, а не document.getElementsByClassName.

Answer 2

Я думаю, что вы должны начать использовать JQuery, как это будет легко выбрать элемент с его именем класса он будет как $ (». Имя класс ")

Answer 3

В IE 8+ и в большинстве новых браузеров.

Использовать document.querySelector и document.querySelectorAll. Эти методы позволяют доступ к любому элементу с помощью селектора, как в CSS :)

var e = document.querySelectorAll(".myClass"); // 

Разница между ними заключается в том, что сначала получить первый элемент из совпавшего элемента, второй способ получить коллекцию соответствующих элементов.

В демо: http://jsfiddle.net/f9cHr/ нажмите на документе, чтобы изменить цвет элементов.

А теперь:

getElementsByClassName = function(className , ctx ) { 
    var context = ctx ? (typeof ctx =="string" ? document.querySelector(ctx) : ctx): document; 
    return context.querySelectorAll && context.querySelectorAll("." + className) 
}; 

Вы можете использовать эту функцию, когда querySelector`s функции присутствуют

if(document.querySelector && document.querySelectorAll) { 
    //getElementsByClassName = function from above here 
} else { 
    //getElementsByClassName = function you are using here 
} 

Использование:

var myClassInnerMyId = 
      getElementsByClassName("myClass" , document.getElementById("myId")); 
     // = document.querySelectorAll("#myId .myClass"); 

также

someClassesInnerOtherId = getElementsByClassName("myClass1,myClass2" , "#otherId"); 

    // = document.querySelectorAll("#otherId myClass1, #otherId myClass2"); 

Answer 4

Как насчет изменения кода использовать getElementsByTagName() вместо, который поддерживается всеми основными browsers

elements = document.getElementById(id).getElementsByTagName('a'); 

for (var i = 0; i < elements.length; i++) { 
    if (elements[i].className == t) { 
     elements[i].className += ' animate'; 
    } 
} 

Answer 5

Это работает (проверено):

function getElementsByClassName(cn, rootNode) { 
    if (!rootNode) { 
    rootNode = document; 
    } 
    for (var r=[], e=rootNode.getElementsByTagName('*'), i=e.length; i--;) { 
    if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) { 
     r.push(e[i]); 
    } 
    } 
    return r; 
} 

Вы могли бы уйти с добавлением его Node.prototype, как это:

Node.prototype.getElementsByClassName = function(cn) { 
    for (var r=[], e=this.getElementsByTagName('*'), i=e.length; i--;) { 
    if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) { 
     r.push(e[i]); 
    } 
    } 
    return r; 
} 

это должно добавить его в браузерах, которые не имеют его, но он с могут быть затенены браузерами, которые имеют его, так как они обеспечивают его дальше по цепочке прототипов (не тестируются).

Answer 6

Правило "Keep It Simple"

if(!typeof document.getElementsByClassName == 'function'){ 
    Object.prototype.getElementsByClassName = function(cn) { 
     if (!this) return null; 
     for (var r=[], e=this.getElementsByTagName('*'), i=e.length; i--;) 
     if (e[i].className.indexOf(cn)>-1) r.push(e[i]); 
     return r; 
    } 
} 

Если метод существует, то функция не производится.

Также убедитесь, что ваши примеры удобны и читабельны.

Добавление, другой способ использования цикла ...

if(!typeof document.getElementsByClassName == 'function'){ 
    Object.prototype.getElementsByClassName = function(cn) { 
     if (!this) return null; 
     var r=[],e=this.getElementsByTagName('*'); 
     for (i in e) 
     if (e[i].className.indexOf(cn)>-1) r.push(e[i]); 
     return r; 
    } 
}