
dmo
Machen getElementsByClassName
(und ähnliche Funktionen wie getElementsByTagName
und querySelectorAll
) funktionieren genauso wie getElementById
oder geben sie ein Array von Elementen zurück?
Der Grund, warum ich frage, ist, dass ich versuche, den Stil aller verwendeten Elemente zu ändern getElementsByClassName
. Siehe unten.
//doesn't work
document.getElementsByClassName('myElement').style.size="100px";
//works
document.getElementById('myIdElement').style.size="100px";

DiebMeister
Dein getElementById
Code funktioniert, da IDs eindeutig sein müssen und somit die Funktion immer genau ein Element (bzw null
wenn keiner gefunden wurde).
Allerdings die Methoden
getElementsByClassName
,
getElementsByName
,
getElementsByTagName
und
getElementsByTagNameNS
gibt eine iterierbare Sammlung von Elementen zurück.
Die Methodennamen geben den Hinweis: getElement
impliziert Singularwohingegen getElements
impliziert Plural-.
Die Methode querySelector
gibt auch ein einzelnes Element und zurück querySelectorAll
gibt eine iterierbare Sammlung zurück.
Die iterierbare Sammlung kann entweder a NodeList
oder ein HTMLCollection
.
getElementsByName
und querySelectorAll
beide angegeben sind, um a zurückzugeben NodeList
; das andere getElementsBy*
Methoden angegeben sind, um an zurückzugeben HTMLCollection
aber bitte beachten Sie, dass einige Browserversionen dies anders implementieren.
Diese beiden Sammlungstypen bieten nicht die gleichen Eigenschaften wie Elemente, Knoten oder ähnliche Typen; deswegen lesen style
aus document.getElements
…(
…)
scheitert. Mit anderen Worten: a NodeList
oder ein HTMLCollection
hat kein style
; nur ein Element
hat ein style
.
Diese „Array-ähnlichen“ Sammlungen sind Listen, die null oder mehr Elemente enthalten, die Sie durchlaufen müssen, um darauf zugreifen zu können. Sie können sie zwar ähnlich wie ein Array durchlaufen, beachten Sie jedoch, dass dies der Fall ist unterschiedlich von Array
S.
In modernen Browsern können Sie diese Iterables mit in ein richtiges Array konvertieren Array.from
; dann kannst du verwenden forEach
und andere Array-Methoden, zB Iterationsmethoden:
Array.from(document.getElementsByClassName("myElement"))
.forEach((element) => element.style.size = "100px");
In alten Browsern, die das nicht unterstützen Array.from
oder die Iterationsmethoden, die Sie weiterhin verwenden können Array.prototype.slice.call
. Dann können Sie darüber iterieren, wie Sie es mit einem echten Array tun würden:
var elements = Array.prototype.slice
.call(document.getElementsByClassName("myElement"));
for(var i = 0; i < elements.length; ++i){
elements[i].style.size = "100px";
}
Sie können auch über iterieren NodeList
oder HTMLCollection
selbst, aber seien Sie sich bewusst, dass dies in den meisten Fällen diese Sammlungen sind lebend (MDN-Dokumente, DOM-Spez), dh sie werden aktualisiert, wenn sich das DOM ändert. Wenn Sie also während einer Schleife Elemente einfügen oder entfernen, stellen Sie sicher, dass Sie nicht versehentlich einige Elemente überspringen oder eine Endlosschleife erstellen. Die MDN-Dokumentation sollte immer darauf hinweisen, ob eine Methode eine Live-Sammlung oder eine statische zurückgibt.
Zum Beispiel ein NodeList
bietet einige Iterationsmethoden wie z forEach
in modernen Browsern:
document.querySelectorAll(".myElement")
.forEach((element) => element.style.size = "100px");
Eine einfache for
Schleife kann auch verwendet werden:
var elements = document.getElementsByClassName("myElement");
for(var i = 0; i < elements.length; ++i){
elements[i].style.size = "100px";
}
Es gibt einige Bibliotheken wie jQuery die die DOM-Abfrage etwas kürzer machen und eine Abstraktionsebene über „einem Element“ und „einer Sammlung von Elementen“ erstellen:
$(".myElement").css("size", "100px");

Alvaro Joäo
Sie verwenden ein Array als Objekt, der Unterschied zwischen getElementbyId
und
getElementsByClassName
ist das:
getElementbyId
wird ein zurückgeben Elementobjekt oder null, wenn kein Element mit der ID gefunden wird
getElementsByClassName
wird a zurückgeben Live-HTMLCollectionmöglicherweise der Länge 0, wenn keine passenden Elemente gefunden werden
getElementsByClassName
Die getElementsByClassName(classNames)
-Methode akzeptiert eine Zeichenfolge, die einen ungeordneten Satz eindeutiger, durch Leerzeichen getrennter Token enthält, die Klassen darstellen. Beim Aufruf muss die Methode ein Live zurückgeben
NodeList
Objekt, das alle Elemente im Dokument enthält, die alle in diesem Argument angegebenen Klassen haben, nachdem die Klassen durch Aufteilen einer Zeichenfolge in Leerzeichen erhalten wurden. Wenn im Argument keine Token angegeben sind, muss die Methode eine leere NodeList zurückgeben.
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname
getElementById
Die Methode getElementById() greift auf das erste Element mit der angegebenen ID zu.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
in deinem Code die Zeilen:
1- document.getElementsByClassName(‘myElement’).style.size=”100px”;
Wille NICHT funktionieren wie erwartet, denn die getElementByClassName
wird ein Array zurückgeben, und das Array wird NICHT habe den style
Eigenschaft, können Sie auf jede zugreifen element
indem Sie sie durchlaufen.
Deshalb die Funktion getElementById
für Sie gearbeitet hat, gibt diese Funktion das direkte Objekt zurück. Daher können Sie auf die zugreifen style
Eigentum.

