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.
quelle
querySelectorAll
von IE 8+ unterstützt, während ergetElementsByClassName
nur von IE 9+ unterstützt wird. Wenn Sie IE 7 löschen können, können Sie es sicher verwendenquerySelectorAll('.4')
. Übrigens4
ist ein ungültiger Klassenname.document.querySelectorAll
ist DOM und hat nichts mit YUI zu tunAntworten:
Verwenden Sie
doc.childNodes
diese Option, um die einzelnen Elemente zu durchlaufenspan
, und filtern Sie dann diejenige, derenclassName
Gleichheit4
:.
quelle
className
:if(doc.childNode[i].className.match("\s*" + search_class + "\s*")
Dabei ist die Variablesearch_class
der Klassenname, nach dem Sie suchen.Verwenden Sie querySelector und querySelectorAll
IE9 und höher
;)
quelle
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
quelle
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.
Weitere Informationen finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
quelle
let child = myElement.querySelector('sonClassName');
in meinem FallDu könntest es versuchen:
oder
quelle
Mir scheint, Sie wollen die vierte Spanne. Wenn ja, können Sie dies einfach tun:
oder
Letzteres stellt sicher, dass es keine versteckten Knoten gibt, die es vermasseln könnten.
quelle
TagName
das ist es! So einfach..firstChild
und.firstChildElement
obwohlBeachten Sie jedoch, dass alte Browser dies nicht unterstützen
getElementsByClassName
.Dann können Sie tun
Es scheint zu funktionieren, aber beachten Sie, dass eine HTML-Klasse
quelle
Verwenden Sie den Namen der ID mit dem
getElementById
, kein#
Zeichen davor. Dann können Sie diespan
untergeordneten Knoten verwendengetElementsByTagName
und sie durchlaufen, um den Knoten mit der richtigen Klasse zu finden:Demo: http://jsfiddle.net/Guffa/xB62U/
quelle
getElementsByTagName
Methode funktioniert in IE 8. Sie wird bereits in IE 5.5 unterstützt. developer.mozilla.org/en-US/docs/DOM/…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 )
quelle
Die Art und Weise, wie ich dies mit jquery mache, ist ungefähr so.
quelle
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.
quelle
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,Anschließend können Sie
querySelectorAll
auf dem übergeordneten<div>
Element alle übereinstimmendendiv
s mit der Klasse abrufen.progress__marker
querySelectorAll
wird jedendiv
mit der Klasse von holenprogress__marker
quelle
Moderne Lösung
Dokumentation
quelle
Juni 2018 Update auf ES6
quelle
YUI2 hat eine browserübergreifende Implementierung von
getElementsByClassName
.quelle
getElementsByClassName
ist eine Methode vonYAHOO.util.Dom
. In Ihrem Fall würde der Anruf ungefähr so aussehenYAHOO.util.Dom.getElementsByClassName('four', 'span', 'test')
. Sie sollten wahrscheinlich die Dokumente lesen, um ein detaillierteres Verständnis der Funktionsweise dieses Aufrufs zu erhalten. Die Kurzversion ist, dass jetzt nachspan
Elementen mit der Klassefour
unter dem DOM-Element mittest
als gesucht wirdid
.get
Aufrufs ist nur ein DOM-Element. YUI verfolgt nicht die Art von "Alles in ein Framework-spezifisches Objekt einwickeln" -Ansatz wie jQuery, und es werden auch keine nativen Objekte wie Prototype gepatcht (habe? Ich habe mich nicht mit Protoype angelegt) in für immer). In dieser Hinsicht ähnelt YUI eher Dojo.Hier ist, wie ich es mit den YUI-Selektoren gemacht habe. Dank des Vorschlags von Hank Gay.
Dabei sind vier = Klassenname, span = Elementtyp / Tag-Name und test = übergeordnete ID.
quelle
Verwenden Sie
YAHOO.util.Dom.getElementsByClassName()
von hier .quelle