Wie bekomme ich ein untergeordnetes Element nach Klassenname?

Lesezeit: 6 Minuten

Spyderman4g63

Ich versuche, die untergeordnete Spanne zu erhalten, die eine Klasse = 4 hat. Hier ist 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 tun:

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

//or

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

Diese funktionieren nicht im IE. Ich erhalte eine Fehlermeldung, dass das Objekt (doc) diese Methode oder Eigenschaft (getElementsByClassName) nicht unterstützt. Ich habe einige Beispiele für Cross-Browser-Implementierungen von getElementsByClassName ausprobiert, aber ich konnte sie nicht zum Laufen bringen und habe immer noch diesen Fehler erhalten.

Ich denke, was ich brauche, ist ein browserübergreifendes 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.

Hier ist es: stackoverflow.com/questions/3808808/…

– Mostar

28. August 2012 um 20:11 Uhr
Komischerweise umso mächtiger querySelectorAll wird von IE 8+ unterstützt, während getElementsByClassName wird nur von IE 9+ unterstützt. Wenn Sie IE 7 fallen lassen können, können Sie es sicher verwenden querySelectorAll('.4'). Übrigens, 4 ist ein ungültiger Klassenname.

– Prinzhorn

28. August 2012 um 20:12 Uhr
@paritybit Diese Frage funktioniert nicht, da sie immer noch getElementsByClassName verwendet und ältere Versionen von IE dies anscheinend nicht unterstützen. Bearbeiten: Es tut mir leid, dass es den Tag-Namen verwendet. Das kann funktionieren.

– Spyderman4g63

28. August 2012 um 20:32 Uhr
@Prinzhorn Ich habe das YUI2-Auswahldienstprogramm aus irgendeinem Grund nicht in diesem Produkt verfügbar.

– Spyderman4g63

28. August 2012 um 20:41 Uhr
@ spyderman4g63 Ich habe über nichts YUI2-spezifisches gesprochen. document.querySelectorAll ist DOM und hat nichts mit YUI zu tun

– Prinzhorn

29. August 2012 um 7:48 Uhr

Alberto Clar Brines

Verwenden Sie querySelector und querySelectorAll

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

IE9 und höher

Dies überprüft alle Nachkommen, nicht nur Kinder.

– SUMME1

15. Juni 2020 um 2:12 Uhr
Überprüfen Sie die Kompatibilität unter caniuse.com

– SapuSeven

2. März 2021 um 0:18 Uhr
@ SUMME1 Wenn Sie sich nicht für IE interessierenkönnen Sie das CSS-Pseudoelement verwenden :scope So suchen Sie nach direkten Nachkommen: testContainer.querySelector(':scope > .four')

– SapuSeven

2. März 2021 um 0:24 Uhr
um alle Kinder zu bekommen, die wir verwenden müssen var fourChildNode = testContainer.querySelectorAll('.four');

– Königurr

1. Juni 2021 um 17:54 Uhr

João Silva

Verwenden doc.childNodes durch jeden zu iterieren spanund filtern Sie dann denjenigen, dessen className gleich 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;
    }        
}

Das Problem ist, dass getElementsByClassName in IE8 nicht funktioniert.

– Spyderman4g63

28. August 2012 um 20:27 Uhr
Dieser Code funktioniert nicht, wenn das Element mehr als eine Klasse hat. Beispiel: Wenn Sie nach Elementen mit der Klasse „eins“ suchen und Ihre Elemente die Klasse „eins zwei drei“ haben, wird diese Funktion sie nicht finden.

– Franz Verona

4. Februar 2014 um 11:51 Uhr
@FranVerona Nur aus Neugier, würde ein einfaches “indexOf(‘className’) > -1” das Problem mit mehreren Klassen nicht lösen?

– James Poulose

