dom
Vamos a explicar los elementos de estructura de HTML con el siguiente ejemplo simple:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Título de la Página</title>
</head>
<body>
<h1 id="principal">Encabezado nivel 1</h1>
<p>Er zijn vele variaties van passages van Lorem Ipsum beschikbaar maar
het merendeel heeft te lijden gehad van wijzigingen in een of andere vorm,
door ingevoegde humor of willekeurig gekozen woorden die nog niet half
geloofwaardig ogen.
</p>
</body>
</html>Todos los documentos HTML deben empezar con el tipo de documento:
<!DOCTYPE html>La anterior estructura tiene la etiqueta raíz html y está dividida en dos secciones:
- Head: contenedor con todas las etiquetas de configuración de estilos (css), archivos javascript y metadata como el título de la página y la codificación de caracteres utilizada.
- Body: contenedor de todas las etiquetas visuales de la página: títulos, hipervínculos, imágenes, tablas, formularios, etc.
Por cada uno de los elementos del archivo existe una marca html para definirlo, como, por ejemplo: <title>, <header>, <article>, <section>, <p>, <div>, <span>, <img>, <table> y otros más. Cada marca abre y debe cerrar. Para indicar cierre se escribe la marca antecedida de /.
En el listado anterior, las dos últimas líneas son la marca de cierre para </body> y luego, una marca de cierre para </html>.
El documento estará bien construido si su estructura es arborescente. La representación en árbol del listado anterior es:
 |
|---|
| Figura 1 |
Esta estructura arborescente se llama el DOM (Document Object Model) y puede ser manipulado programáticamente, es decir, existe un API para manipular el DOM y cada uno de sus elementos. El DOM es independiente de la plataforma y del lenguaje de programación(hay un API por cada lenguaje en particular hay uno para JavaScript/TypeScript) para manipular el DOM
Los dos conceptos principales del DOM son Document y Element. EL árbol de la figura 1 es un Document y cada nodo es un HTMLElement.
El API DOM nos provee servicios para:
- encontrar un o unos elemento(s) en el documento. Por ejemplo, encontrar el primer elemento que tiene etiqueta h1.
- modificar un elemento. Por ejemplo, cambiar el contenido del primer párrafo (etiqueta p).
- crear nuevos elementos. Por ejemplo, crear un nuevo párrafo (etiqueta p).
La documentación oficial del API aquí. En este tutorial vamos a ver algunos servicios básicos.
Dado un nodo del árbol DOM, a partir de ese punto se puede buscar un/unos elemento/s utilizando las siguientes funciones:
| Función | Descripción |
|---|---|
| getElementById() | Devuelve el elemento que tiene el atributo ID con el valor especificado. |
| getElementsByClassName() | Devuelve una colección HTMLCollection que contiene todos los elementos con el nombre de clase especificado. |
| getElementsByName() | Devuelve una colección HTMLCollection que contiene todos los elementos con el nombre especificado. |
| getElementsByTagName() | Devuelve una colección HTMLCollection que contiene todos los elementos con el nombre de la etiqueta especificada. |
Veamos un ejemplo utilizando nuestro HTML inicial representado en el árbol de la figura 2.
var nodoH1 = document.getElementById("principal");
console.log(nodoH1.innerText); // Encabezado nivel 1nodoH1.innerText = "Hola mundo contaminado";
console.log(nodoH1.innerText); // Hola mundo contaminado