English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico de JavaScript

Objeto de JavaScript

Función de JavaScript

JS HTML DOM

BOM del navegador JS

Tutorial básico de AJAX

Manual de referencia de JavaScript

Navegación JS DOM

HTML DOM permite que JavaScript navegue por el árbol de nodos utilizando relaciones de nodos.

Nodos DOM

De acuerdo con W3C HTML DOM estándar, todo el contenido del documento HTML es un nodo:

  • Todo el documento es un nodo de documento

  • Cada elemento HTML es un nodo de elemento

  • El texto dentro de un elemento HTML es un nodo de texto

  • Cada atributo HTML es un nodo de atributo (no se recomienda su uso)

  • Todas las anotaciones son nodos de anotación

Utilizando HTML DOM, se puede acceder a todos los nodos en el árbol de nodos con JavaScript.

Se pueden crear nuevos nodos y se pueden modificar o eliminar todos los nodos.

Relaciones de nodos

Los nodos entre el árbol de nodos tienen una relación jerárquica.

Los términos 'padre', 'hijo' y 'hermano' se utilizan para describir las relaciones.

  • En el árbol de nodos, el nodo superior se llama raíz (o nodo raíz)

  • Cada nodo tiene un solo nodo padre, excepto el nodo raíz (el nodo raíz no tiene nodo padre)

  • Un nodo puede tener múltiples nodos hijos

  • Los hermanos (hermanos) son nodos que tienen el mismo nodo padre

<html>
　　<head>
<title>Tutorial　DOM</title>
　　</head>
　　
<h1>Nodos　DOM</h1>
<p>Hola,　Mundo</p>
　　
</html>

Desde el HTML superior, puede leerse:
<html>是根节点，并且没有父节点
<html>是<head>和<body>的父级
<head>是<html>的第一个孩子
<body>是<html>的最后一个孩子
和：
<head>有一个孩子：<title>
<title>有一个孩子（一个文本节点）：“ DOM Tutorial”
<body>有两个孩子：<h1>和<p>
<h1>有一个孩子（一个文本节点）：“ DOM Nodes”
<p>有一个孩子（一个文本节点）：“ Hello，world”
<h1>和<p>是同级

在节点之间导航

您可以使用以下节点属性在具有JavaScript的节点之间导航：

访问子节点

Puede usarfirstChildDOM节点的属性来访问节点的第一个直接子节点。

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName);　//　returns SPAN
</script>
测试看看 ‹/›

注意：在上面的示例中，输出将是#text，因为插入了文本节点以维护标记之间的空白。任何空格都会创建一个#text节点，从单个空格到多个空格，返回，制表符等。

但是，如果删除空格，则不会插入#text节点，并且span元素将成为段落的第一个子元素：

<p id="para"><span>First span</span>  <b>First Bold</b></p>
<script>
var para = document.getElementById("para");
alert(para.firstChild.nodeName);　//　returns SPAN
</script>
Prueba a ver‹/›

访问第一个孩子也可以这样进行：

para.childNodes[0].nodeName;　//　returns SPAN
Prueba a ver‹/›

Puede usarlastChildDOM节点的属性来访问节点的最后一个直接子节点。

para.lastChild.nodeName;　//　returns B
Prueba a ver‹/›

为避免出现#text或#commentNodofirstChild并lastChild返回该问题，您可以选择使用：

firstElementChild属性返回指定父元素的第一个子元素。

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName);　//　returns SPAN
</script>
Prueba a ver‹/›

lastElementChild属性返回指定父元素的最后一个子元素。

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.lastElementChild.nodeName);　//　returns B
</script>
Prueba a ver‹/›

}}Notas:nodeNamees una propiedad de solo lectura, que devuelve el nombre del nodo actual como cadena.

Acceder al nodo padre

Puede usarparentNodeLa propiedad permite acceder al padre del nodo especificado en el árbol DOM.

<div>
　　　<p>Este es el primer P dentro de DIV</p>
　　　<p id="para">Este es el segundo P dentro de DIV</p>
　　　<p>Este es el tercer P dentro de DIV</p>
</div>
<script>
var para = document.getElementById("para");
alert(para.parentNode.nodeName);　　//　returns DIV
</script>
Prueba a ver‹/›

Además, puede usarparentElementLa propiedad devuelve el elemento padre del elemento especificado.

para acceder a los nodos hermanos

Puede usarpreviousSiblingynextSiblingLa propiedad permite acceder al nodo anterior y siguiente en el árbol DOM.

<div id="div-1">Aquí está div-1</div>
<div id="div-2">Aquí está div-2</div>
<div id="div-3">Aquí está div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>
Prueba a ver‹/›

o, también puede usarpreviousElementSiblingynextElementSiblingpara saltar cualquier nodo de texto en blanco y obtener el elemento hermano siguiente y anterior.

<div id="div-1">Aquí está div-1</div>
<div id="div-2">Aquí está div-2</div>
<div id="div-3">Aquí está div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>
Prueba a ver‹/›

textContentLa propiedad representa el contenido de texto del nodo.

Nodo raíz del DOM

Las siguientes dos propiedades permiten acceder a todo el documento:

document.bodyLa propiedad establece o devuelve el elemento del documento.

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>Nodo raíz del DOM</p>
　　<p>La propiedad 'document.body' establece o devuelve el elemento 'body' del documento.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</html>
Prueba a ver‹/›

document.documentElementLa propiedad devuelve el<html>elemento.

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>Nodo raíz del DOM</p>
　　<p>La propiedad 'document.documentElement' devuelve el elemento raíz del documento.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</html>
Prueba a ver‹/›

Atributo nodeType

nodeTypeLa propiedad se devuelve en forma numérica el tipo de nodo del nodo especificado.

var x = document.getElementById("myPara").nodeType;
Prueba a ver‹/›

El árbol DOM se compone de diferentes tipos de nodos, como elementos, texto, comentarios, etc.

Cada nodo tiene unnodeTypeAtributos, que se pueden usar para encontrar el tipo de nodo que se debe procesar.

La siguiente tabla enumera los tipos de nodos más importantes:

NodoTipoEjemplo
ELEMENT_NODE1Un<p class="heading">Hola, Mundo</p>
ATTRIBUTE_NODE2　class =“heading”（no se recomienda usarlo)
TEXT_NODE3Hola, Mundo
COMMENT_NODE8<!--Esto es un comentario-->
DOCUMENT_NODE9El documento HTML en sí mismo (padre de <html>)
DOCUMENT_TYPE_NODE10<!doctype html>
Objeto modelo de navegador Window en JSCambiar atributos de elementos con JS DOM