web-dev-qa-db-fra.com

Comment obtenir un élément enfant par nom de classe?

J'essaie d'obtenir l'envergure d'enfant qui a une classe = 4. Voici un exemple d'élément:

<div id="test">
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
</div>

Les outils disponibles sont JS et YUI2. Je peux faire quelque chose comme ça:

doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');

Ceux-ci ne fonctionnent pas dans IE. Je reçois le message erroné que l'objet (doc) ne prend pas en charge cette méthode ou cette propriété (getElementsByClassName). J'ai essayé quelques exemples d'implémentations multi-navigateurs de getElementsByClassName mais je ne pouvais pas les faire fonctionner et j'ai toujours cette erreur.

Je pense que ce dont j'ai besoin, c'est d'un navigateur croisé, getElementsByClassName, ou j'ai besoin d'utiliser doc.getElementsByTagName ('span') et de le parcourir jusqu'à ce que je trouve la classe 4. Je ne sais pas comment faire cela.

javascriptyui
94
spyderman4g63

Utilisez doc.childNodes pour parcourir chaque span, puis filtrez celui dont className est égal à 4:

var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i < doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}

Un séjour sans faille

69
João Silva

Utiliser querySelector et querySelectorAll

var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');

IE9 et supérieur

;)

67
Alberto Clar Brines

La réponse acceptée ne contrôle que les enfants immédiats. Souvent, nous recherchons des descendants avec ce nom de classe.

De plus, nous voulons parfois que tout enfant contienne un className.

Par exemple: <div class="img square"></div> devrait correspondre à une recherche sur className "img", même si c'est exact className n'est pas "img".

Voici une solution pour ces deux problèmes:

Trouvez la première instance d'un élément descendant avec la classe className

   function findFirstChildByClass(element, className) {
        var foundElement = null, found;
        function recurse(element, className, found) {
            for (var i = 0; i < element.childNodes.length && !found; i++) {
                var el = element.childNodes[i];
                var classes = el.className != undefined? el.className.split(" ") : [];
                for (var j = 0, jl = classes.length; j < jl; j++) {
                    if (classes[j] == className) {
                        found = true;
                        foundElement = element.childNodes[i];
                        break;
                    }
                }
                if(found)
                    break;
                recurse(element.childNodes[i], className, found);
            }
        }
        recurse(element, className, false);
        return foundElement;
    }
43
Augie Gardner

Pour moi, il semble que vous souhaitiez la quatrième durée. Si oui, vous pouvez simplement faire ceci:

document.getElementById("test").childNodes[3]

ou

document.getElementById("test").getElementsByTagName("span")[3]

Ce dernier assure qu'il n'y a pas de nœuds cachés qui pourraient le gâcher.

7
Christian Jørgensen

Tu pourrais essayer:

notes = doc.querySelectorAll('.4');

ou

notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}
6
Korikulum

Mais sachez que les anciens navigateurs ne supportent pas getElementsByClassName.

Ensuite, vous pouvez faire

function getElementsByClassName(c,el){
    if(typeof el=='string'){el=document.getElementById(el);}
    if(!el){el=document;}
    if(el.getElementsByClassName){return el.getElementsByClassName(c);}
    var arr=[],
        allEls=el.getElementsByTagName('*');
    for(var i=0;i<allEls.length;i++){
        if(allEls[i].className.split(' ').indexOf(c)>-1){arr.Push(allEls[i])}
    }
    return arr;
}
getElementsByClassName('4','test')[0];

Il semble que cela fonctionne, mais sachez qu'une classe HTML

  • Doit commencer par une lettre: AZ ou a-z
  • Peut être suivi de lettres (A-Za-z), de chiffres (0 à 9), de traits d'union ("-") et de traits de soulignement ("_")
4
Oriol

Utilisez le nom de l'ID avec le signe getElementById, pas de # avant celui-ci. Ensuite, vous pouvez obtenir les nœuds enfants span à l'aide de getElementsByTagName et les parcourir en boucle pour trouver celui avec la bonne classe:

var doc = document.getElementById('test');

var c = doc.getElementsByTagName('span');

var e = null;
for (var i = 0; i < c.length; i++) {
    if (c[i].className == '4') {
        e = c[i];
        break;
    }
}

if (e != null) {
    alert(e.innerHTML);
}

Démo: http://jsfiddle.net/Guffa/xB62U/

3
Guffa

À mon avis, chaque fois que vous le pouvez, vous devriez utiliser Array et ses méthodes. Ils sont beaucoup, beaucoup plus rapides que de faire une boucle sur tout le DOM/wrapper, ou de pousser des choses dans un tableau vide. La majorité des solutions présentées ici peuvent être appelées Naive comme décrit ici (très bel article d'ailleurs):

https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc

Ma solution : (aperçu en direct sur Codepen: https://codepen.io/Nikolaus91/pen/wEGEYe )

const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest
const itemsArray = Array.from(wrapper.children) // make Array from his children

const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more
   if(item.classList.contains('four')) // we place a test where we determine our choice
     item.classList.add('the-chosen-one') // your code here
})
2
user2795540

Utilisez element.querySelector (). Supposons que 'myElement' est l'élément parent que vous avez déjà. "sonClassName" est la classe de l'enfant que vous recherchez.

let child = myElement.querySelector('.sonClassName');

Pour plus d'informations, visitez: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

1
Hamza Dahmoun

Voici une solution récursive relativement simple. Je pense qu'une première recherche en profondeur est appropriée ici. Cela retournera le premier élément correspondant à la classe trouvée.

function getDescendantWithClass(element, clName) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].className &&
            children[i].className.split(' ').indexOf(clName) >= 0) {
            return children[i];
         }
     }
     for (var i = 0; i < children.length; i++) {
         var match = getDescendantWithClass(children[i], clName);
         if (match !== null) {
             return match;
         }
     }
     return null;
}
1
Jer

Mise à jour de juin 2018 vers ES6

    const doc = document.getElementById('test');
    let notes = null;
    for (const value of doc) {
        if (value.className === '4') {
            notes = value;
            break;
        }    
    }
0
Christopher Grigg

La façon dont je vais faire cela en utilisant jquery est quelque chose comme ça ..

var targetchild = $ ("# test"). children (). find ("span.four");

0
Marselus Chia