1.1 Conceptos básicos del DOM
El Modelo de Objetos del Documento (DOM) es una interfaz de programación para documentos web. Representa la estructura del documento como un árbol de nodos, donde cada nodo es parte del documento, como un elemento, texto, comentario, etc. Entender el DOM y sus nodos es un aspecto fundamental del trabajo con tecnologías web.
Conceptos básicos del DOM
¿Qué es el DOM?
El DOM (Document Object Model) es una estructura jerárquica que describe el contenido de un documento HTML. Permite a los programas y scripts un acceso dinámico al contenido del documento y modificar su estructura, estilo y contenido.
Nodos y elementos
En el contexto del DOM, todas las partes del documento se consideran como nodos (node). Los nodos pueden ser de varios tipos:
- Nodos de elementos: representan las etiquetas HTML.
- Nodos de texto: representan texto dentro de los nodos de elementos.
- Nodos de comentarios: representan comentarios en HTML.
- Nodos de documento: representan el documento en sí.
Árbol de nodos
El DOM es una estructura de árbol donde cada nodo puede tener descendientes (nodos hijos). El nodo raíz es el objeto document, que representa todo el documento HTML.
Ejemplo de estructura DOM:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Para este documento, el árbol DOM se verá como sigue:
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 Tipos de nodos
1. Nodos de elementos
Los nodos de elementos corresponden a las etiquetas HTML. Por ejemplo, el nodo para la etiqueta <body> se llama nodo de elemento.
Ejemplo:
En este ejemplo, <body> y <h1> son nodos de elementos.
<body>
<h1>Hello, World!</h1>
</body>
2. Nodos de texto
Los nodos de texto contienen texto dentro de los nodos de elementos. Los nodos de texto son descendientes de nodos de elementos y contienen datos en forma de cadena.
Ejemplo:
En este ejemplo, el texto "Hello, World!" es un nodo de texto, descendiente del nodo <h1>.
<h1>Hello, World!</h1>
3. Nodos de comentarios
Los nodos de comentarios representan comentarios en HTML, comienzan con <!-- y terminan con -->.
Ejemplo:
En este ejemplo, <!-- This is a comment --> es un nodo de comentario.
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. Nodos de documento
El nodo de documento representa el nodo raíz del árbol DOM y es el nodo padre de todos los demás nodos en el documento.
Ejemplo:
El objeto document en JavaScript representa el nodo de documento:
console.log(document);
1.3 Interacción con nodos DOM
1. Obtener información de nodos
Las propiedades del objeto nodo permiten obtener información sobre un nodo específico. Por ejemplo, se puede saber el tipo de nodo, su nombre y contenido.
Ejemplo:
<html>
<head>
<title>Mi sitio web</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // Mostrará: H1
console.log(heading.nodeType); // Mostrará: 1 (Nodo de elemento)
console.log(heading.textContent); // Mostrará: "¡Hola, mundo!"
2. Modificar contenido de nodos
El contenido de los nodos se puede modificar utilizando las propiedades y métodos del DOM.
Ejemplo:
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated text content';
3. Trabajar con nodos hijos
Cada nodo del DOM puede tener nodos hijos a los que se puede acceder y modificar.
Ejemplo:
<html>
<head>
<title>Mi sitio web</title>
</head>
<body>
<ul>
<li>Sobre nosotros</li>
<li>Carrera</li>
<li>Contacto</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // Mostrará el texto del primer elemento de la lista
console.log(lastItem.textContent); // Mostrará el texto del último elemento de la lista
1.4 Propiedades útiles
1. Propiedades nodeName y nodeType
nodeNamedevuelve el nombre del nodonodeTypedevuelve el tipo del nodo (por ejemplo, 1 para nodos de elementos, 3 para nodos de texto)
Ejemplo:
<html>
<head>
<title>Mi sitio web</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // Mostrará: H1
console.log(element.nodeType); // Mostrará: 1
2. Propiedades textContent e innerHTML
textContentdevuelve o establece el contenido de texto de un nodoinnerHTMLdevuelve o establece el contenido HTML de un nodo
Ejemplo:
<html>
<head>
<title>Mi sitio web</title>
</head>
<body>
<p>Un <b>interesante</b> y <b>útil</b> párrafo!</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // Mostrará el contenido de texto del párrafo
console.log(element.innerHTML); // Mostrará el contenido HTML del párrafo
3. Propiedades parentNode, childNodes, firstChild y lastChild
parentNodedevuelve el nodo padrechildNodesdevuelve una colección de todos los nodos hijosfirstChilddevuelve el primer nodo hijolastChilddevuelve el último nodo hijo
Ejemplo:
<html>
<head>
<title>Mi sitio web</title>
</head>
<body>
<ul>
<li>Sobre nosotros</li>
<li>Carrera</li>
<li>Contacto</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // Mostrará el nodo padre
console.log(element.childNodes); // Mostrará la colección de nodos hijos
console.log(element.firstChild); // Mostrará el primer nodo hijo
console.log(element.lastChild); // Mostrará el último nodo hijo
GO TO FULL VERSION