document.getElementByClassName - Исправление кросс-браузер

Question

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

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

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

Сайт, над которым я пытаюсь исправить это http://lifeswitch.org.nz.s125738.gridserver.com/

Answer 1

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

Answer 2

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

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 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

 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(), который поддерживается всеми основными браузерами

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

Правило "Не усложняй"

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;  
    }
}

Answer 6

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