logo

QuerySelector JavaScript

Il querySelector è un metodo JavaScript che svolge un ruolo fondamentale nella ricerca degli elementi.

In questa sezione comprenderemo e discuteremo il metodo querySelector(), il suo utilizzo e esamineremo anche un esempio per comprendere praticamente il concetto del metodo querySelector().

Presentazione del metodo JavaScript querySelector()

Un metodo di interfaccia degli elementi che ci consente di cercare e restituire il primo elemento all'interno del documento. Trova l'elemento che corrisponde a uno qualsiasi dei selettori o gruppi di selettori CSS specificati. Tuttavia, se non viene trovato alcun elemento corrispondente, restituisce null. Il metodo querySelector() è il metodo solo dell'interfaccia Document. Un'interfaccia di documento è un'interfaccia che descrive i metodi comuni e le proprietà di qualsiasi documento html, XML o qualsiasi altro tipo di documento.

In che modo il metodo querySelector() esegue la ricerca

Sappiamo che esistono diversi tipi di ricerche che possono essere utilizzate per cercare elementi. Tuttavia, il metodo querySelector() utilizza preordine approfondito attraversamento dei nodi del documento. In esso, l'attraversamento inizia con il primo elemento nel markup del documento e poi attraversa i nodi sequenziali in ordine del numero di nodi figli.

come scaricare video da youtube vlc

Sintassi

 element = document.querySelector(selectors); 

Il metodo querySelector() è un metodo di interfaccia del documento e quindi ha tale sintassi.

Ha un parametro, 'selettori', che è una stringa DOM e ha uno o più selettori CSS validi.

Tipo di reso

Potrebbe restituire 'null' se non viene trovata alcuna corrispondenza e se il primo elemento corrisponde ai selettori CSS specificati (se presenti), restituirà quell'elemento.

stringa Java in JSON

Tuttavia, se non è presente alcun selettore CSS valido, verrà generata un'eccezione 'SyntaxError'.

Ora, prima di esaminare un esempio di implementazione, dovremmo conoscere i vari tipi di selettori CSS. Se non sei a conoscenza, visita il nostro https://www.javatpoint.com/css-selector sezione del tutorial CSS.

Quindi, implementeremo ora un esempio in cui tratteremo un selettore CSS e manterremo il suo primo valore di elemento utilizzando il metodo querySelector ().

Implementazione di querySelector() Esempio

Di seguito è riportato un esempio di codice che ci farà comprendere il funzionamento del metodo querySelector():

 class=&apos;colors&apos;&gt;Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll (&apos;p&apos;); console.log(e); 

Ora puoi vedere la differenza tra il codice che nel primo esempio abbiamo utilizzato il metodo querySelector() e ha restituito solo il primo valore del selettore corrispondente. Ma, quando osservi l'output di questo secondo esempio, vedrai che ha restituito tutti i valori corrispondenti dei selettori o del gruppo di selettori specificati. L'output del codice precedente è mostrato di seguito:

QuerySelector JavaScript

Spiegazione del codice

  • Il codice sopra è una combinazione di html e JavaScript.
  • Abbiamo implementato diversi selettori CSS nel codice.
  • Nella sezione JavaScript, abbiamo utilizzato un metodo querySelectorAll () e invocato un selettore di elementi CSS.
  • Pertanto, il metodo querySelectorAll () ora si sposta sul codice per attraversarlo utilizzando il metodo di preordine Depth-first e restituisce tutti i valori degli elementi corrispondenti specificati come parametri del metodo querySlectorAll ().

Quindi, allo stesso modo, possiamo usare il metodo querySelectorAll () anche per i vari altri tipi di selettori CSS, e restituirà tutti i valori corrispondenti dei selettori specificati come argomento. Per implementare il metodo, sostituire il metodo querySelector() con il metodo querySelectorAll() per vari selettori e il metodo troverà la corrispondenza e restituirà almeno un valore corrispondente dell'elemento specificato.