Was geben die Methoden querySelectorAll und getElementsBy* zurück?

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

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,
getElementsByTagNameund
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 HTMLCollectionaber 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 ArrayS.

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");

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.

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>

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.

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

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

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