Sélectionnez les éléments en fonction de la classe et de type d'élément

Comment puis-je sélectionner tous les éléments à l'intérieur d'un document HTML avec une classe spécifique et spécifique du type d'élément?

Je suis en train de sélectionner tous les points de contrôle avec la classe title loggedin partir d'un document HTML (et puis les ouvrir dans le navigateur). Ceux-ci sont dans parragraphs avec la classe title.

Ils sont leafs dans la suite de DOM arbre:

+ 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 '

Où x indique à contenu variable.

(Je suis à la recherche pour ce faire en raw JavaScript, c'est à dire, pas en jQuery.)

quel est le type d'élément/tag avec classe title loggedin?
D'ancrage, c'est à dire, a.
Dans les navigateurs modernes: document.querySelectorAll('a.title.loggedin')

OriginalL'auteur Humphrey Bogart | 2010-05-10

  1. 8

    Essayez ceci:

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

    Quelques explications:

    • document.getElementsByTagName retourne un tableau d'éléments d'un type donné (dans ce cas a)
    • pour chaque élément de ce tableau le tableau des noms de classe est extrait (voir aElems[i].className.split)
    • chaque nom de classe est ensuite utilisé comme nom de la propriété pour un objet index
    • l'indice est ensuite examiné pour les deux noms de classe (voir aElems[i].className.split)
    Il semble que vous êtes en s'appuyant sur Array.prototype.indexOf ce qui n'est pas pris en charge dans tous les navigateurs...
    Bon argument. J'ai changé de sorte qu'il ne nécessite pas de cette méthode.
    J'ai finalement allé pour une solution plus simple pour que posté. Cheers!

    OriginalL'auteur Gumbo

  2. 4

    Techniquement ce n'est pas une classe, c'est deux classes: title et loggedin. Vous pouvez utiliser document.getElementsByClassName().

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

    Vous pouvez passer deux classes à cette méthode.

    Il est intéressant de noter que getElementsByClassName() a compatibilité implications (en ce moment): quirksmode.org/dom/w3c_core.html#gettingelements
    La compatibilité des implications sont d'anciens problèmes et non plus par rapport par des normes d'aujourd'hui.

    OriginalL'auteur cletus

  3. 3

    Récupérer tous les éléments d'un certain type de balise à l'aide de document.getElementsByTagName() et de la marche par le biais de la liste de travail. Avec plusieurs classes, vous devez analyser la className propriété (qui contiendra l'intégralité de la chaîne de title loggedin) manuellement.

    Je suppose que vous avez une bonne raison de le faire en JavaScript; il serait beaucoup plus pratique à l'aide d'un framework comme jQuery ou Prototype.

    Naturellement, ce serait plus simple en jQuery, mais je préfère savoir marcher avant de me lancer! 😉
    c'est une bonne attitude!

    OriginalL'auteur Pekka 웃

  4. 2

    Je sais que c'est une vieille question, mais si vous avez toujours voulu savoir comment jQuery sélectionne les éléments, vous pouvez voir la source de leurs autonome sélecteur moteur Sizzle.js qui, au fil des années, a été développé par beaucoup de gens intelligents qui ont passé beaucoup de temps sur les performances 🙂

    OriginalL'auteur Terry