netter Benutzer
ES6 bietet Array.from()
-Methode, die eine neue Array-Instanz aus einem Array-ähnlichen oder iterierbaren Objekt erstellt.
let boxes = document.getElementsByClassName('box');
Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));
.box {
width: 50px;
height: 50px;
margin: 5px;
background: blue;
display: inline-block;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
Wie Sie nach der Verwendung im Code-Snippet sehen können Array.from()
Funktion können Sie dann jedes Element manipulieren.
Die gleiche Lösung mit jQuery
.
$('.box').css({'background':'green'});
.box {
width: 50px;
height: 50px;
margin: 5px;
background: blue;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Typsigner
Die nachfolgende Beschreibung ist entnommen aus diese Seite:
Die Methode getElementsByClassName() gibt eine Sammlung aller Elemente im Dokument mit dem angegebenen Klassennamen als NodeList-Objekt zurück.
Das NodeList-Objekt repräsentiert eine Sammlung von Knoten. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Tipp: Sie können die length-Eigenschaft des NodeList-Objekts verwenden, um die Anzahl der Elemente mit einem angegebenen Klassennamen zu bestimmen, dann können Sie alle Elemente durchlaufen und die gewünschten Informationen extrahieren.
Also als Parameter getElementsByClassName
würde einen Klassennamen akzeptieren.
Wenn dies Ihr HTML-Text ist:
<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>
dann var menuItems = document.getElementsByClassName('menuItem')
würde eine Sammlung (kein Array) der 3 oberen zurückgeben <div>
s, da sie mit dem angegebenen Klassennamen übereinstimmen.
Sie können dann über diese Knoten iterieren (<div>
s in diesem Fall) Sammlung mit:
for (var menuItemIndex = 0 ; menuItemIndex < menuItems.length ; menuItemIndex ++) {
var currentMenuItem = menuItems[menuItemIndex];
// do stuff with currentMenuItem as a node.
}
Weitere Informationen zu den Unterschieden zwischen Elementen und Knoten finden Sie in diesem Beitrag.

Thielisch
Mit anderen Worten
-
document.querySelector()
wählt nur die erste aus ein Element des angegebenen Selektors. Es spuckt also kein Array aus, es ist ein einzelner Wert. Ähnlich zu document.getElementById()
die nur ID-Elemente abruft, da IDs eindeutig sein müssen.
-
document.querySelectorAll()
wählt alle Elemente mit dem angegebenen Selektor und gibt sie in einem Array zurück. Ähnlich zu document.getElementsByClassName()
für Klassen u document.getElementsByTagName()
nur Tags.
Warum querySelector verwenden?
Es wird lediglich aus Gründen der Einfachheit und Kürze verwendet.
Warum getElement/sBy verwenden?*
Schnellere Leistung.
Warum dieser Leistungsunterschied?
Beide Arten der Auswahl haben den Zweck, eine Knotenliste zur weiteren Verwendung.
querySelectors generiert eine statische NodeList mit den Selektoren, daher muss diese zunächst von Grund auf neu erstellt werden.
getElement/sBy* passt sofort die vorhandene Live-NodeList des aktuellen DOM an.
Wann Sie welche Methode verwenden, liegt also bei Ihnen / Ihrem Projekt / Ihrem Gerät.
Infos
Demo aller Methoden
NodeList-Dokumentation
Leistungstest

JJJ
Sie könnten ein einzelnes Element erhalten, indem Sie laufen
document.querySelector('.myElement').style.size="100px";
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 die Verwendung
document.querySelectorAll('.myElement').forEach(function(element) {
element.style.size="100px";
});

atilkan
Es gibt eine Array-ähnliche Liste zurück.
Sie machen das als Beispiel zu einem Array
var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);
9870900cookie-checkWas geben die Methoden querySelectorAll und getElementsBy* zurück?yes
Der Hinweis liegt, sehr viel, im Namen:
getElementsByClassName()
impliziert einen Plural, wohingegengetElementById()
impliziert ein Einzelelementelement.– David Thomas
21. Mai 2012 um 23:20 Uhr
Ich verstehe, dass es für mich einfach keinen Sinn ergab, dass Sie nicht alle Elemente mit diesem Klassennamen mit dem obigen Code ändern können, anstatt ein Array durchlaufen zu müssen. Der jquery-Weg ist viel besser, ich war nur neugierig auf den js-Weg
– dmo
22. Mai 2012 um 4:34 Uhr
Könnte auch nützlich sein: stackoverflow.com/questions/3871547/…
– kappa
31. Juli 2014 um 9:19 Uhr