Cómo puedo seleccionar todos los elementos dentro de un documento HTML con una clase específica y el tipo de elemento específico?

Estoy tratando de seleccionar todos los anclajes con la clase title loggedin de un documento HTML (y abrirlos en el navegador). Estas se encuentran dentro de parragraphs con la clase title.

Son hojas en el siguiente árbol DOM:

+ body
  + div class='content'
    + div id='siteTable' class='sitetable linklisting'
      + div class='thing id-t3_xxxx xxx xxx link'
        + div class='entry unvoted'
            + p class='title'
              + a class='title loggedin '

Donde x indica el contenido de la variable.

(Yo estoy mirando para hacer esto en raw JavaScript, es decir, no en jQuery.)

  • ¿cuál es el tipo de elemento o etiqueta con la clase title loggedin?
  • De anclaje, es decir, a.
  • En los navegadores modernos: document.querySelectorAll('a.title.loggedin')

4 Comentarios

  1. 8

    Intente esto:

    var aElems = document.getElementsByTagName("a");
    for (var i=0; i<aElems.length; ++i) {
        var classesArr = aElems[i].className.split(/\s+/),
            classesObj = {};
        for (var j=0; j<classesArr.length; ++j) {
            classesObj[classesArr[i]] = true;
        }
        if (classesObj.hasOwnProperty("title") && classesObj.hasOwnProperty("loggedin")) {
            //action
        }
    }

    Una explicación:

    • document.getElementsByTagName devuelve un array de elementos de un tipo determinado (en este caso a)
    • para cada elemento de la matriz la matriz de nombres de la clase se extrae (ver aElems[i].className.split)
    • cada nombre de la clase se utiliza como nombre de la propiedad para un objeto de índice
    • el índice se levantó por los dos nombres de clase (ver aElems[i].className.split)
    • Parece que está confiando en Array.prototype.indexOf que no es compatible en todos los navegadores…
    • Buen argumento. Me lo cambiaron por lo que no requiere de ese método.
    • Yo, finalmente, fue para obtener una solución sencilla para la que ha publicado. Saludos!
  2. 5

    Técnicamente que no es una clase, es de dos clases: title y loggedin. Usted puede utilizar documento.getElementsByClassName() para que.

    var elements = document.getElementsByClassName("title loggedin");

    Puede pasar dos clases a ese método.

    • Vale la pena señalar que getElementsByClassName() tiene compatibilidad implicaciones (en este momento): quirksmode.org/dom/w3c_core.html#gettingelements
    • La compatibilidad implicaciones son antiguos problemas y ya no pariente por los estándares de hoy.
  3. 3

    Obtener todos los elementos de un determinado tipo de etiqueta utilizando document.getElementsByTagName() y caminar a través de la lista de trabajo. Con múltiples clases que se tendría que analizar el className de la propiedad (que contendrá la cadena completa title loggedin) manualmente.

    Supongo que usted tiene una buena razón para hacer esto en JavaScript puro; sería mucho más conveniente utilizar un framework como jQuery o Prototype.

    • Naturalmente, sería más fácil en jQuery, pero me gustaría saber cómo caminar antes de correr! 😉
  4. 2

    Sé que esto es una vieja pregunta, pero si alguna vez has querido saber cómo jQuery selecciona elementos puede ver el origen de su independiente de motor de selección Sizzle.js que durante años ha sido desarrollado por una gran cantidad de personas inteligentes que han pasado una gran cantidad de tiempo en el rendimiento 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here