Nwlapcug.com


Come sostituire i nodi figlio in JavaScript



I nodi rendono possibile per le pagine Web di esistere. Gli oggetti su una pagina Web, ad esempio pulsanti, paragrafi e testo sono in realtà elementi chiamati "nodi". Un nodo padre "paragrafo", ad esempio, può contenere un nodo figlio, costituito da un arco. Gli sviluppatori web combinare diversi tipi di nodi su una pagina per creare tutto quello che vedete su Internet. JavaScript consente di sostituire i nodi figlio con quelli nuovi. Questo vi dà la possibilità di rendere le pagine Web morph e modificare in tempo reale come gli utenti di visualizzare le pagine.

Istruzioni

1

Aprire il documento HTML utilizzando un editor HTML o blocco note.

2

Aggiungere il seguente codice alla sezione "corpo" del documento:

< id p = "parent1" > testo nel nodo padre

< span id = "child1" >

Testo originale nel nodo figlio

< / span >

</p >

< id di input = "Button1" type = "button" value = "pulsante" onclick = "return replaceChildNode()" / >

Questo crea un paragrafo. Relativo valore di id è "parent1" e il relativo testo legge, "Testo nel nodo padre." All'interno di questo paragrafo è un arco cui id è "child1." Questo intervallo è un nodo figlio del paragrafo. Legge il testo in questo nodo figlio, "Il testo originale nel nodo figlio." Utilizzando il metodo "replaceChild", si sostituirà questo nodo figlio con uno nuovo che contiene testo diverso. Il pulsante mostrato nell'ultima riga di codice chiama la funzione JavaScript che esegue il metodo "replaceChild".

3

Aggiungere la seguente funzione JavaScript denominata "replaceChildNode" alla sezione "head" del documento:

< script type = "text/javascript" >

Function replaceChildNode() () {

newChild var = document.createElement("span");

var testo = Document. createTextNode ("nuovo testo in un nuovo nodo figlio");

newChild.appendChild(text);

padre di var = document.getElementById("parent1");

bambino di var = document.getElementById("child1");

var val = parent.replaceChild (newChild, bambino);

}

< / script >

La prima riga di codice nella funzione crea un nuovo nodo figlio denominato "newChild." Lo fa utilizzando il metodo "createElement". Questo nuovo nodo figlio è un "arco", perché"il codice passa"abbracciano"il metodo"createElement". Le due righe di codice aggiungono testo all'intervallo. Che legge il testo, "Nuovo testo in un nuovo nodo figlio." Le prossime due istruzioni ottengono riferimenti agli elementi "parent1" e "child1" creati nel corpo. Quelli sono il paragrafo e gli elementi span. La riga finale di codice esegue il metodo "replaceChild" e sostituisce il nodo figlio originale con quello nuovo.

< / script >

4

Salvare il documento e aprirlo in un browser. Si vedrà il testo del paragrafo e il testo dall'oggetto span sotto di essa. Che legge il testo nell'arco, "Testo originale nel nodo figlio."

5

Fare clic sul pulsante. Il codice viene eseguito e sostituisce l'arco con quello nuovo creato nella funzione JavaScript. Il testo sotto il paragrafo cambia in "Nuovo testo in un nuovo nodo figlio."

Consigli & Avvertenze

  • Questo esempio dimostra la sostituzione di un nodo figlio esistente con un nuovo nodo di testo. Utilizzare il nodo "replaceChild" per sostituire i nodi esistenti con altri tipi di nodi figlio pure. Ad esempio, per sostituire il nodo figlio originale con un nuovo nodo che consiste di un pulsante, sostituire la prima riga nella funzione con questo: newChild = document.createElement("input"). Aggiungere la seguente riga sotto quella di impostare il tipo di attributo al "pulsante": newChild.setAttribute ("tipo", "pulsante"). Quando viene eseguita la funzione JavaScript, sostituisce il testo "Testo originale nel nodo figlio" con un pulsante invece di testo diverso.