Do getElementsByClassName
(und ähnliche Funktionen wie getElementsByTagName
und querySelectorAll
) Arbeit die gleiche wie getElementById
oder kehren sie eine Reihe von Elementen?
Der Grund, den ich frage, ist, dass ich versuche, den Stil aller Elemente mit zu ändern getElementsByClassName
. Siehe unten.
//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';
//works
document.getElementById('myIdElement').style.size = '100px';
getElementsByClassName()
impliziert einen Plural, währendgetElementById()
ein singuläres Elementelement impliziert wird.Antworten:
Ihr
getElementById()
Code funktioniert, da IDs eindeutig sein müssen und die Funktion daher immer genau ein Element zurückgibt (odernull
wenn keines gefunden wurde).Jedoch
getElementsByClassName()
,querySelectorAll()
und anderegetElementsBy*
Methoden ein Array artige Sammlung von Elementen. Iterieren Sie darüber wie bei einem echten Array:Wenn Sie etwas kürzeres bevorzugen, sollten Sie jQuery verwenden :
quelle
<iframe>
was auch Teil Ihrer Domain istquerySelectorAll()
und Sie können einen schönen Kurzcode ohne eine große Abhängigkeit der alten Schule haben.qSA(".myElement").forEach(el => el.style.size = "100px")
Vielleicht soll der Wrapper einen Rückruf erhalten.qSA(".myElement", el => el.style.size = "100px")
Sie verwenden ein Array als Objekt. Der Unterschied zwischen
getElementbyId
undgetElementsByClassName
besteht darin, dass:getElementbyId
gibt ein Element-Objekt oder null zurück, wenn kein Element mit der ID gefunden wirdgetElementsByClassName
gibt eine Live-HTMLCollection zurück , möglicherweise mit der Länge 0, wenn keine übereinstimmenden Elemente gefunden werdengetElementsByClassName
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname
getElementById
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
in Ihrem Code die Zeilen:
wird nicht wie erwartet funktionieren , weil das
getElementByClassName
ein Array wird wiederkommen , und das Feld wird NICHT die habenstyle
Eigenschaft können Sie jeden Zugriffelement
durch sie durch Iterieren.Aus diesem Grund hat die Funktion
getElementById
für Sie funktioniert. Diese Funktion gibt das direkte Objekt zurück. Daher können Sie auf die Unterkunft zugreifenstyle
.quelle
Die folgende Beschreibung stammt von dieser Seite :
Als Parameter
getElementsByClassName
würde also ein Klassenname akzeptiert.Wenn dies Ihr HTML-Text ist:
var menuItems = document.getElementsByClassName('menuItem')
würde dann eine Sammlung (kein Array) der 3 oberen<div>
s zurückgeben, da sie mit dem angegebenen Klassennamen übereinstimmen.Sie können dann über diese Knotensammlung (
<div>
in diesem Fall die Sammlung) iterieren mit:Weitere Informationen zu Unterschieden zwischen Elementen und Knoten finden Sie in diesem Beitrag .
quelle
ES6 bietet eine
Array.from()
Methode, mit der eine neue Array-Instanz aus einem Array-ähnlichen oder iterierbaren Objekt erstellt wird.Wie Sie im Code-Snippet sehen können, können Sie nach Verwendung der
Array.from()
Funktion jedes Element bearbeiten.Die gleiche Lösung mit
jQuery
.quelle
Mit anderen Worten
document.querySelector()
wählt nur das erste ein Element des angegebenen Selektor. Es wird also kein Array ausgespuckt, sondern ein einzelner Wert. Ähnlich wie beimdocument.getElementById()
Abrufen nur ID-Elemente, da IDs eindeutig sein müssen.document.querySelectorAll()
Wählt alle Elemente mit dem angegebenen Selektor aus und gibt sie in einem Array zurück. Ähnlich wie nurdocument.getElementsByClassName()
für Klassen unddocument.getElementsByTagName()
Tags.Warum querySelector verwenden?
Es wird nur zum Zweck der Leichtigkeit und Kürze verwendet.
Warum getElement / sBy verwenden? *
Schnellere Leistung.
Warum dieser Leistungsunterschied?
Beide Auswahlmöglichkeiten haben den Zweck, eine NodeList zur weiteren Verwendung zu erstellen . querySelectors generiert eine statische NodeList mit den Selektoren, daher muss sie zuerst von Grund auf neu erstellt werden.
getElement / sBy * passt die vorhandene Live-NodeList des aktuellen DOM sofort an.
Wann Sie welche Methode verwenden müssen, liegt bei Ihnen / Ihrem Projekt / Ihrem Gerät.
Infos
Demo aller Methoden
NodeList Dokumentation
Leistungstest
quelle
Es gibt eine Array-ähnliche Liste zurück.
Sie machen das zu einem Array als Beispiel
quelle
Sie könnten ein einzelnes Element erhalten, indem Sie ausführen
Aber es wird für das erste Element mit der Klasse .myElement funktionieren.
Wenn Sie dies für alle Elemente mit der Klasse anwenden möchten, empfehle ich Ihnen, diese zu verwenden
quelle
quelle
Mit ES5 + (heutzutage alle durchsucht - 2017) sollten Sie dazu in der Lage sein
quelle
Eine Antwort auf Drenziis speziellen Fall ...
Sie können eine Funktion erstellen, die für jedes der
word
Elemente funktioniert, und die Nummer des Elements übergeben, das Sie transformieren möchten, z.quelle