In varie situazioni, i programmatori devono ottenere l'elemento HTML dall'attributo name. Supponiamo che lo sviluppatore voglia accedere a un controllo del modulo, come un pulsante di opzione o una casella di controllo, per leggerne o manipolarne il valore. Più in particolare, il “ nome L'attributo ” viene utilizzato per raggruppare i controlli dei moduli correlati e lo stesso nome può essere fornito a molti controlli, consentendo loro di accedervi come un singolo gruppo.
Questo post illustrerà i metodi per recuperare un elemento HTML per nome in JavaScript.
Come ottenere elementi per nome in JavaScript?
In JavaScript, puoi accedere a un elemento HTML utilizzando il suo attributo name con l'aiuto dei seguenti metodi JavaScript predefiniti:
-
- metodo getElementsByName()
- metodo querySelectorAll()
Metodo 1: ottenere l'elemento per nome utilizzando il metodo 'getElementsByName ()'.
Per ottenere l'elemento HTML per nome, utilizzare il ' getElementiPerNome() ' metodo. Questo metodo fornisce una raccolta di elementi che hanno l'attributo name specificato.
Sintassi
La seguente sintassi viene utilizzata per il metodo getElementsByName():
documento.getElementsByName ( 'nome' )
Esempio
Innanzitutto, crea sei pulsanti. Cinque di loro hanno un ' nome ” attributo utilizzato per ottenere l'elemento HTML “ pulsante ”. Allega l'evento onclick con il sesto pulsante che chiamerà il ' applicastile() ” funzione per definire lo stile dei cinque pulsanti:
< pulsante nome = 'btn' > Pulsante pulsante >< pulsante nome = 'btn' > Pulsante pulsante >
< pulsante nome = 'btn' > Pulsante pulsante >
< pulsante nome = 'btn' > Pulsante pulsante >
< pulsante nome = 'btn' > Pulsante pulsante > < fratello >< fratello >
< pulsante al clic = 'applicaStile()' > Clicca qui pulsante >
Definire una funzione ' applicastile() ” che si attiverà al clic del pulsante e cambierà il colore di sfondo di tutti i pulsanti. Per fare questo, per prima cosa procurati tutti i ' pulsante ” elementi come gruppo chiamando il “ getElementiPerNome() ' metodo:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( bn = > {
btn.style.background = 'blu cadetto' ;
} ) ;
}
Come puoi vedere nell'output mentre fai clic sul pulsante, il colore di sfondo dei cinque pulsanti verrà modificato:
Metodo 2: Ottieni elemento per nome utilizzando il metodo 'querySelectorAll ()'.
Puoi anche utilizzare il ' querySelectorAll() ” metodo per ottenere elementi utilizzando il “ nome ” attributo in JavaScript. Questo metodo viene utilizzato per recuperare tutti gli elementi in un documento che corrisponde a un selettore/attributo specificato come classe CSS, id o nome.
Sintassi
La sintassi data viene utilizzata per ottenere l'elemento per nome utilizzando il ' querySelectorAll()' metodo:
document.querySelectorAll ( '[nome='n1']' ) ;
Esempio
Nell'esempio seguente, cambieremo il colore solo di quei pulsanti il cui nome è ' btn1 ”:
< div >< nome pulsante = 'btn' > Pulsante pulsante >
< nome pulsante = 'btn1' > Pulsante pulsante >
< nome pulsante = 'btn' > Pulsante pulsante >
< nome pulsante = 'btn1' > Pulsante pulsante >
< nome pulsante = 'btn' > Pulsante pulsante > < fratello >< fratello >
< pulsante al clic = 'applicaStile()' > Clicca qui pulsante >
div >
Nella funzione definita, chiameremo primo accesso tutti gli elementi del pulsante il cui nome è ' btn1 ' e quindi applicare lo stile su di esso:
const btns = document.querySelectorAll ( '[nome='btn1']' ) ;
btns.forEach ( bn = > {
btn.style.background = 'blu cadetto' ;
} ) ;
}
L'output dato indica che solo due pulsanti hanno cambiato il loro colore di sfondo il cui nome è 'btn1':
Nota: Se vuoi ottenere un singolo elemento, ti consigliamo di utilizzare document.querySelector invece di document.querySelectorAll.
Conclusione
Per ottenere o recuperare un elemento per nome, usa ' getElementiPerNome() ' o il ' querySelectorAll() metodi. Il metodo utilizzato più comunemente ed efficacemente per ottenere l'elemento per nome è il metodo 'getElementsByName()'. Questo post ha illustrato i metodi per recuperare un elemento HTML per nome in JavaScript.