Cosa querySelectorAll e getElementsBy* metodi di ritorno?

Fare getElementsByClassName (e funzioni simili, come getElementsByTagName e querySelectorAll) funzionano lo stesso come getElementById o restituire un array di elementi?

Il motivo che mi chiedo è perché sto cercando di modificare lo stile di tutti gli elementi utilizzando getElementsByClassName. Vedere di seguito.

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

//works
document.getElementById('myIdElement').style.size = '100px';
  • L’indizio è, molto, nel nome: getElementsByClassName() implica un plurale, mentre getElementById() implica un elemento singolare voce.
  • Lo capisco, è solo che non mi fanno senso che non è possibile modificare tutti gli elementi con lo stesso nome classe utilizzando il codice di cui sopra, invece di dover loop attraverso una matrice. jquery modo è molto meglio, ero solo curioso di sapere su js modo
  • Potrebbe essere utile anche: stackoverflow.com/questions/3871547/…
InformationsquelleAutor dmo | 2012-05-21

 

9 Replies
  1. 129

    Tuo getElementById() codice funziona, dal momento che gli Id devono essere univoci e, quindi, la funzione restituisce sempre esattamente un elemento (o null se nessuno è stato trovato).

    Tuttavia, getElementsByClassName(), querySelectorAll(), e altri getElementsBy* metodi di restituire un array, come la raccolta di elementi. Scorrere su di esso, come si farebbe con una vera e propria matrice:

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

    Se preferite qualcosa di più corto, considerare l’utilizzo di jQuery:

    $('.myElement').css('size', '100px');
    • Non che valgono anche per <iframe> che è anche parte del tuo dominio
    • E ‘ il 2018… Basta creare una funzione wrapper per querySelectorAll() e si può avere un breve codice senza una grande, vecchia scuola di dipendenza. qSA(".myElement").forEach(el => el.style.size = "100px") Forse hanno il wrapper ricevere una callback. qSA(".myElement", el => el.style.size = "100px")
    • “Se invece preferite qualcosa di più corto, considerare l’aggiunta di una vasta raccolta per il progetto” so che il 2012 è stato un momento diverso, ma anche io ho trovato che il bit per essere ridicolo.
  2. 15

    Si utilizza un array come un oggetto, la differenza tra getElementbyId e
    getElementsByClassName è che:

    • getElementbyId si ritorna un oggetto.
    • getElementsByClassName si ritorna un array.

    getElementsByClassName

    Il getElementsByClassName(classNames) metodo accetta una stringa che
    contiene un insieme non ordinato di unico, separati da spazio, gettoni
    che rappresentano le classi. Quando viene chiamato, il metodo deve restituire un live
    NodeList oggetto, contenente tutti gli elementi nel documento che
    hanno tutte le classi specificate in tale argomento, dopo aver ottenuto l’
    classi di dividere una stringa di spazi. Se non ci sono gettoni
    specificato nell’argomento, il metodo deve restituire un vuoto
    NodeList.

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

    getElementById

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

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

    nel codice le righe:

    1 – documento.getElementsByClassName(‘myElement’).stile.size = ‘100px’;

    sarà NON funziona come previsto, perché il getElementByClassName restituirà un array, l’array NON hanno il style proprietà, è possibile accedere a ogni element scorrendo attraverso di loro.

    Ecco perché la funzione getElementById lavorato per voi, questa funzione restituisce l’oggetto diretto. Pertanto, si sarà in grado di accedere al style proprietà.

  3. 11

    La descrizione che segue è tratto da questa pagina:

    Il getElementsByClassName() il metodo restituisce l’insieme di tutti gli elementi del documento con specificato il nome della classe, come un oggetto di NodeList.

    NodeList oggetto rappresenta un insieme di nodi. I nodi possono essere
    accedere numeri indice. L’indice parte da 0.

    Suggerimento: È possibile utilizzare la proprietà length della NodeList oggetto per determinare il numero di elementi con un determinato nome della classe, quindi è possibile scorrere tutti gli elementi ed estrarre le informazioni desiderate.

    Quindi, come parametro getElementsByClassName accetta un nome di classe.

    Se questo è il vostro corpo HTML:

    <div id="first" class="menuItem"></div>
    <div id="second" class="menuItem"></div>
    <div id="third" class="menuItem"></div>
    <div id="footer"></div>

    poi var menuItems = document.getElementsByClassName('menuItem') avrebbe restituito una raccolta (non un array di 3 superiore <div>s, in quanto corrispondono ad una data classe nome.

    È quindi possibile scorrere questa nodi (<div>in questo caso) collezione:

    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 di più sulle differenze tra elementi e nodi.

  4. 8

    ES6 fornisce Array.da() metodo, che crea una nuova istanza di Array di array-like o iterable oggetto.

    JS:

    let boxes = document.getElementsByClassName('box');
    
    Array.from(boxes).forEach(v => v.style.background = 'green');
    console.log(Array.from(boxes));

    CSS:

    .box {
      width: 50px;
      height: 50px;
      margin: 5px;
      background: blue;
      display: inline-block;
    }

    HTML:

    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>

    Come si può vedere all’interno del frammento di codice, dopo l’utilizzo di Array.da() funzione sono quindi in grado di manipolare più di ogni elemento.


    La stessa soluzione che utilizza jQuery.

    JS:

    $('.box').css({'background':'green'});

    CSS:

    .box {
      width: 50px;
      height: 50px;
      margin: 5px;
      background: blue;
      display: inline-block;
    }

    HTML:

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

  5. 6

    In Altre Parole

    • document.querySelector() seleziona solo il primo uno elemento specificato di selezione. Quindi non sputare fuori un array, è un singolo valore. Simile a document.getElementById() che recupera ID-elementi soltanto, poiché gli Id devono essere univoci.

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

    Perché utilizzare querySelector?

    È utilizzato unicamente per il solo scopo di facilità e brevità.

    Perché utilizzare getElement/sBy?*

    Prestazioni più veloci.

    Perché questa differenza di prestazioni?

    Entrambi i modi di selezione ha lo scopo di creare un NodeList per un ulteriore uso.
    querySelectors genera una statico NodeList con i selettori così deve essere creato per la prima volta da zero.

    getElement/sBy* adatta immediatamente il live esistente NodeList di corrente DOM.

    Così, quando usare il metodo a te/il progetto/il tuo dispositivo.

    Infos

    Demo di tutti i metodi

    NodeList Documentazione

    Performance Test

  6. 4

    Restituisce Array-come elenco.

    Fare che una Matrice come esempio

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

    Si potrebbe ottenere un singolo elemento tramite l’esecuzione di

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

    ma sta andando a lavorare per il primo elemento con classe .myElement.

    Se vuoi applicare questo per tutti gli elementi con classe vi suggerisco di utilizzare

    document.querySelectorAll('.myElement').forEach(function(element) {
        element.style.size = '100px';
    });
  8. 4
    /*
     * 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
  9. 0

    Con ES5+ (qualsiasi visto oggi – 2017) si dovrebbe essere in grado di fare

    JS:

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

Lascia un commento