getElementsByClassName кроссбраузерно

getElementsByClassName кроссбраузерно

Часто в работе требуется выбирать из DOM елементы по имени класса. Вообще у объекта document в JavaScript есть метод getElementsByClassName но к сожалению он реализован не во всех браузерах. Угадайте а каких браузерах его нет? Правильно в "любимом" IE, а возможно и ещё в каких либо… Предлагаю вам свою кроссбраузерную реализацию метода getElementsByClassName:

 

// Если все таки getElementsByClassName поддерживается браузером,

// надобность в нашей реализации отпадает - будем использовать

// стандартную. Так как она в любом случае будет быстрее.

if(!document.getElementsByClassName) {      

    document.getElementsByClassName = function (class_name) {

 

        // Получим коллекцию элементов тега body:

        var elements = document.body.getElementsByTagName("*"),

            length   = elements.length,

            out = [], i;

 

        // Пройдёмся по ним... увы циклом:

        for (i = 0; i < length; i += 1) {

 

            // Поместим в результирующий массив элементы, содержащие требуемый класс:

            if (elements[i].className.indexOf(class_name) !== -1) {

                out.push(elements[i]);

            }       

        }        

        return out;

    };

}

На самом деле этот код мог бы быть ещё короче:

 

if(!document.getElementsByClassName) {       

    document.getElementsByClassName = function(class_name) {   

      var elements = document.body.getElementsByTagName("*"),

          length = elements.length,

          i;     

      for (i = 0; i < length; i += 1) {       

          if (elements[i].className.indexOf(class_name) === -1) {

              delete elements[i];

          }       

      }       

      return elements;

    }

Но IE8 выдаёт ошибку на строку: delete elements[i]; мол "Команда не поддерживается объектом". Здесь у нас в elements имеется object HTMLCollection — он то по ходу дела и не поддерживает применения к себе оператора delete. А какие мысли у вас на сей счёт?

 

Возможно Вас заинтересуют эти материалы

Javascript выпадающий список

Часто на форумах втречаются вопросы как сделать динамический Javascript выпадающий список? Да ещё с возможностью

Javascript динамическая html таблица

Понадобилось мне в одном проекте на днях сделать html таблицу, которую бы выводил серверный php

Свои события или observer на Javascript

В этой статье, я по сути "убил двух зайцев" - Написал интересный и полезный Javascript