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

Question

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

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

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

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

Answer 1

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

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 2

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

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

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

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

Answer 6

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