Manipolazione degli elementi HTML attraverso JavaScript

DOM è un acronimo del modello a oggetti documenti e può essere semplicemente descritto come un albero di nodi generato dal browser. JavaScript può essere utilizzato per manipolare i metodi e le proprietà di ciascun nodo aggiunto o elemento HTML. Manipolare gli elementi HTML è anche considerato la caratteristica più utile di JavaScript.

Questo articolo discuterà Manipolando gli elementi HTML Attraverso JavaScript. Spiegheremo anche la procedura per l'aggiunta di elementi HTML, l'aggiunta di elementi HTML, la modifica del contenuto degli elementi HTML, la ricerca e la ricerca di elementi HTML e la rimozione di elementi HTML e i loro nodi figli. Inoltre, gli esempi relativi ad AppendChild (), insertBefore (), proprietà InnerHTML, getElementById (), getElementByClassName (), queRySelectorall (), remove () e removeChild () saranno forniti. Quindi iniziamo!

Come aggiungere elementi HTML tramite JavaScript usando il metodo AppendChild ()

Il metodo JavaScript AppendChild () viene utilizzato per l'aggiunta di un elemento HTML come figlio del nodo genitore specificato. Questo metodo viene utilizzato per spostare gli elementi HTML.

Sintassi di AppendChild () Metodo

parentele.AppendChild (ChildNode);

Qui, il parentele è l'elemento HTML che vogliamo dichiarare come un genitore, mentre il ChildNode è l'elemento HTML appena creato aggiunto al nodo genitore.

Esempio: come aggiungere elementi HTML tramite JavaScript usando il metodo AppendChild ()

In questo esempio, ti mostreremo come usare il "appendChild ()"Metodo per aggiungere gli elementi HTML tramite JavaScript. Prima di tutto, aggiungeremo un'intestazione e un paragrafo usando il

E

Elementi HTML:

Questo è Linuxhint.com

Aggiunta di elementi HTML tramite JavaScript.

Questo è il paragrafo principale.

Questo è il secondo paragrafo.

Nel prossimo passaggio, creeremo un nuovo

elemento "paragrafo"Utilizzando il"createElement ()"Metodo dell'oggetto del documento:

Esegui il programma di cui sopra nel tuo editor di codice preferito o in qualsiasi sandbox di codifica online; Tuttavia, utilizzeremo il JSbin per questo scopo:

Come puoi vedere dall'output di seguito, viene aggiunto un nuovo elemento HTML con il contenuto di testo "Questo è nuovo nodo":

Come aggiungere elementi HTML tramite JavaScript usando il metodo InsertBefore ()

Se si desidera aggiungere un elemento HTML come nodo figlio prima del nodo specificato, è possibile invocare il “insertBefore ()"Metodo JavaScript.

Sintassi del metodo insertMethod ()

parentele.insertBefore (newnode, esistingNode);

Qui, il "newnode"È l'elemento HTML appena creato che si desidera aggiungere,"esistente"È l'elemento prima del quale inserirai il tuo elemento HTML e il"parentele"È l'elemento HTML che hai specificato come nodo genitore.

Esempio: come aggiungere elementi HTML tramite JavaScript usando il metodo insertBefore ()

Nell'esempio precedente, abbiamo utilizzato il metodo AppendChild () per aggiungere il nuovo elemento HTML come ultimo figlio dell'HTML. Tuttavia, puoi anche usare il javascript "insertBefore ()"Metodo per aggiungere un elemento HTML prima dell'elemento specificato. L'esempio seguente ti insegnerà l'uso di "insertBefore ()" metodo.

In primo luogo, aggiungeremo un'intestazione e alcuni paragrafi come segue:

Questo è Linuxhint.com

Aggiunta di elementi HTML tramite JavaScript.

Questo è il paragrafo principale.

Questo è il secondo paragrafo.

Successivamente, creeremo un nuovo elemento "paragrafo"Elemento HTML, quindi definire un nodo di testo figlio per esso:

L'esecuzione del programma di cui sopra aggiungerà il "paragrafo"HTML prima"P1":

Come modificare il contenuto degli elementi HTML tramite JavaScript utilizzando la proprietà InnerHTML

