JavaScript Ottieni elemento per nome - html
In varie situazioni, i programmatori devono ottenere l'elemento HTML con l'attributo Nome. Supponiamo che lo sviluppatore desideri accedere a un controllo del modulo, come un pulsante di opzione o una casella di controllo, al fine di leggere o manipolare il suo valore. Più specificamente, 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 accedere come 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, è possibile accedere a un elemento HTML usando il suo attributo Nome con l'aiuto dei seguenti metodi JavaScript predefiniti:
-
- Metodo getElementsByName ()
- Metodo QuerySelectorall ()
Metodo 1: Ottieni elemento per nome usando il metodo "getElementsByName ()"
Per ottenere l'elemento HTML per nome, usa il “getElementsByName ()" metodo. Questo metodo fornisce una raccolta di elementi che hanno l'attributo nome specificato.
Sintassi
La seguente sintassi viene utilizzata per il metodo getElementsByName ():
documento.getElementsByName ("Nome")
Esempio
In primo luogo, crea sei pulsanti. Cinque di loro hanno un "nome"Attributo che viene utilizzato per ottenere l'elemento HTML"pulsante". Allega l'evento OnClick con il sesto pulsante che chiamerà "Applicastyle ()"Funzione per modellare i cinque pulsanti:
Definire una funzione "Applicastyle ()"Ciò attiverà il clic del pulsante e cambierà il colore di sfondo di tutti i pulsanti. Per fare questo, prima, ottieni tutto "pulsante"Elementi come gruppo chiamando il"getElementsByName ()" metodo:
funzione applicstyle ()
const btns = documento.getElementsByName ("BTN");
btns.foreach (btn =>
btn.stile.background = "cadetBlue";
);
Come puoi vedere nell'uscita mentre fai clic sul pulsante, il colore di sfondo dei cinque pulsanti verrà modificato:
Metodo 2: Ottieni elemento per nome usando il metodo "QuerySelectorall ()"
Puoi anche utilizzare il "QuerySelectorAll ()"Metodo per ottenere elementi usando 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 usando "QuerySelectorAll () " metodo:
documento.QuerySelectorAll ('[name = "n1"]');
Esempio
Nel seguente esempio, cambieremo il colore solo di quei pulsanti il cui nome è "btn1":
Nella funzione definita, chiameremo First Access tutti gli elementi dei pulsanti il cui nome è "btn1"E poi applica lo stile su di esso:
funzione applicstyle ()
const btns = documento.QuerySelectorAll ('[name = "btn1"]');
btns.foreach (btn =>
btn.stile.background = "cadetBlue";
);
L'output fornito indica che solo due pulsanti hanno cambiato il loro colore di sfondo il cui nome è "btn1":
Nota: Se si desidera ottenere un singolo elemento, è consigliabile utilizzare il documento.QuerySelector anziché il documento.QuerySelectorall.
Conclusione
Per ottenere o recuperare un elemento per nome, usa il “getElementsByName ()" o il "QuerySelectorAll ()"Metodi. Il metodo più comunemente ed efficiente utilizzato per ottenere l'elemento per nome è il metodo "getElementsByName ()". Questo post ha illustrato i metodi per recuperare un elemento HTML per nome in JavaScript.