1. Home
  2. navegación HTML DOM

El mejor tutorial de navegación HTML DOM en 2024. En este tutorial podrás aprender lista de nodos HTML DOM,Ejemplos,Lista de nodos DOM HTML Longitud,Ejemplos,relación nodo de navegación,Ejemplos,nodo raíz DOM,Ejemplos,childNodes y nodeValue,Ejemplos,

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

var x=document.getElementsByTagName("p");

Se puede acceder por la siguiente etiqueta. Para acceder a la segunda <p>, se puede escribir:

y=x[1];

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

x=document.getElementsByTagName("p");

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:

<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

<html>
<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

<html>
<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

<html>
<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.

Hot Tutorials

Contact US

navegación HTML DOM
10/30