Il DOM HTML consente di modificare il contenuto HTML utilizzando il "Innerhtml" proprietà. IL "Innerhtml"Viene in genere utilizzato nelle pagine Web per generare contenuti HTML dinamici come moduli di commento, moduli di registrazione e collegamenti.

Sintassi della proprietà JavaScript Innerhtml

elemento.InnerHtml = Value

Qui, "elemento"È l'elemento HTML che hai selezionato per modificarne il contenuto e"valore"È il contenuto che imposteremo.

Esempio 1: modifica del contenuto degli elementi HTML tramite JavaScript

Questo esempio ti mostrerà come usare il "Innerhtml"Proprietà JavaScript per modificare il contenuto di un elemento HTML. In primo luogo, aggiungeremo un elemento di intestazione con il

Tag di intestazione e un paragrafo con il

Tag HTML:

Cambia elementi HTML usando JavaScript

Una stringa di prova

Ora vogliamo cambiare il contenuto di "

"Elemento con l'ID"P1". Per fare ciò, utilizzeremo il "documento.Metodo getElementById () "per ottenere l'elemento specificato. Dopodiché, imposteremo il contenuto del nostro

elemento a "Questo è Linuxhint.com":

Abbiamo modificato il contenuto del paragrafo sopra

Dai un'occhiata all'output di seguito, che abbiamo ottenuto dall'esecuzione del programma di cui sopra:

Come trovare e ottenere elementi HTML tramite ID tramite JavaScript

La maggior parte degli sviluppatori JavaScript ha utilizzato il getElementById () Metodo per trovare e ottenere elementi HTML con ID univoci. Se hai superato un ID che non appartiene a nessun elemento HTML, il metodo getElementById () visualizzerà il valore null.

Sintassi del metodo getElementById ()

documento.getElementByID (elementID)

Qui, il "Elementid"Rappresenta l'ID univoco dell'elemento HTML che si desidera trovare e ottenere nel tuo codice JavaScript.

Esempio: trova e ottieni elementi HTML per ID tramite JavaScript

Nel seguente esempio, aggiungeremo elementi HTML come una voce con il

tag e tre elementi di paragrafo con il

etichetta. Si noti che abbiamo anche aggiunto "IDS"Con gli elementi del paragrafo:

Questo è Linuxhint.com

Trova e ottieni elementi HTML di ID in JavaScript

Questo è un programma JavaScript che utilizza il metodo "getElementsbyId"

Nel prossimo passaggio, troveremo e otterremo l'elemento con l'ID "P1"Usando il"documento.getElementById ()" metodo. Dopo Ding SO, cambieremo il contenuto dell'elemento HTML recuperato:

Come trovare e ottenere elementi HTML di ClassName tramite JavaScript

IL "getElementsByClassName ()"Il metodo viene utilizzato per trovare e ottenere elementi HTML con la stessa classe. Quando si tenta di ottenere un elemento HTML utilizzando il nome della classe, l'interprete JavaScript restituirà tutti gli oggetti appartenenti alla stessa classe. Successivamente, puoi eseguire operazioni specifiche su quegli elementi HTML.

Sintassi del metodo getElementsByClassName ()

documento.getElementsByClassName (ClassName)

Qui, il "nome della classe"Rappresenta il nome di classe degli elementi HTML che è necessario trovare e ottenere nel tuo programma.

Esempio: trova e ottieni elementi HTML di ClassName tramite JavaScript

Nell'esempio seguente, abbiamo aggiunto un'intestazione e alcuni elementi di paragrafo con il nome di classe "C1":

Questo è Linuxhint.com

Trova e ottieni elementi HTML per nome di classe in JavaScript

Testo in First ParagrpAh

Testo nel secondo paragrafo

Successivamente, cercheremo gli elementi HTML che hanno "C1"Come la loro classe utilizzando il metodo getElementsByClassName () e memorizzerà le raccolte degli oggetti in"UN":

Ecco l'output che abbiamo ottenuto dall'esecuzione del programma JavaScript di cui sopra:

Come trovare e ottenere elementi HTML mediante selettore CSS tramite JavaScript

In html, il QuerySelectorAll () Il metodo restituisce un oggetto nodelist statico che comprende una raccolta degli elementi figlio di un elemento abbinato ai selettori CSS specificati. I numeri dell'indice vengono utilizzati per trovare e ottenere i nodi, a partire da 0.

