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

J'essaye d'obtenir le span 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 dont je dispose 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. J'obtiens une erreur indiquant que l'objet (doc) ne prend pas en charge cette méthode ou propriété (getElementsByClassName). J'ai essayé quelques exemples d'implémentations multi-navigateurs de getElementsByClassName mais je n'ai pas pu les faire fonctionner et j'ai toujours cette erreur.

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

Utilisez doc.childNodespour parcourir chacun d'eux span, puis filtrez celui dont l' classNameéquivalent 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;
    }        
}

​

Utiliser querySelector et querySelectorAll

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

IE9 et supérieur

;)

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

Aussi, parfois nous voulons n'importe quel enfant qui contient un className.

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

Voici une solution à 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;
    }

Utilisez element.querySelector (). Supposons: «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

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') {
    }
}

Pour moi, il semble que vous vouliez la quatrième travée. Si tel est le cas, vous pouvez simplement le faire:

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

ou

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

Ce dernier garantit qu'il n'y a aucun nœud caché qui pourrait le gâcher.

Mais sachez que les anciens navigateurs ne prennent pas en charge 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];

Cela semble fonctionner, mais sachez qu'une classe HTML

• Doit commencer par une lettre: AZ ou az
• Peut être suivi de lettres (A-Za-z), de chiffres (0-9), de tirets ("-") et de traits de soulignement ("_")

Utilisez le nom de l'identifiant avec le getElementById, aucun #signe devant lui. Ensuite, vous pouvez obtenir les spannœuds enfants en utilisant getElementsByTagName, et les parcourir 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/

À mon avis, chaque fois que vous le pouvez, vous devez utiliser Array et ses méthodes. Ils sont beaucoup, beaucoup plus rapides que de boucler sur tout le DOM / wrapper, ou de pousser des éléments dans un tableau vide. La majorité des solutions présentées ici, vous pouvez appeler Naive comme décrit ici (excellent article btw):

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

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

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

Voici une solution récursive relativement simple. Je pense qu'une recherche en profondeur est appropriée ici. Cela renverra 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;
}

Vous pouvez récupérer la classe parente en ajoutant la ligne ci-dessous. Si vous aviez un identifiant, ce serait plus facile avec getElementById. Toutefois,

var parentNode = document.getElementsByClassName("progress__container")[0];

Ensuite, vous pouvez utiliser querySelectorAllsur le parent <div>pour récupérer tous les divs correspondants avec la classe.progress__marker

var progressNodes = progressContainer.querySelectorAll('.progress__marker');

querySelectorAllira chercher tous divavec la classe deprogress__marker

Solution moderne

const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope > div');

Documentation

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

YUI2 a une implémentation multi-navigateurs degetElementsByClassName .

Voici comment je l'ai fait en utilisant les sélecteurs YUI. Merci à la suggestion de Hank Gay.

notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');

où quatre = nom de classe, span = le type d'élément / nom de la balise et test = l'ID parent.

Utilisez à YAHOO.util.Dom.getElementsByClassName()partir d' ici .