javascript - Wie erhält man ein Kindelement nach Klassennamen?

Ich versuche, das Kind-Span zu bekommen, das eine Klasse=4 hat. Hier ist ein Beispiel-Element:

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

Die Werkzeuge, 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 nicht in IE. Ich erhalte einen Fehler, dass das Objekt (doc) diese Methode oder Eigenschaft (getElementsByClassName) nicht unterstützt. Ich habe ein paar Beispiele für browserübergreifende Implementierungen von getElementsByClassName ausprobiert, aber ich konnte sie nicht zum Laufen bringen und bekam immer noch diesen Fehler.

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

Antwort #1

Verwenden Sie querySelector und querySelectorAll

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

IE9 und höher

Antwort #2

Verwenden Sie doc.childNodes, um durch jedes span zu iterieren, und filtern Sie dann dasjenige, dessen className gleich 4 ist:

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

Antwort #3

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

Also wollen wir manchmal jedes Kind, das eine className enthält.

Zum Beispiel: <div class="img square"></div> sollte eine Suche nach className "img" finden, auch wenn der exakte className nicht "img" ist.

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

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

Antwort #4

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

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

Für weitere Informationen besuchen Sie: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

Antwort #5

Moderne Lösung

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

Dokumentation

Antwort #6

Du könntest versuchen:

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

oder

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