wake-up-neo.com

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

Funktionieren getElementsByClassName (und ähnliche Funktionen wie getElementsByTagName und querySelectorAll) genauso wie getElementById oder geben sie ein Array von Elementen zurück?

Der Grund, den ich frage, ist, dass ich versuche, den Stil aller Elemente mit getElementsByClassName zu ändern. Siehe unten.

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';
119
dmo

Ihr getElementById() Code funktioniert, da IDs eindeutig sein müssen und die Funktion daher immer genau ein Element zurückgibt (oder null, falls keines gefunden wurde).

Jedoch getElementsByClassName() , querySelectorAll() und andere getElementsBy*-Methoden geben eine Array-ähnliche Auflistung von Elementen zurück. Iterieren Sie darüber wie bei einem echten Array:

var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = '100px';
}

Wenn Sie etwas kürzeres bevorzugen, ziehen Sie die Verwendung von jQuery in Betracht:

$('.myElement').css('size', '100px');
131
ThiefMaster

Sie verwenden ein Array als Objekt. Der Unterschied zwischen getElementbyId und getElementsByClassName besteht darin, dass:

  • getElementbyId gibt Ihnen ein Objekt zurück.
  • getElementsByClassName gibt ein Array zurück.

getElementsByClassName

Die getElementsByClassName(classNames) -Methode akzeptiert eine Zeichenfolge, die eine ungeordnete Menge eindeutiger, durch Leerzeichen getrennter Token enthält, die Klassen darstellen. Beim Aufruf muss die Methode ein aktives NodeList -Objekt zurückgeben, das alle Elemente im Dokument enthält, die alle in diesem Argument angegebenen Klassen aufweisen, und die Klassen durch Aufteilen eines Strings auf Leerzeichen erhalten hat. 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.

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

in deinem Code die Zeilen:

1- document.getElementsByClassName ('myElement'). Style.size = '100px';

wird [~ # ~] nicht [~ # ~] wie erwartet funktionieren, da das getElementByClassName ein Array zurückgibt und das Array [~ # ~ ] nicht [~ # ~] die Eigenschaft style haben, können Sie auf jedes element zugreifen, indem Sie sie durchlaufen.

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 Eigenschaft style zugreifen.

15
Alvaro Joao

Die folgende Beschreibung stammt aus diese Seite :

Die Methode getElementsByClassName () gibt eine Auflistung aller Elemente im Dokument mit dem angegebenen Klassennamen als NodeList-Objekt zurück.

Das NodeList-Objekt repräsentiert eine Auflistung von Knoten. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.

Tipp: Mit der Eigenschaft length des NodeList-Objekts können Sie die Anzahl der Elemente mit einem angegebenen Klassennamen bestimmen. Anschließend können Sie alle Elemente durchlaufen und die gewünschten Informationen extrahieren.

Als Parameter würde getElementsByClassName also 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 würde var menuItems = document.getElementsByClassName('menuItem') eine Sammlung (kein Array) der 3 oberen <div> zurückgeben, da sie mit dem angegebenen Klassennamen übereinstimmen.

Sie können dann über die Auflistung dieser Knoten (in diesem Fall <div>) Iterieren mit:

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

Weitere Informationen zu Unterschieden zwischen Elementen und Knoten finden Sie in diesem Beitrag .

11
remdevtec

ES6 bietet die Methode Array.from() , mit der eine neue Array-Instanz aus einem Array-ähnlichen oder iterierbaren Objekt erstellt wird .

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 im Code-Snippet sehen können, können Sie nach der Verwendung von Array.from() function über jedes Element manipulieren.


Dieselbe 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>
8
kind user

Mit anderen Worten

  • document.querySelector() wählt nur das erste Element des angegebenen Selektors aus. Es wird also kein Array ausgespuckt, sondern ein einzelner Wert. Ähnlich wie document.getElementById(), das nur ID-Elemente abruft, 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 document.getElementsByClassName() nur für Klassen und document.getElementsByTagName() Tags.


Warum wird querySelector verwendet?

Es wird lediglich zum Zwecke der Einfachheit und Kürze verwendet.


Warum getElement/sBy verwenden? *

Schnellere Leistung.


Warum dieser Leistungsunterschied?

Beide Auswahlmöglichkeiten haben den Zweck, eine Knotenliste zur weiteren Verwendung zu erstellen. querySelectors generiert eine statische NodeList mit den Selektoren, daher muss diese zuerst von Grund auf neu erstellt werden.
getElement/sBy * passt die vorhandene Live-NodeList des aktuellen DOM sofort an.

Wann Sie welche Methode anwenden müssen, hängt von Ihnen, Ihrem Projekt und Ihrem Gerät ab.


Infos

Demo aller Methoden
NodeList Documentation
Leistungstest

6
Thielicious

Es wird eine Array-ähnliche Liste zurückgegeben.

Sie machen das ein Array als Beispiel

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);  
4
atilkan

Sie könnten ein einzelnes Element erhalten, indem Sie ausführen

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 zu verwenden

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});
4
Sergey
/*
 * To hide all elements with the same class, 
 * use looping to reach each element with that class. 
 * In this case, looping is done recursively
 */

const hideAll = (className, i=0) => {
if(!document.getElementsByClassName(className)[i]){ //exits the loop when element of that id does not exist
  return; 
}

document.getElementsByClassName(className)[i].style.visibility = 'hidden'; //hide element
return hideAll(className, i+1) //loop for the next element
}

hideAll('appBanner') //the function call requires the class name
4
Irina Mityugova

Mit ES5 + (alle aktuellen Browsing-Versionen - 2017) sollten Sie in der Lage sein, dies zu tun

[].forEach.call(document.getElementsByClassName('answer'), function(el) {
    el.style.color= 'red';
});
0