Wie erhalte ich ein untergeordnetes Element anhand des Klassennamens?

Ich versuche, die untergeordnete Spanne mit einer Klasse = 4 zu ermitteln. Hier ein Beispielelement:

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

Die Tools, die ich zur Verfügung habe, sind JS und YUI2. Ich kann so etwas machen:

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

//or

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

Diese funktionieren im IE nicht. Ich erhalte die Fehlermeldung, dass das Objekt (doc) diese Methode oder Eigenschaft (getElementsByClassName) nicht unterstützt. Ich habe einige Beispiele für browserübergreifende Implementierungen von getElementsByClassName ausprobiert, konnte sie jedoch nicht zum Laufen bringen und habe trotzdem diesen Fehler erhalten.

Ich denke, was ich brauche, ist ein Cross-Browser getElementsByClassName oder ich muss doc.getElementsByTagName ('span') verwenden und durchlaufen, bis ich Klasse 4 finde. Ich bin mir jedoch nicht sicher, wie ich das machen soll.

Verwenden Sie doc.childNodesdiese Option, um die einzelnen Elemente zu durchlaufen span, und filtern Sie dann diejenige, deren classNameGleichheit 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;
    }        
}

.

Verwenden Sie querySelector und querySelectorAll

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

IE9 und höher

;)

Die akzeptierte Antwort überprüft nur unmittelbare Kinder. Oft suchen wir nach Nachkommen mit diesem Klassennamen.

Manchmal möchten wir auch ein Kind, das einen Klassennamen enthält .

Beispiel: <div class="img square"></div>Sollte mit einer Suche nach Klassenname "img" übereinstimmen, obwohl der genaue Klassenname nicht "img" ist.

Hier ist eine Lösung für beide Probleme:

Suchen Sie die erste Instanz eines untergeordneten Elements mit der Klasse 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;
    }

Verwenden Sie element.querySelector (). Nehmen wir an: 'myElement' ist das übergeordnete Element, das Sie bereits haben. 'sonClassName' ist die Klasse des Kindes, das Sie suchen.

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

Weitere Informationen finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

Du könntest es versuchen:

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

oder

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

Mir scheint, Sie wollen die vierte Spanne. Wenn ja, können Sie dies einfach tun:

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

oder

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

Letzteres stellt sicher, dass es keine versteckten Knoten gibt, die es vermasseln könnten.

Beachten Sie jedoch, dass alte Browser dies nicht unterstützen getElementsByClassName.

Dann können Sie tun

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

Es scheint zu funktionieren, aber beachten Sie, dass eine HTML-Klasse

• Muss mit einem Buchstaben beginnen: AZ oder az
• Kann von Buchstaben (A-Za-z), Ziffern (0-9), Bindestrichen ("-") und Unterstrichen ("_") gefolgt werden.

Verwenden Sie den Namen der ID mit dem getElementById, kein #Zeichen davor. Dann können Sie die spanuntergeordneten Knoten verwenden getElementsByTagNameund sie durchlaufen, um den Knoten mit der richtigen Klasse zu finden:

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

Demo: http://jsfiddle.net/Guffa/xB62U/

Meiner Meinung nach sollten Sie jedes Mal, wenn Sie können, Array und seine Methoden verwenden. Sie sind viel, viel schneller als das gesamte DOM / Wrapper zu durchlaufen oder Dinge in ein leeres Array zu schieben. Die meisten der hier vorgestellten Lösungen können Sie wie hier beschrieben Naive nennen (großartiger Artikel übrigens):

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

Meine Lösung : (Live-Vorschau auf 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
})

Die Art und Weise, wie ich dies mit jquery mache, ist ungefähr so.

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

Hier ist eine relativ einfache rekursive Lösung. Ich denke, eine Breitensuche ist hier angebracht. Dies gibt das erste Element zurück, das der gefundenen Klasse entspricht.

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

Sie können die übergeordnete Klasse abrufen, indem Sie die folgende Zeile hinzufügen. Wenn Sie einen Ausweis hätten, wäre es einfacher mit getElementById. Dennoch,

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

Anschließend können Sie querySelectorAllauf dem übergeordneten <div>Element alle übereinstimmenden divs mit der Klasse abrufen.progress__marker

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

querySelectorAllwird jeden divmit der Klasse von holenprogress__marker

Moderne Lösung

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

Dokumentation

Juni 2018 Update auf ES6

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

YUI2 hat eine browserübergreifende Implementierung vongetElementsByClassName .

Hier ist, wie ich es mit den YUI-Selektoren gemacht habe. Dank des Vorschlags von Hank Gay.

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

Dabei sind vier = Klassenname, span = Elementtyp / Tag-Name und test = übergeordnete ID.

Verwenden Sie YAHOO.util.Dom.getElementsByClassName()von hier .