querySelector e querySelectorAll vs getElementsByClassName e getElementById in JavaScript

Vorrei sapere qual è esattamente la differenza tra querySelector e querySelectorAll contro getElementsByClassName e getElementById ?

Da questo collegamento ho potuto querySelector che con querySelector posso scrivere document.querySelector(".myclass") per ottenere elementi con class myclass e document.querySelector("#myid") per ottenere elementi con ID myid . Ma posso già farlo getElementsByClassName e getElementById . Quale dovrebbe essere preferito?

Inoltre lavoro in XPages dove l’ID è generato dynamicmente con due punti e assomiglia a questa view:_id1:inputText1 . Quindi quando scrivo document.querySelector("#view:_id1:inputText1") non funziona. Ma la scrittura document.getElementById("view:_id1:inputText1") funziona. Qualche idea, perché?

Vorrei sapere qual è esattamente la differenza tra querySelector e querySelectorAll contro getElementsByClassName e getElementById?

La syntax e il supporto del browser.

querySelector è più utile quando si desidera utilizzare selettori più complessi.

es. Tutti gli elementi della lista discendono da un elemento che è un membro della class foo: .foo li

document.querySelector (“# view: _id1: inputText1”) non funziona. Ma la scrittura document.getElementById (“view: _id1: inputText1”) funziona. Qualche idea, perché?

Il : personaggio ha un significato speciale all’interno di un selettore. Devi fuggire. (Anche il carattere di escape del selettore ha un significato speciale in una stringa JS, quindi devi sfuggire anche a questo).

 document.querySelector("#view\\:_id1\\:inputText1") 

raccolta da Mozilla Documentation:

L’interfaccia NodeSelector Questa specifica aggiunge due nuovi metodi a qualsiasi object che implementa le interfacce Document, DocumentFragment o Element:

querySelector

Restituisce il primo nodo Elemento corrispondente nella sottostruttura del nodo. Se non viene trovato alcun nodo corrispondente, viene restituito un valore nullo.

querySelectorAll

Restituisce un NodeList che contiene tutti i nodes Element corrispondenti nella sottostruttura del nodo o un NodeList vuoto se non vengono trovate corrispondenze.

e

Nota: il NodeList restituito da querySelectorAll() non è querySelectorAll() , il che significa che le modifiche nel DOM non si riflettono nella raccolta. Questo è diverso dagli altri metodi di query DOM che restituiscono gli elenchi dei nodes attivi.

Riguardo alle differenze, c’è un importante nei risultati tra querySelectorAll e getElementsByClassName : il valore restituito è diverso. querySelectorAll restituirà una raccolta statica, mentre getElementsByClassName restituisce una raccolta live. Ciò potrebbe causare confusione se i risultati vengono archiviati in una variabile per un utilizzo futuro:

  • Una variabile generata con querySelectorAll conterrà gli elementi che hanno soddisfatto il selettore nel momento in cui è stato chiamato il metodo .
  • Una variabile generata con getElementsByClassName conterrà gli elementi che hanno soddisfatto il selettore quando viene utilizzato (che potrebbe essere diverso dal momento in cui è stato chiamato il metodo).

Ad esempio, nota come anche se non hai riassegnato le variabili aux1 e aux2 , esse contengono valori diversi dopo aver aggiornato le classi:

 // storing all the elements with class "blue" using the two methods var aux1 = document.querySelectorAll(".blue"); var aux2 = document.getElementsByClassName("blue"); // write the number of elements in each array (values match) console.log("Number of elements with querySelectorAll = " + aux1.length); console.log("Number of elements with getElementsByClassName = " + aux2.length); // change one element's class to "blue" document.getElementById("div1").className = "blue"; // write the number of elements in each array (values differ) console.log("Number of elements with querySelectorAll = " + aux1.length); console.log("Number of elements with getElementsByClassName = " + aux2.length); 
 .red { color:red; } .green { color:green; } .blue { color:blue; } 
 
Blue
Red
Green

querySelector può essere un completo CSS (3) -Selettore con ID e Classi e Pseudo-Classi insieme in questo modo:

 '#id.class:pseudo' // or 'tag #id .class .class.class' 

con getElementByClassName puoi semplicemente definire una class

 'class' 

con getElementById puoi semplicemente definire un id

 'id' 

Sono venuto su questa pagina solo per scoprire il metodo migliore da usare in termini di prestazioni – cioè che è più veloce:

 querySelector / querySelectorAll or getElementsByClassName 

e ho trovato questo: https://jsperf.com/getelementsbyclassname-vs-queryselectorall/18

Esegue un test sui 2 x esempi di cui sopra, oltre a mandrini in un test per il selettore equivalente di jQuery. i risultati del mio test sono stati i seguenti:

 getElementsByClassName = 1,138,018 operations / sec - <<< clear winner querySelectorAll = 39,033 operations / sec jquery select = 381,648 operations / sec 

querySelector e querySelectorAll sono una API relativamente nuova, mentre getElementById e getElementsByClassName sono stati con noi molto più a lungo. Ciò significa che ciò che utilizzerai dipenderà principalmente dai browser che devi supportare.

Per quanto riguarda:, ha un significato speciale, quindi devi sfuggire se devi utilizzarlo come parte di un nome ID / class.