Come sostituire Nodi figlio in JavaScript

December 21

Come sostituire Nodi figlio in JavaScript


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

istruzione

1 Aprire il documento HTML usando un editor HTML o Notepad.

2 Aggiungere il seguente codice alla sezione "corpo" di quel documento:

<P id = "parent1"> Testo nel nodo padre

<Span id = "child1">

Testo originale nel nodo figlio

</ Span>

</ P>

<Input id = type = valore "Button1 tasto" "" = "button" onclick = "tornare replaceChildNode ()" />

Questo crea un paragrafo. Il suo valore è id "parent1" e la sua legge nel testo, "Testo nel nodo padre." All'interno di questo paragrafo è un arco il cui ID è "child1." Questo arco è un nodo figlio del paragrafo. Il testo in questo nodo bambino legge, "Testo originale nel nodo figlio." Utilizzando il metodo "replaceChild", si sostituire questo nodo figlio con uno nuovo che contiene un 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 denominato "replaceChildNode" alla sezione "testa" del documento:

<Script type = "text / javascript">

Funzione replaceChildNode () {

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

var text = document.createTextNode ( "Nuovo testo in un nuovo nodo figlio");

newChild.appendChild (testo);

var parent = document.getElementById ( "parent1");

var bambino = 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" span "al" createElement metodo ". Le prossime due righe di codice aggiungere del testo a campata. Quel testo si legge," Nuovo testo in un nuovo nodo figlio. " i prossimi due dichiarazioni di ottenere riferimenti al "parent1" e elementi "child1" creato nel corpo. Questi sono gli elementi di paragrafo e span. l'ultima riga 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 dal lasso di sotto di essa. Quel testo nel giro legge, "Testo originale nel nodo figlio."

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

Consigli e avvertenze

  • Questo esempio dimostra sostituire un nodo figlio esistente con un nuovo nodo di testo. Utilizzare il nodo "replaceChild" per sostituire i nodi esistenti con altri tipi di nodi figli pure. Ad esempio, per sostituire il nodo figlio originale con un nuovo nodo costituito da 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 di "bottone": newChild.setAttribute ( "tipo", "bottone"). Quando la funzione JavaScript viene eseguito, esso sostituisce il testo "Testo originale nel nodo figlio" con un pulsante al posto del testo diverso.