javascript - style - Obtener todos los elementos en un documento HTML con una clase de CSS específica

obtener id de un elemento javascript

Question

¿Cuál es la mejor manera de obtener una matriz de todos los elementos en un documento html con una clase de CSS específica utilizando javascript?

No hay marcos de JavaScript como jQuery permitidos aquí en este momento, y podría hacer un bucle de todos los elementos y verificarlos manualmente. Estoy esperando algo un poco más elegante.

Answer 1

1) Obtenga todos los elementos en el documento (document.getElementsByTagName (''*''))
2) Haga una coincidencia de expresión regular en el atributo className del elemento para cada elemento

Answer 2

No hay tal cosa como una clase de CSS. CSS tiene conjuntos de reglas y selectores (incluido el selector de clases).

¿Te refieres a una clase de HTML? La forma habitual es recorrer todos los elementos del documento ( using document.getElementsByTagName(''*'') (para mayor eficiencia, use un nombre de etiqueta específico si sabe que la clase solo se aplicará a elementos de un tipo determinado) y pruebe el propiedad className de cada uno (teniendo en cuenta que la propiedad contiene una lista de nombres de clase separados por espacios, no un solo nombre de clase).

Varias bibliotecas (como jQuery o YUI ) tienen funciones simplemente así.

¿Te refieres a un selector de CSS? Esto se vuelve más complejo, y recurrir a una biblioteca es casi seguro que lo correcto es hacerlo aquí. De nuevo, jQuery o YUI son opciones decentes.

Answer 3

Use jquery , no puede ser más conveniente.

$ (". theclass") o $ (". theclass"), makeArray () si quieres una matriz JS nativa

Answer 4

Tenga en cuenta que al menos FF3 ya tiene una implementación nativa de getElementsByClassName afaik.

Si vas a implementar tu propia solución, tal vez deberías tratar de encontrar una solución xpath ya que todos los navegadores modernos tienen soporte nativo para xpath.

Answer 5

@ shog9, @ user28742, @bdukes - Estoy haciendo un desarrollo personalizado en SharePoint para una cosa modular (definición de campo personalizado) Espero que pueda ser reutilizado en muchos sitios.

Como no puedo saber con anticipación si un determinado sitio de SharePoint tendrá jQuery o cualquier otra biblioteca disponible, aún necesito escribir cosas en javascript sin formato para que pueda tener un grado de confianza de que la funcionalidad que tengo Tratando de lograr se mantendrá por sí mismo.

Gracias Dmitri por su implementación particular. Lo suficientemente corto para mis propósitos.

En otros esfuerzos recientes, tuve que modificar una tienda de comercio electrónico (de la elección de mi cliente) y algunos de mis intentos de incorporar jQuery en ella entraron en conflicto con las bibliotecas personalizadas que habían manipulado previamente. Pude haber sido persistente y haber encontrado una manera de implementar jQuery en su sistema propietario ... o ... aún más rápido ... simplemente escribí un buen javascript antiguo.

¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡LAS LIBARIAS SIEMPRE NO SON LA MEJOR RESPUESTA !!!!!!!!!!!!!!!!

(y amo jQuery más que a mi abuela)

Answer 6

Solo para hacer un seguimiento, basé mi código en la implementación de Robert Nyman publicada por Shog9, pero me aparté un poco de su versión exacta, por tres razones:

1. Le permitió seleccionar un elemento raíz y un tipo de etiqueta para filtrar sus resultados. No necesito esa funcionalidad y, al eliminarla, pude simplificar el código significativamente.
2. Lo primero que hace su código es ver si la función en cuestión ya existe, y si lo hace, proporciona su propia implementación de todos modos. Eso solo parecía ... extraño. Entiendo que estaba agregando funcionalidad al original, pero de nuevo: no estoy usando esas funciones.
3. Quería un poco más de azúcar sintáctico: poder llamarlo como llamaría a document.getElementById() o document.getElementsByTagName() .

Tenga en cuenta que todavía confié principalmente en su código. Sus habilidades de javascript obviamente van más allá del mío. Intenté factorizar algunas variables redundantes, pero eso es todo.

Con esto en mente, aquí es a lo que terminé ( parece funcionar en IE6, IE7, Firefox 3 y Chrome, vea una nueva nota al final ):

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

Actualizar:
Una nueva nota sobre esto. Desde entonces he vuelto a leer las notas sobre la implementación original, y ahora entiendo que mi código podría fallar en el caso de que el navegador existente tenga su propia implementación, porque las implementaciones predeterminadas devuelven una lista de nodos donde esto devuelve una matriz. Esto incluye los navegadores más recientes de Firefox y Safari, y Opera. La mayoría de las veces eso no importará, pero en algunas situaciones podría. Eso explica el ítem n. ° 2 de la lista anterior.

Lo que eso significa es que aunque mi código técnicamente funciona en todas partes, podría dar como resultado una conducta sutilmente diferente (leer: difícil de depurar) en diferentes lugares, y eso no es bueno. Debería solucionar esto para devolver también una lista de nodos o anular el método proporcionado para devolver una matriz (que es lo que hizo el original). Probablemente, el primero sería más simple, pero eso último sería mejor .

Sin embargo, está funcionando en este momento en el entorno de la intranet local (casi todos los IE), así que de momento dejaré la solución como un ejercicio para el lector.

Answer 7

Si desea hacer algo para todo el elemento con la misma identificación en un documento. Aunque la mente simple pero a veces no da señales verdes

var x = document.getElementById(elementid);
while(x){
document.removechild(x);
x = document.getElementById(elementid);
}

Answer 8

La respuesta a continuación ahora está presionando cuatro años, por lo que vale la pena señalar que el soporte de navegador nativo para getElementsByClassName() ha mejorado mucho . Pero si debe admitir navegadores más antiguos, entonces ...

Use uno que ya haya sido escrito. La mayoría de las principales bibliotecas de JS incluyen una de una forma u otra, pero si no está utilizando una de ellas, puedo recomendar la excelente implementación de Robert Nyman:

http://code.google.com/p/getelementsbyclassname/
http://www.robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/

Hay demasiadas maneras de hacer que esta rutina (conceptualmente simple) sea lenta y con errores para justificar la escritura de su propia implementación en este punto.

Answer 9

Si usa un marco, todos tienen selecciones usando selectores de CSS. De otra manera.

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

Solo lo escribí en este momento, solo para ti. :) Siéntase libre de usar.

Answer 10

Puede incluir una función getElementsByClass o puede usar un selector jQuery .

ACTUALIZACIÓN: La implementación mencionada por @ Shog9 es probablemente mejor que la anterior.