Cosa restituiscono i metodi querySelectorAll, getElementsByClassName e altri getElementsBy *?

getElementsByClassName (e funzioni simili come getElementsByTagName e querySelectorAll ) funzionano come getElementById o restituiscono un array di elementi?

Il motivo per cui lo chiedo è perché sto cercando di cambiare lo stile di tutti gli elementi usando getElementsByClassName . Vedi sotto.

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

Il codice getElementById() funziona poiché gli ID devono essere univoci e quindi la funzione restituisce sempre esattamente un elemento (o null se non è stato trovato nessuno).

Tuttavia, getElementsByClassName() , querySelectorAll() e altri metodi getElementsBy* restituiscono una raccolta di elementi di tipo array. Scorrilo sopra come faresti con un vero array:

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

Se preferisci qualcosa di più breve, considera l'utilizzo di jQuery :

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

Stai utilizzando un array come object, la differenza tra getElementbyId e getElementsByClassName è la seguente:

  • getElementbyId ti restituirà un object.
  • getElementsByClassName ti restituirà un array.

getElementsByClassName

Il getElementsByClassName(classNames) accetta una stringa che contiene un insieme non ordinato di token separati separati getElementsByClassName(classNames) spazio che rappresentano le classi. Quando chiamato, il metodo deve restituire un object NodeList che contiene tutti gli elementi nel documento che hanno tutte le classi specificate in tale argomento, dopo aver ottenuto le classi dividendo una stringa in spazi. Se non ci sono token specificati nell’argomento, il metodo deve restituire un NodeList vuoto.

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

Il metodo getElementById () accede al primo elemento con l’id specificato.

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

nel tuo codice le linee:

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

NON funzionerà come previsto, cos il getElementByClassName restituirà un array e la matrice NON avrà la proprietà style , accederai ad ogni element iterandolo.

Ecco perché la funzione getElementById funzionato per te, questa funzione ti restituirà l’object diretto e così potrai accedere alla proprietà di style .

La seguente descrizione è tratta da questa pagina :

Il metodo getElementsByClassName () restituisce una raccolta di tutti gli elementi nel documento con il nome di class specificato, come object NodeList.

L’object NodeList rappresenta una raccolta di nodes. È ansible accedere ai nodes mediante numeri di indice. L’indice inizia da 0.

Suggerimento: è ansible utilizzare la proprietà length dell’object NodeList per determinare il numero di elementi con un nome class specificato, quindi è ansible scorrere tutti gli elementi e estrarre le informazioni desiderate.

Quindi, come parametro getElementsByClassName accetterebbe un nome di class.

Se questo è il tuo corpo HTML:

     

then var menuItems = document.getElementsByClassName('menuItem') restituirebbe una raccolta (non una matrice) dei 3 superiori

s, poiché corrispondono al nome della class data.

È quindi ansible eseguire iterazioni su questa raccolta di nodes (

s in questo caso) con:

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

Si prega di fare riferimento a questo post per ulteriori informazioni sulle differenze tra elementi e nodes.

ES6 fornisce il metodo Array.from() , che crea una nuova istanza Array da un object di tipo array o iterable.

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

In altre parole

  • document.querySelector() seleziona solo il primo elemento del selettore specificato. Quindi non sputa un array, è un valore singolo. Simile a document.getElementById() che recupera solo gli elementi ID, poiché gli ID devono essere univoci.

  • document.querySelectorAll() seleziona tutti gli elementi con il selettore specificato e li restituisce in una matrice. Simile a document.getElementsByClassName() per le classi e per i tag document.getElementsByTagName() .

Perché usare querySelector?

È usato solo per il solo scopo di facilità e brevità.

Perché usare getElement / sBy? *

Prestazioni più veloci.

Perché questa differenza di prestazioni?

Entrambi i metodi di selezione hanno lo scopo di creare un NodeList per un ulteriore utilizzo. querySelectors genera un NodeList statico con i selettori, quindi deve essere prima creato da zero.
getElement / sBy * adatta immediatamente l’attuale NodeList corrente del DOM corrente.

Quindi, quando utilizzare il metodo, dipende da te / dal tuo progetto / dal tuo dispositivo.

informazioni

Demo di tutti i metodi
Documentazione NodeList
Test della prestazione

Restituisce un elenco di tipo Array.

Rendi tale una matrice come esempio

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

Puoi ottenere un singolo elemento eseguendo

 document.querySelector('.myElement').style.size = '100px'; 

ma funzionerà per il primo elemento con class .myElement.

Se desideri applicare questo per tutti gli elementi con la class che ti suggerisco di usare

 document.querySelectorAll('.myElement').forEach(function(element) { element.style.size = '100px'; }); 

Con ES5 + (qualsiasi navigabile al giorno d’oggi – 2017) dovresti essere in grado di farlo

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