Selettore Query Javascript

| | | | |

Sia i metodi querySelector che getElementById ti consentono di recuperare un elemento dal JavaScript Document Object Model (DOM). Tuttavia, ogni metodo ha i propri casi d’uso.

In questa guida, analizziamo il caso d’uso più comune di querySelector e getElementById. Confrontiamo anche questi due metodi e ti guidiamo attraverso un esempio di base di come funzionano ciascuno di essi.

Cos’è querySelector?

Il metodo JavaScript querySelector() consente di recuperare un elemento dal DOM, o dalla pagina Web, utilizzando un selettore CSS. Questo metodo viene fornito con una funzione sorella chiamata querySelectorAll() che seleziona tutti gli elementi che corrispondono a un particolare selettore dal DOM.

Questi due metodi sono incredibilmente versatili. Questo perché la sintassi del selettore CSS ti consente di selezionare qualsiasi elemento da una pagina web.

Utilizzando querySelector, non hai preoccuparsi di essere vincolati dalla possibilità di selezionare elementi solo per classe o ID, come faresti se usassi getElementById o getElementsByClassName.

Questi metodi sono particolarmente utili se gli elementi che stai selezionando sono simili a quelli che selezioni nel tuo foglio di stile CSS.

Diamo un’occhiata al metodo querySelector. Inizieremo scrivendo un elemento HTML che possiamo selezionare in seguito in JavaScript:

Abbiamo definito un paragrafo di testo con il nome della classe "accessibilità". Quindi, selezioniamo questo paragrafo utilizzando il metodo querySelector().

Questo codice ci permette di selezionare il primo elemento la cui classe è uguale a "accessibilità". Il "." denota che vogliamo selezionare una classe. Se avessimo due elementi con la classe "accessibilità", potremmo usare il metodo querySelectorAll() per recuperarli entrambi.

Cos’è getElementById?

Il metodo getElementById() recupera un elemento in base al suo Attributo ID, da cui il nome.

Questo metodo è più restrittivo di querySelector perché puoi recuperare solo elementi in base al loro particolare ID.

Utilizza questo se desideri recuperare solo un elemento dalla pagina Web. Questo perché gli ID HTML devono essere univoci per un particolare elemento. Non puoi utilizzare un ID per fare riferimento a due elementi nella pagina Web.

Recuperiamo un elemento utilizzando il selettore getElementById. Innanzitutto, scriviamo il codice HTML da cui selezioneremo un elemento:

Utilizziamo l’istruzione JavaScript per recuperare l’elemento il cui ID è uguale a "comments". Questa è la elemento in cui mostriamo i commenti sulla nostra pagina web.

L’ovvia somiglianza tra questi due metodi è che entrambi selezionano elementi da una pagina web. Lo fanno in modi diversi.

Con un’istruzione querySelector, puoi selezionare un elemento in base a un selettore CSS. Ciò significa che puoi selezionare elementi per ID, classe o qualsiasi altro tipo di selettore. Utilizzando il metodo getElementById, puoi selezionare un elemento solo in base al suo ID.

In genere, dovresti optare per il selettore che esegue più chiaramente il lavoro.

Se hai solo bisogno di selezionare un elemento per ID o classe, puoi usare getElementById o getElementsByClassName, rispettivamente. Se è necessario utilizzare una regola più elaborata per selezionare gli elementi, il metodo querySelector è l’opzione migliore.

Sia querySelector che getElementById fanno parte di JavaScript da un po’ di tempo. Di conseguenza, questi metodi sono entrambi pienamente supportati sui browser moderni.

Conclusione

Il metodo querySelector ti consente di recuperare un elemento utilizzando una query di selezione CSS. Il metodo getElementById recupera un elemento tramite il suo ID DOM.

Entrambi i metodi hanno un ampio supporto per il browser. Dovresti scegliere di utilizzare querySelector se hai bisogno di selezionare elementi usando regole più complesse che sono facilmente rappresentabili usando un selettore CSS. Se vuoi selezionare un elemento in base al suo ID, usare getElementById è una buona scelta.

Ora puoi avere le conoscenze necessarie per sapere quando utilizzare i metodi querySelector e getElementById come un professionista!

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method