Sintassi del metodo QuerySelectorall ()

elemento.QuerySelectorAll (selettori)

Il metodo QuerySelectorall () prende "selettori"Come argomento; Una stringa DOM comprende uno o più selettori CSS validi.

Esempio: Trova e ottieni elementi HTML di CSS Selector tramite JavaScript

Nel programma JavaScript di seguito, abbiamo utilizzato il metodo QuerySelectorall () per trovare e ottenere gli elementi HTML di paragrafo con "C1"Come nome della loro classe:

Questo è Linuxhint.com

Trova e ottieni elementi HTML per nome di classe in JavaScript

Testo in First ParagrpAh

Testo nel secondo paragrafo

Dai un'occhiata all'output del metodo JavaScript QuerySelectorall ():

L'esecuzione del programma JavaScript di cui sopra mostrerà il seguente output:

Come rimuovere gli elementi HTML tramite JavaScript utilizzando il metodo REMME ()

Il javascript "rimuovere()"Il metodo viene utilizzato per l'eliminazione dell'elemento HTML specificato dal modello Object Document (DOM).

Sintassi del metodo Rimuovi ()

nodo.rimuovere()

Qui, "nodo"Rappresenta l'elemento HTML che si desidera eliminare tramite JavaScript.

Esempio: rimuovere gli elementi HTML tramite JavaScript usando il metodo REMME ()

In seguito, abbiamo aggiunto un elemento HTML intestato, un paragrafo

e un elemento che comprende due paragrafi e come nodi figlio:

Questo è Linuxhint.com

Aggiunta di elementi HTML tramite JavaScript.

Questo è il paragrafo principale.

Questo è il secondo paragrafo.

Successivamente, aggiungeremo un pulsante e collegheremo un "al clic" gestore di eventi. Secondo il seguente codice, quando faremo clic su "Rimuovere l'elemento"Pulsante, invocherà il"myFunction ()" metodo:

Rimuovere l'elemento

Nel "myFunction ()"Metodo, in primo luogo, utilizziamo il"documento.getelementbyid"Per trovare l'elemento che vogliamo eliminare specificando il suo"id", Allora invoceremo il"rimuovere()" metodo:

L'output di seguito è indicato "P1"HTML è eliminato dal nostro programma JavaScript con l'aiuto di"rimuovere()" funzione:

Come rimuovere gli elementi HTML figlio tramite JavaScript usando il metodo RemoveChild ()

In JavaScript, il "removechild ()"È utilizzato per l'eliminazione di un nodo HTML figlio specifico da un elemento HTML.

Sintassi del metodo RemoveChild ()

parentele.RemovChild (ChildNode)

Qui, il genitore è l'elemento HTML che abbiamo specificato come "genitore"Node e ChildNode è l'elemento HTML che vogliamo rimuovere dall'elemento genitore.

Rimuovere gli elementi HTML per bambini tramite JavaScript usando il metodo RemoveChild ()

In questo esempio, proveremo a rimuovere l'elemento figlio del nostro elemento HTML definito:

Questo è Linuxhint.com

Aggiunta di elementi HTML tramite JavaScript.

Questo è il paragrafo principale.

Questo è il secondo paragrafo.

Per eliminare un elemento figlio, prima di tutto, devi creare un "genitore"Elemento HTML e specificare l'elemento HTML che agisce come genitore nel codice JavaScript. Nel nostro caso, abbiamo aggiunto "Div1":

Come puoi vedere che l'elemento figlio dell'elemento HTML viene eliminato correttamente:

Conclusione

Il modello di oggetti document (DOM) in JavaScript è un'interfaccia per sviluppatore che consente di manipolare la progettazione, la struttura e il contenuto degli elementi HTML del tuo sito Web. Questo articolo ha discusso di manipolare gli elementi HTML tramite JavaScript. Abbiamo anche spiegato la procedura per l'aggiunta di elementi HTML, l'aggiunta di elementi HTML, la modifica del contenuto degli elementi HTML, la ricerca e l'ottenimento di elementi HTML e la rimozione di elementi HTML e i loro nodi figli. Inoltre, vengono forniti anche gli esempi relativi ad AppendChild (), InsertBefore (), InnerHTML Property, GetElementById (), GetElementsByClassName (), QueRySelectorall (), Rimuovi () e REMOVECHILD ().