Este artículo describe el uso de JavaScript para nodos de la página web. Compártelo para su referencia. El análisis específico es el siguiente:
1. Conceptos básicos
Esta parte se llama "HTML DOM". El llamado DOM HTML son las reglas de carga de la página web, que es una regla, que es la fórmula básica para las páginas web.
Es decir, todas las páginas web deben escribirse de acuerdo con las reglas de: <html> <body> </body> </html> ... y también cargadas de acuerdo con tales reglas.
El llamado "nodo de página web" también es una explicación popular del "nodo DOM". Por ejemplo, el contenido debajo del nodo HTML es todo el contenido entre <html> </html>, y el contenido debajo del nodo del cuerpo es todo el contenido entre <body> </body>.
HTML DOM estipula de la siguiente manera: 1. Todo el documento es un nodo de documento; 2. Cada etiqueta HTML (que significa <body> <table> y otras etiquetas HTML, en lugar de una etiqueta simple <html>) es un nodo de elemento; 3. El texto contenido en el elemento HTML es un nodo de texto; 4. Cada atributo HTML es un nodo de atributo
Por ejemplo, puede dibujar una página en el siguiente árbol de nodo DOM:
La definición oficial de HTML DOM es la siguiente: HTML DOM es la abreviatura del modelo de objeto de documento HTML, y HTML DOM es un modelo de objeto de documento especialmente aplicado a HTML/XHTML. Las personas familiarizadas con el desarrollo de software pueden entender HTML DOM como una API de página web. Trata cada elemento en la página web como objetos, de modo que los elementos en la página web también se pueden obtener o editar por lenguaje de computadora. Por ejemplo, JavaScript puede usar HTML DOM para modificar dinámicamente las páginas web.
El uso de JavaScript puede controlar fácilmente la adición, eliminación, modificación y búsqueda de nodos de página web para estos nodos DOM.
2. Objetivos básicos
Use JavaScript para agregar, eliminar, modificar y verificar los nodos de las páginas web. En una página web:
1. El botón "Agregar nodo", mientras agrega opciones de nodo en el menú desplegable asociado con el "botón Reemplazar". Si hay 9 nodos en la página web, no se permitirá advertencia ADD y ventana emergente.
2. El botón "Eliminar el último nodo", mientras reduce las opciones de nodo en el menú desplegable asociado con el "botón Reemplazar".
3. El botón "Reemplazar el contenido del nodo", primero seleccione el nodo para operar y luego ingrese el contenido que se reemplazará, y se reemplazará el nodo correspondiente.
4. Si no hay nodos en la página web, no se permitirá la eliminación o el reemplazo, y se dará advertencia emergente.
3. Proceso de producción
Sin configurar ningún entorno, simplemente escriba el siguiente código en la página web. El código específico es el siguiente, y el siguiente se explicará en parte:
Copie el código del código de la siguiente manera: <! DocType html public "-// w3c // pd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/pd/xhtml1 transitional.dtd"> "
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javaScript">
var i = 0;
function createNode () {
if (i <9) {
i ++;
opción var = document.createElement ("opción");
opción.value = i;
opción.innerhtml = "nodo" + I.ToString ();
document.getElementById ("número"). appendChild (opción);
var p = document.createElement ("p");
p.innerhtml = "nodo" + I.ToString ();
document.getElementById ("D"). AppendChild (P);
} demás
alerta ("Estoy bien, hay demasiados nodos, no puedo hacerlo ~");
}
función remOvente () {
if (i> 0) {
i--;
var s = document.getElementById ("número");
S.Removechild (S.Lastchild);
var d = document.getElementById ("d");
d.removechild (d.lastchild);
} demás
alerta ("Sin nodos, eliminar un hilo ~");
/*var ps = d.getElementsByTagName ("P");*/
/*Document.GetElementByid("d").removechild(psima]); */
}
función reemplazar () {
if (i> 0) {
var d = document.getElementById ("d");
var p = document.createElement ("p");
p.innerhtml = document.getElementById ("texto"). Valor;
var PS = D.getElementsBytagName ("P")
D.ReplACECHILD (P, PS [document.getElementById ("número"). Valor - 1]);
} demás
alerta ("Sin nodo, reemplace el hilo ~");
}
</script>
</ablo>
<Body>
<input type = "button" value = "create nodo" onClick = "createenode ()" />
<input type = "button" value = "Eliminar el último nodo" onClick = "removenode ()" />
<select id = "número"> </select>
<input type = "text" id = "text" />
<input type = "button" value = "replaceNode Content" onClick = "replaceNode ()" />
<div id = "d">
</div>
</body>
</html>
1. <body> nodo
Copie el código de la siguiente manera: <Body>
<
<input type = "button" value = "create nodo" onClick = "createenode ()" />
<input type = "button" value = "Eliminar el último nodo" onClick = "removenode ()" />
< ->
<select id = "número"> </select>
<
<input type = "text" id = "text" />
<!-botón x1, igual que el botón x2->
<input type = "button" value = "replaceNode Content" onClick = "replaceNode ()" />
<!-Una capa vacía sin nada, como el nodo principal de <p>, se agregan todos los hijos de este nodo <div>
<div id = "d">
</div>
</body>
2. <vero> nodo
Copie el código de la siguiente manera: <LEAD>
<!-La codificación y el título utilizado por las páginas web no es importante, la clave es la siguiente parte del script JS->
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javaScript">
/*Registra las variables globales de cuántos nodos hay en la página web actual*/
var i = 0;
/*Hay 3 funciones a continuación. Cuando se hace clic en el botón, se llama*/
function createNode () {
/*Si hay menos de 9 nodos en la página web, funcionará, de lo contrario, ventana emergente*/
if (i <9) {
/*Agregar un nodo más para cada registro La variable global i+1*/
i ++;
/*Crear un nodo de opción, y luego su nombre de puntero también es opción*/
opción var = document.createElement ("opción");
/*Declarar el atributo de valor del nodo de opción creado es el valor actual de I, es decir, cuando i = 1, hay nodos infantiles como <opción valor = 1> </opción>. */
/*Algunas páginas web dicen que usar el método setattribute () para establecer atributos, pero personalmente practicado no es fácil de usar*/
opción.value = i;
/*Establezca el texto debajo del nodo de opción. Después de esta declaración, el nodo infantil se convierte en <opción valor = 1> nodo1 </opción>*/
opción.innerhtml = "nodo" + I.ToString ();
/*<select> La ID del nodo principal es el número. Esta declaración requiere que <option value = 1> node1 </option>*/se agreguen al nodo principal en <Eectrect> </select>
document.getElementById ("número"). appendChild (opción);
/*El principio es el mismo que el anterior. Agregue el nodo <p> infantil debajo del nodo principal <iv> y el valor de texto bajo el nodo <p> infantil es el nodo1*/
var p = document.createElement ("p");
p.innerhtml = "nodo" + I.ToString ();
document.getElementById ("D"). AppendChild (P);
} demás
alerta ("Estoy bien, hay demasiados nodos, no puedo hacerlo ~");
}
función remOvente () {
/*Si hay más de 0 nodos en la página web, es decir, hay nodos, y solo la ventana emergente es
if (i> 0) {
/*Para cada reducción del nodo, se registra la variable global I-1 de la página web actual.
i--;
/*Defina el puntero al nodo principal de <select>*/
var s = document.getElementById ("número");
/*Elimine el último nodo secundario debajo del nodo principal de <select>, es decir, <opción>. Si desea eliminar el primero, el parámetro se convierte en s.firstchild*/
S.Removechild (S.Lastchild);
/*El mismo principio que el anterior, elimine el último nodo secundario debajo de la <div> capa*/
var d = document.getElementById ("d");
d.removechild (d.lastchild);
/*Si desea eliminar el octavo <p> Under <Viv>, haga lo siguiente*/
/*PS es un puntero al conjunto de nodo infantil <p>*/
/*var ps = d.getElementsByTagName ("P");*/
/*Document.GetElementByid("d").removechild(psima]); */
} demás
alerta ("Sin nodos, eliminar un hilo ~");
}
función reemplazar () {
/*Si hay más de 0 nodos en la página web, es decir, hay nodos, y solo la ventana emergente es
if (i> 0) {
/*Defina el puntero al nodo principal D*/
var d = document.getElementById ("d");
/*Crear a <p> </p> nodo*/
var p = document.createElement ("p");
/*Obtenga el contenido ingresado en el cuadro de texto y póngalo en el nodo <p> </p>*/
p.innerhtml = document.getElementById ("texto"). Valor;
/*PS es un puntero al grupo de nodo infantil <p> y el grupo de nodos infantiles bajo el nodo principal*Div> Padre*/
var PS = D.getElementsBytagName ("P")
/*Deje que el nodo que acaba de crear reemplace el nodo nth <p> Child en <Viv>, donde n es el valor -1 seleccionado en la lista desplegable ahora. La razón de -1 es que el recuento del conjunto de nodos infantiles y el grupo de niños comienzan desde 0, mientras que nuestro recuento humano comienza desde 1. */
D.ReplACECHILD (P, PS [document.getElementById ("número"). Valor - 1]);
} demás
alerta ("Sin nodo, reemplace el hilo ~");
}
</script>
</ablo>
Espero que este artículo sea útil para la programación de JavaScript de todos.