navegación HTML DOM
A través del DOM HTML, que son capaces de utilizar el nodo en el árbol de navegación relación nodo.
lista de nodos HTML DOM
getElementsByTagName () devuelve una lista de nodos. lista de nodos es un conjunto de nodos.
El documento siguiente código seleccionado todos <p> nodo:
Ejemplos
Se puede acceder por la siguiente etiqueta. Para acceder a la segunda <p>, se puede escribir:
Trate »
Nota:
Bajo la etiqueta comienza a 0.
Lista de nodos DOM HTML Longitud
atributo de longitud define el número de nodos en la lista de nodos.
Puede utilizar la propiedad de longitud de la lista de nodos de bucle:
Ejemplos
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
Trate »
ejemplos de análisis:
- Obtenga toda <p> nodo de elemento
- El valor de salida de cada elemento <p> del nodo de texto
relación nodo de navegación
Puede utilizar tres atributos de nodo: parentNode, firstChild y lastChild, navegar a través de la estructura del documento.
Considere el siguiente fragmento de HTML:
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
- El primer elemento <p> es el primer hijo del elemento <body> (firstChild)
- <Div> es el último elemento secundario <body> (lastChild)
- <Body> es el primer elemento <p> y <div> nodo padre del elemento (parentNode)
propiedad firstChild se puede utilizar para acceder a los elementos del texto:
Ejemplos
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Trate »
nodo raíz DOM
Hay dos atributos especiales, puede acceder a toda la documentación:
- document.documentElement - todos los documentos
- document.body - cuerpo del documento
Ejemplos
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
Trate »
childNodes y nodeValue
Además de la propiedad innerHTML, también puede utilizar los childNodes y la propiedad nodeValue para obtener el contenido del elemento.
El código siguiente obtiene el id = "intro" los <p> valores de los elementos:
Ejemplos
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
Trate »
En el ejemplo anterior, getElemenById es un método, mientras que childNodes y nodeValue son propiedades.
En este tutorial, vamos a utilizar la propiedad innerHTML. Sin embargo, el método de aprendizaje por encima de ayuda para navegar por la estructura de árbol DOM y comprensión.