4. Januar 2015 um 23:33 Uhr
@JamesPoulose, es würde nicht. Erwägen Sie, ein Element auf zwei Klassen festzulegen: klein und größer. thatElement.className würde einen String zurückgeben, der gleich “kleiner größer” ist. Wenn Sie nach einer Klasse mit dem Namen big suchen, wird myElement.className.indexOf(“big”) etwas ungleich minus 1 erzeugen, obwohl dies eigentlich kein Teil der Klasse ist. Wenn Sie 100% Kontrolle über Ihre Klassennamen haben, würde ein solcher Fix funktionieren, es ist nur nicht garantiert, besonders wenn Sie Code schreiben, der mit Code interagiert, über den Sie keine vollständige Kontrolle haben.

– toter Junge

6. Januar 2015 um 21:32 Uhr
Sie sollten einen Regex-Match für verwenden className so: if(doc.childNode[i].className.match("\s*" + search_class + "\s*") wo die Variable search_class ist der gesuchte Klassenname.

– WebWanderer

18. März 2016 um 20:29 Uhr

Augie Gardner

Die akzeptierte Antwort überprüft nur unmittelbar untergeordnete Elemente. Oft suchen wir nach Nachkommen mit diesem Klassennamen.

Außerdem wünschen wir uns das manchmal jedem Kind enthält ein Klassenname.

Zum Beispiel: <div class="img square"></div> sollte mit einer Suche nach className “img” übereinstimmen, obwohl dies der Fall ist genau Klassenname ist nicht “img”.

Hier ist eine Lösung für diese beiden 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;
    }

Nö. ich nicht wollen alle Nachkommen, nur das Kind wie die gestellte Frage.

– Paul Tucher

5. September 2016 um 19:40 Uhr
Welpe. Ihr Kommentar war notwendig. Ich bin froh, dass ich 13 anderen Menschen geholfen habe, die (wie ich) oft nach ähnlichen Antworten suchen, um ihr ähnliches, aber vielleicht komplexeres oder allgemeineres Problem zu lösen.

– Augie Gardner

7. September 2016 um 1:06 Uhr
tnx, ich denke, diese Antwort passt zu mehr Anwendungsfällen

– Boban Stojanovski

14. März 2017 um 14:02 Uhr
Fürs Protokoll, ich hatte beide Anwendungsfälle, Nachkommen etwas häufiger, aber ich bin wegen des untergeordneten Anwendungsfalls hierher gekommen.

– SUMME1

15. Juni 2020 um 2:58 Uhr

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

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

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

Moderne Lösung

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

Dokumentation

Korikulum

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

Christian Jörgensen

Für mich scheint es, als wollten Sie die vierte Spanne. Wenn ja, können Sie einfach Folgendes tun:

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

oder

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

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

Danke, aber es gibt eine variable Anzahl von untergeordneten Elementen.

– Spyderman4g63

28. August 2012 um 20:30 Uhr
Mir schien es, als ob die Frage immer das vierte Spannenkind bekommen sollte, was zu meiner Antwort führte. Ich stimme natürlich zu, dass eine Funktion zum Abrufen eines beliebigen Elementtyps an einem beliebigen Index innerhalb eines anderen Elements besser wäre, aber ich habe die Frage nicht so interpretiert … Wenn ich die Frage erneut lese, sehe ich, dass ich sie jedoch völlig falsch verstanden habe: – )

– Christian Jörgensen

11. August 2013 um 14:58 Uhr
TagName das ist es! So einfach.

– Jacksonkr

21. Januar 2017 um 20:35 Uhr
Ich verwende diese Technik häufig, um das erste Element zu erhalten, zB document.getElementById(“test”).childNodes[0]

– Louise Eggleton

19. Februar 2017 um 12:04 Uhr
@LouiseEggleton da ist .firstChild und .firstChildElement obwohl

– Jakow L

5. September 2019 um 18:10 Uhr

13045600cookie-checkWie bekomme ich ein untergeordnetes Element nach Klassenname?

#ja #Javascript