Получите Все Элементы в документе HTML с определенным CSS Класс

1) Доберитесь, все элементы в документе (document.getElementsByTagName ('* '))
2) Делают соответствие регулярного выражения на атрибуте имени класса элемента для каждого элемента

Можно включать функция getElementsByClass, или можно использовать селектор jQuery .

ОБНОВЛЕНИЕ: реализация упомянутый Shog9, вероятно, лучше, чем это выше.

Только, чтобы сделать некоторые продолжают, я основывал свой код реализация Robert Nyman, отправленная Shog9, но отбыл немного из его точной версии по трем причинам:

1. Он позволил Вам выбирать корневой элемент и тип тега для фильтрации результатов. Мне не нужна та функциональность, и так путем удаления ее я смог упростить код значительно.
2. первая вещь, которую делает его код, видят, существует ли рассматриваемая функция уже, и если это делает он обеспечивает свою собственную реализацию так или иначе. Это просто казалось... нечетным. Я понимаю, что он добавлял функциональность к оригиналу, но снова: я не использую те функции.
3. я хотел дополнительный бит синтаксического сахара - чтобы быть в состоянии назвать его как я буду звонить document.getElementById() или document.getElementsByTagName().

Примечание, что я все еще положился главным образом на его код. Его навыки JavaScript, очевидно, далеко вне моего собственного. Я действительно пытался факторизовать некоторые избыточные переменные, но это об этом.

, Имея это в виду, вот то, с чем я закончил (, кажется для работы в IE6, IE7, Firefox 3, и Chrome видит новое примечание в конце ):

 if (!document.getElementsByClassName)
    document.getElementsByClassName = function (className)
{
    var classes = className.split(" ");
    var classesToCheck = "";
    var returnElements = [];
    var match, node, elements;

    if (document.evaluate)
    {    
        var xhtmlNamespace = "http://www.w3.org/1999/xhtml";
        var namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace:null;

        for(var j=0, jl=classes.length; j<jl;j+=1)
            classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]"; 

        try
        {
            elements = document.evaluate(".//*" + classesToCheck, document, namespaceResolver, 0, null);
        }
        catch(e)
        {
            elements = document.evaluate(".//*" + classesToCheck, document, null, 0, null);
        }

        while ((match = elements.iterateNext()))
            returnElements.push(match);
    }
    else
    {
        classesToCheck = [];
        elements = (document.all) ? document.all : document.getElementsByTagName("*");

        for (var k=0, kl=classes.length; k<kl; k+=1)
            classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));

        for (var l=0, ll=elements.length; l<ll;l+=1)
        {
            node = elements[l];
            match = false;
            for (var m=0, ml=classesToCheck.length; m<ml; m+=1)
            {
                match = classesToCheck[m].test(node.className);
                if (!match) break;
            }
            if (match) returnElements.push(node);
        } 
    }
    return returnElements;
}

Обновление:
Одно новое примечание по этому. Я с тех пор перечитал примечания по исходной реализации, и я понимаю теперь, когда мой код мог падать в случае, где существующий браузер имеет свою собственную реализацию, потому что реализации по умолчанию возвращают nodelist, куда это возвращает массив. Это включает более свежий Firefox и сафари и оперные браузеры. Большую часть времени это не будет иметь значения, но в некоторых ситуациях это могло. Это объясняет, что объект № 2 от упоминает выше.

то, Что это означает, - то, что, в то время как мой код технически работает везде, он мог привести к тонко отличающемуся (чтение: трудно для отладки), поведение в различных местах, и это не хорошо. Я должен прикреплять это или к также возврату nodelist или переопределять предоставленный метод для возврата массива (который является тем, что оригинал сделал). Вероятно, первый был бы более простым, но что последний будет лучше .

Однако это работает в данный момент в локальной среде интранета (в значительной степени весь IE), так же в настоящее время я оставлю фиксацию как осуществление для читателя.

Используйте jquery, это не может быть более удобно.

$ (" .theclass") или $ (" .theclass"), makeArray (), если Вы хотите собственный массив JS

Следует иметь в виду, что по крайней мере FF3 уже имеет собственную реализацию getElementsByClassName afaik.

, Если Вы собираетесь реализовать свое собственное решение, возможно, необходимо попытаться найти xpath-решение, так как весь современный браузер имеет собственную поддержку xpath.

Нет такой вещи как класс CSS. CSS имеет наборы правила и селекторы (включая селектор класса).

Вы имеете в виду класс HTML? Обычный путь состоит в том, чтобы циклично выполниться по каждому элементу в документе (using document.getElementsByTagName('*') (для эффективности, используйте определенное имя тега, если Вы знаете, что класс будет только применен к элементам определенного типа), и протестируйте className свойство каждого (замечание, что свойство содержит разделенный список пространства имен классов, ни одного имени класса).

Много библиотек (такой как jQuery или YUI) имеют функции только к этому.

Вы имеете в виду селектор CSS? Это становится более сложным, и превращение к библиотеке является почти наверняка правильным поступком здесь. Снова, jQuery или YUI является достойным выбором.

If using a framework, they all have selections using CSS Selectors. Otherwise.

var getElementsByClassName = function(cls, sc){
    //Init
    var elements, i, results = [], curClass;  

    //Default scope is document
    sc = sc || document;

    //Get all children of the scope node
    elements = sc.getElementsByTagName('*');
    for( i=0; i < elements.length; i++ ){
        curClass = elements[i].getAttribute('class');
        if(curClass != null){
            curClass = curClass.split(" ");
            for( j=0; j < curClass.length; j++){
                if(curClass[j] === cls){
                    results.push( elements[i] );
                    break;
                }
            }
        }
    }

    return results;
};

Just wrote it right now, just for you. :) Feel free to use.