Come aggiungere attributo all'elemento DOM in JavaScript
Il DOM è la struttura di un documento HTML a partire dal suo elemento radice fino alla fine del documento. Qualsiasi elemento, come "P","div", O "tavolo“, È indicato come elemento DOM. Gli elementi DOM consentono all'utente di modificare il contenuto della pagina Web. Un attributo specifica la raccolta di oggetti. Inoltre, JavaScript fornisce metodi setAttribute () per l'aggiunta o la modifica degli attributi degli elementi DOM. In questo post, abbiamo dimostrato tutti i possibili metodi per aggiungere attributi agli elementi DOM in JavaScript.
- Come aggiungere attributo all'elemento DOM in JavaScript
- Aggiungi attributo all'elemento DOM
- Aggiungi più attributi all'elemento DOM
Come aggiungere attributo all'elemento DOM in JavaScript?
Il metodo setAttribute () viene utilizzato per aggiungere un valore dell'attributo a un elemento esistente. Se l'attributo è già aggiunto, setAttribute () aggiorna il valore. Ci vogliono due input, uno è il nome e il secondo specifica il valore. Caricando la pagina Web, la proprietà Attributo viene applicata agli elementi DOM. La sintassi del metodo setAttribute () è fornita di seguito:
Sintassi
setAttribute (nome, valore)
I parametri sono descritti come segue:
- nome: Si riferisce al nome dell'attributo.
- valore: Specifica il valore dell'attributo.
Esempio 1: Aggiungi un attributo all'elemento DOM
Un esempio è considerato dall'aggiunta di un attributo all'elemento DOM. Il metodo setAttribute () viene utilizzato per aggiungere valore all'attributo. Il codice di esempio è scritto di seguito:
Codice
Esempio per aggiungere attributo all'elemento DOM.
Fai clic sul pulsante per disabilitarlo
La descrizione del codice è fornita di seguito:
- Un pulsante chiamato "Pulsante clic"È allegato e ha un ID univoco"btn".
- Successivamente, questo pulsante è associato al "btn_fn ()" metodo.
- In questo metodo, "getelementbyid"Viene utilizzato per estrarre il"btn" id.
- Finalmente il "setAttribute ()"Il metodo viene impiegato per disabilitare il pulsante passando un vuoto Disabilita il pulsante premendolo.
Produzione
Si osserva che dopo aver premuto il "Pulsante clic", Il valore disabilitato viene passato da"setAttribute ()" metodo.
Esempio 2: aggiungi più attributi all'elemento DOM
Un esempio viene considerato per aggiungere più attributi all'elemento DOM utilizzando il metodo setAttribute () in JavaScript. Il metodo setAttribute () estrae gli elementi DOM di getelementbyid. Successivamente, assegna la proprietà tramite il metodo setAttribute (). Questi attributi includono un pulsante, un collegamento e una proprietà di styling. Ad esempio, il codice è il seguente.
Codice
Esempio di aggiunta di un attributo usando il metodo setAttribute ().
Google.com
La descrizione del codice è fornita nel seguente ordine:
- In primo luogo, un'ancora ""Il tag viene impiegato passando l'ID"collegamento".
- In questo link, "com"Viene passato come testo per la visualizzazione nel browser.
- Un bottone "Aggiungi attributo"È attaccato che è associato a"divertimento()" metodo. IL "func ()"Sarà attivato dal pulsante con il al clic valore.
- IL "setAttribute ()"Il metodo viene utilizzato per prendere"collegamento"Usando"getelementbyid" e un "Href"L'attributo è impostato il cui valore è"https: // www.Google.com/".
- Allo stesso modo, a "stile"L'attributo è impostato il cui valore è "Background-color: Red" Per modificare il colore dello sfondo del testo.
Produzione
In primo luogo, il testo non è cliccabile. Dopo aver premuto il pulsante "Aggiungi attributo", Viene aggiunto un collegamento al testo"Google.com"Che è cliccabile ora e apre la pagina Web associata al collegamento.
Conclusione
Il metodo setAttribute () viene impiegato per l'aggiunta di un attributo agli elementi in JavaScript. Lo stesso metodo aggiorna il valore dell'attributo se l'elemento DOM contiene già l'attributo. Questo post ha dimostrato i metodi per aggiungere attributi agli elementi DOM in JavaScript. Il metodo setAtTribTue () prende un nome e un valore come argomenti. Inoltre, gli utenti possono impostare più attributi su elementi DOM utilizzando JavaScript. Questo articolo dimostra due esempi aggiungendo e modificando il valore dell'attributo dell'elemento DOM in JavaScript.