La navegación DOM

Aquí, vamos a aprender sobre la DOM (Document Object Model) de navegación utilizando HTML y JavaScript .

Sabemos que cada vez que un navegador web carga una página web, que presta un DOM HTML que es un árbol-como la estructura de datos que se manipula usando JavaScript. Este árbol es genérico y por lo general se llama el árbol de nodos, donde cada elemento HTML DOM representa un nodo. A partir de cualquier nodo de azar en el árbol de nodos se puede recorrer el árbol y llegar a cualquier otro nodo mediante las relaciones nodo del árbol. Estas relaciones definen las relaciones entre los diversos elementos HTML en la página web.

En este artículo, vamos a ver cómo podemos navegar por el DOM mediante la utilización de la relación entre varios nodos en el árbol de nodos.

familiarizar a la dejamos con algunas normas establecidas por el W3C DOM. El documento completo que las cargas del navegador es en sí mismo un nodo y se llama el nodo documento. Dentro de este documento o en virtud de este nodo de documento, diversas ramas apuntan hacia otros nodos que son los nodos de elemento HTML. Cualquier texto o contenido incrustado en estas etiquetas HTML es los nodos de texto.

The DOM Navigation - 4

En cuanto a este sencillo DOM en el ejemplo, seguir adelante y crear un archivo similar index.html con el siguiente HTML,

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Events in DOM</title>
</head>
<body>
<a href="">some link</a>
<h1>Hello world</h1>
</body>
<script>
</script>
</html>

salida

The DOM Navigation - 5

Sabemos que los nodos en el árbol de tener una relación jerárquica por lo que podemos deducir fácilmente las relaciones árbol de nodos que eventualmente ayuda para recorrer el DOM. Las mayoría de las relaciones nodo del árbol común son padres, hijos y hermanos.

Nuestra nodo de documento es el nodo raíz y tiene dos hijos, la & lt; head & gt; y la & lt; body & gt; . Este nodo de documento es el nodo raíz, así como el nodo padre class sus niños & lt; head & gt; y & lt; body & gt; . El & lt; head & gt; tiene un & lt; title & gt; que es de nuevo un nodo hijo class la & lt; head & gt; , siendo el nodo padre class su nodo de texto niño.

El & lt; body & gt; es la class nodo padre que es dos niños & lt; a & gt; y & lt; h1 & gt; . Estos nodos en los propios niños son hermanos entre sí y son nodos padre class de contenido de texto o nodos de sus hijos.

Bien ahora vamos a navegar por el DOM utilizando estas relaciones que hemos definido.

vamos a obtener una referencia a la & lt; head & gt; y & lt; body & gt; primero.

<script>
const head = document.querySelector('head');
const body = document.querySelector('body');
console.log('head: ', head);
console.log('body: ', body);
</script>

salida

head:  <head>…</head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="styles.css"><title>Events in DOM</title></head>
body: <body cz-shortcut-listen="true">…</body>
<a href>some link</a><h1>Hello world</h1><!-- Code injected by live-server --><script type="text/javascript">…</script><script>…</script></body>

Nos conseguir & lt; head & gt; junto con todos sus descendientes y & lt; body & gt; junto con todos sus descendientes.

Si queremos acceder a los hijos de & lt; head & gt; .

console.log('Children of head:',head.children);

salida

Child of head: HTMLCollection(5) [meta, meta, meta, link, title, viewport: meta]

Alternativamente podemos llegar a la & lt; head & gt; de & lt; title & gt; por conseguir una referencia a & lt; title & gt; y pidiendo que for del elemento padre.

const title=document.querySelector('title');
console.log('parent of title: ',title.parentElement);

salida

parent of title:  <head> ... </head>

Sabemos que tanto & lt; a & gt; y & lt; h1 & gt; son hijos de & lt; body & gt; y tienen una relación de hermanos entre sí. Vamos a obtener una referencia a & lt; a & gt; y vaya a & lt; h1 & gt; el uso de su relación de hermanos.

const link=document.querySelector('a');
console.log('Link: ',link);
console.log('Sibling of <a> :',link.nextElementSibling);

salida

Link:  <a>some link</a>
Sibling of <a> : <h1>Hello world</h1>

mismo modo podemos obtener una referencia a & lt; h1 & gt; y vaya a & lt; a & gt; .

const heading=document.querySelector('h1');
console.log('Heading: ',heading);
console.log('Sibling of <h1> :',heading.previousElementSibling);

salida

Heading:  <h1>Hello world</h1>
Sibling of <h1> : <a>some link</a>

También podemos encadenar estas relaciones en conjunto para navegar por el DOM. try de Let navegar a & lt; h1 & gt; de la & lt; title & gt; .

En primer lugar, obtenemos el elemento padre de & lt; title & gt; que nos dará & lt; head & gt; , ir a ella del siguiente hermano que es & lt; body & gt; , ir a ella de los niños que nos class una serie de niños que tienen & lt; a & gt; y & lt; h1 & gt; y simplemente acceder al & lt; h1 & gt; usando el árbitro del índice de la matriz niños.

console.log('From <title> to <h1>: ',title.parentElement.nextElementSibling.children[1])

salida

From <title> to <h1>:  <h1>Hello world</h1>

Por lo tanto, podemos navegar fácilmente por el DOM utilizando el árbol DOM y crear nodos linfáticos, borrar, añadir los niños a los nodos existentes y hacer todo tipo de cosas con JavaScript.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *