QuerySelector Javascript e getElementById [chiuso]

122

Ho sentito che querySelector& querySelectorAllsono nuovi metodi per selezionare gli DOMelementi. Come si confrontano con i metodi precedenti getElementByIde getElementsByClassNamein termini di prestazioni e supporto del browser?

Come si confrontano le prestazioni con l'utilizzo del selettore di query di jQuery?

Esiste un consiglio di best practice per quale set nativo utilizzare?

javascript jquery dom

— goesToEleven
fonte

Definisci meglio. Sono quasi completamente diversi.

È come chiedere "una chiave singola è meglio di una chiave regolabile?" La risposta è: sono più potenti e più flessibili, e così in molte occasioni superiori, ma getElementByIde getElementsByClassNamesono ancora ideali per gli scopi loro nomi descrivono.

— solomeday

Oh, e qS/qSApuò essere utilizzato da qualsiasi contesto di elemento, ma gEBIpuò essere utilizzato solo dal documentcontesto.

getElementByIdcorrisponde agli idattributi per trovare i nodi DOM, durante la querySelectorricerca per selettori. Così, per un selettore non valido esempio <div id="1"></div>, getElementById('1')potrebbe funzionare mentre querySelector('#1')fallirebbe, a meno che non gli si dice che corrisponda al iddell'attributo (ad es querySelector('[id="1"]').

— Samuel Elh

Solo un FYI per chiunque legga questo, ma querySelectore querySelectorAllora sono completamente supportati. caniuse.com/#feat=queryselector

— Telarian,

Risposte:

132

"Better" è soggettivo.

querySelector è la funzionalità più recente.

getElementByIdè supportato meglio di querySelector.

querySelectorè supportato meglio di getElementsByClassName.

querySelectorti permette di trovare elementi con regole che non possono essere espresse con getElementByIdegetElementsByClassName

Devi scegliere lo strumento appropriato per ogni compito.

(In alto, per querySelectorleggere querySelector/ querySelectorAll).

— Quentin
fonte

supporto querySelector: caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden - È improbabile che sia significativo, probabilmente varia da browser a browser.

— Quentin

Risposta molto buona ed ecco alcuni test di benchmark

— angel.bonev

perché per meglio supportate: getElementById> querySelector> getElementsByClassName, perché ho pensato che getElementsByClassNamedovrebbe avere lo stesso livello di supporto, come getElementById?

— Lei Yang

Questa risposta non sembra toccare la differenza tra i metodi, in particolare dal punto di vista delle prestazioni.

— Dror Bar

Le funzioni getElementByIde getElementsByClassNamesono molto specifiche, mentre querySelectore querySelectorAllsono più elaborate. La mia ipotesi è che avranno effettivamente prestazioni peggiori.

Inoltre, è necessario verificare il supporto di ciascuna funzione nei browser a cui si mira. Più è nuovo, maggiore è la probabilità di mancanza di supporto o di "bug" della funzione.

— Thiago Negri
fonte

@thomas il tuo link non è attivo. C'è un collegamento funzionante da qualche parte?

— user5508297

Esistono diverse versioni archiviate: web.archive.org/web/20160108040024/http://jsperf.com/… Ma il test è in realtà molto vecchio (2010), quindi il risultato potrebbe essere molto diverso con motori più moderni.

— thomas

La pagina archiviata è effettivamente dinamica e ti consente di rieseguire il test sul tuo browser corrente. QuerySelectorAll è ancora più lento di circa il 37% sul mio browser. (Chrome 71 - vgy.me/TwGL3o.png ) Vale anche la pena notare che getElementById restituisce un risultato live, il che significa che se modifichi il DOM, la modifica sarà riflessa dal risultato ottenuto da getElementByID (se nell'ambito) mentre nodelist restituito da querySelectorAll è un'istantanea, ad esempio come erano le cose al momento in cui è stata effettuata la chiamata, il risultato non rifletterà le modifiche successive al DOM.

— W.Prins

nodelist ... is not livepotete fornire la documentazione per questo? @ W.Prins entrambi i metodi restituiscono il Elementtipo.

— Maximilian Burszley il

Ah, vedo che ho fatto un errore di battitura, per favore accetta le mie scuse! Avrei dovuto scrivere "getElementsByClassName" dove ho scritto "getElementByID", ad esempio è getElementsByClassName (e simili) che restituisce un set di risultati live ". Infatti sia getElementsByClassName che querySelectorAll restituiscono un NodeList, ma nel primo caso è live, e nel secondo si tratta di una fotografia.

— W.Prins