Реализация метода getElementsByClassName для IE

2010-04-27

К огромному сожалению Internet Explorer не имеет в своем арсенале такого замечательного метода как getElementsByClassName. Ну не будем же мы из-за него отказываться от таких сладостей?!

Сделующий фрагмент кода призван решить эту проблему:

// "getElementsByClassName" не определен IE,
// так что этот метод можно реализовать в JavaScript
if(document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) {
retnode.push(elem[i]);
}
}
return retnode;
}
};

Что же делает этот код?
Он проверяет, есть ли у браузера данный метод. Если его нет, реализуется новый метод с таким же именем getElementsByClassName. После этого можно использовать данный метод без опаски, что он может не существовать.
Правда, нужно понимать, что браузерная реализация будет на порядок быстрее.



15 комментариев на «Реализация метода getElementsByClassName для IE»

  1. MegaWeb:

    Это все конечно прекрасно.
    Но в нормальных браузерах, где есть поддержка DOM level 2, метод getElementsByClassName реализован для всех эелемнов.
    Вот как бы измудриться и сделать такую эмуляцию не только для глобального объекта document, а для всех узлов DOM HTML?

  2. Nickproger:

    Да, чего нет, того нет…
    В соврименных браузерах (Opera, FireFox …) это можно сделать очень просто через HTMLElement.prototype, но а в IE ниже 8й версии такого нету.

    Можно сделать обёртку, ну или использовать готовые решения типа jQuery или Sizzle.
    В них работают не только селекторвы по имени класса, а есть очень разшиленный набор CSS селекторов.

    Для новичнов: чтобы выбрать елементы по имени класса с помощью библиотеки jQuery — нужно просто написать:
    $(«.myClass»)
    Чтобы найти елементы с именем класса внутри найденного елемета:
    myElement.find(«.myClass»)

  3. Trolor:

    Здорово, очень годная штука, спс!

  4. bot:

    MegaWeb: а чем jQuery и иже с ним не подходят?

  5. Владимир:

    А в чем недостаток использования jQuery? Или нет особых недостатков?

  6. admin:

    Нет недостатков.
    Эту штуку удобно использовать в том случае, если на этапе разработки повсюду в js-коде использовался метод getElementByClassName(), а потом выяснилось, что этот метод не реализован в ИЕ.
    Простое добавление этого метода решит проблему.

  7. covorp:

    спс, отлично работает!

  8. Костя:

    admin, Xpath ищо есть, есилчо

  9. valik:

    <>
    А разве JQuery не использует тот же Sizzle ? зачем вы оба компонента упоминаете когда JQuery к селекторам почти ничего не имеет, и все делает Sizzle ? Из вот таких вот как вы новички и подключают всю массу быблиотеке аля jquery ради каких то селекторов.

  10. valik:

    Да и реализация самой функции getElementsByClassName у вас не очень нормальная. А если я к примеру не во всем документе хочу искать ? что тогда ? Могли бы в том же гугле поискать более нормальные решения.

  11. admin:

    >> А разве JQuery не использует тот же Sizzle ? зачем вы оба компонента упоминаете когда JQuery к селекторам почти ничего не имеет, и все делает Sizzle ? Из вот таких вот как вы новички и подключают всю массу быблиотеке аля jquery ради каких то селекторов.

    Ну, во-первых, было бы более правильно если бы я упомянул не 2, а 20 альтернатив.
    Во-вторых, то, что JQuery использует Sizzle, не уменьшает основных достоинств JQuery, одно из которых — это именно кроссбраузерные селекторы, не смотря на то, как они там внутри реализованы. Но, думаю, люди оценят Ваши глубокие познания исходного кода jQuery.
    В-третьих: я считаю, что это очень хорошо, если новички разберутся в возможностях того же jQuery, и будут использовать его на всю катушку.
    Какую более правильную альтернативу Вы можете предложить новичкам?

    >> Да и реализация самой функции getElementsByClassName у вас не очень нормальная
    Думаю, большинство читателей было бы Вам очень признательны, если бы вслед за Вашим комментарием Вы бы представили более нормальную реализацию с описанием преимуществ.

    Конструктивный подход всегда приветствуется обществом, в отличии и километров бессмысленного спама.

  12. denis:

    Кросс-пост:
    «… Нельзя использовать в регулярках \bneedle\b, так как christmas-tree-needle это один класс…»
    http://javascript.ru/unsorted/top-10-functions#comment-8426

  13. Беляш:

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

  14. Максимус:

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

  15. Ranerg:

    Вы надоели уже ныть:) Ребята, давайте реально мыслить. Зачем нам это надо реализовывать и подстраиваться? Есть новый IE под него и делаем. А в проектах указываем, что не поддерживается. Людей нужно стимулировать обновляться. Да и Windows XP старый век:)

Добавить комментарий