Primeros pasos con DOM

marcado HTML

entrada de ejemplo:

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>

Salida del elemento DOM:

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------ 

Todos los elementos anteriores se heredan de la interfaz HTMLElement y se personalizan según la etiqueta específica

Empezando

El DOM (Document Object Model) es la interfaz de programación para documentos HTML y XML, define la estructura lógica de los documentos y la forma en que se accede y manipula un documento.

Los principales implementadores de la API DOM son los navegadores web. Las especificaciones están estandarizadas por los grupos W3C y WHATWG, y el modelo de objeto especifica la lógica modelo para la interfaz de programación.

La representación de la estructura DOM se parece a una vista de árbol, donde cada nodo es un objeto que representa una parte del marcado, dependiendo del tipo cada elemento también hereda funcionalidades específicas y compartidas.

Se eligió el nombre “Modelo de objeto de documento” porque es un “modelo de objeto” en el sentido tradicional del diseño orientado a objetos: los documentos se modelan usando objetos, y el modelo abarca no solo la estructura de un documento, sino también el comportamiento de un documento y los objetos que lo componen. En otras palabras, tomando el diagrama HTML de ejemplo, los nodos no representan una estructura de datos, representan objetos, que tienen funciones e identidad. Como modelo de objetos, el modelo de objetos del documento identifica:

  • las interfaces y objetos utilizados para representar y manipular un documento
  • semántica de estas interfaces y objetos, incluidos el comportamiento y los atributos
  • las relaciones y colaboraciones entre estas interfaces y objetos

Espere a que se cargue DOM

Recuperando elementos html existentes

Una de las tareas más comunes es recuperar un elemento existente del DOM para manipularlo. Por lo general, estos métodos se ejecutan en documento, porque es el nodo raíz, pero todos estos métodos funcionan en cualquier elemento HTML del árbol. Solo devolverán elementos secundarios del nodo en el que se ejecuta.

Recuperar por id

var element = document.getElementById("logo");

element contendrá el (único) elemento que tiene su atributo id establecido en “logo”, o contiene null si no existe tal elemento. Si existen varios elementos con este ID, el documento no es válido y puede pasar cualquier cosa.

Recuperar por nombre de etiqueta

var elements = document.getElementsByTagName("a");

elements contendrá un live HTMLCollection (un objeto similar a una matriz) de todas las etiquetas de enlace en el documento. Esta colección está sincronizada con el DOM, por lo que cualquier cambio realizado en el DOM se refleja en esta colección. La colección proporciona acceso aleatorio y tiene una longitud.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene el primer elemento de enlace HTML encontrado, o null si el índice está fuera de los límites

var length = elements.length;

longitud es igual al número de elementos de enlace HTML actualmente en la lista. Este número puede cambiar cuando se cambia el DOM.

Recuperar por clase

var elements = document.getElementsByClassName("recipe");

elements contendrá una HTMLCollection en vivo (un objeto similar a una matriz) de todos los elementos donde su atributo class incluye “receta”. Esta colección está sincronizada con el DOM, por lo que cualquier cambio realizado en el DOM se refleja en esta colección. La colección proporciona acceso aleatorio y tiene una longitud.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene el primer elemento HTML encontrado con esta clase. Si no existen tales elementos, elemento tiene el valor indefinido en el primer ejemplo y null en el segundo ejemplo.

var length = elements.length;

longitud es igual al número de elementos HTML que actualmente tiene la clase “receta”. Este número puede cambiar cuando se cambia el DOM.

Recuperar por nombre

var elements = document.getElementsByName("zipcode");

elements contendrá un live NodeList (un objeto similar a una matriz) de todos los elementos con su atributo name establecido en “zipcode”. Esta colección está sincronizada con el DOM, por lo que cualquier cambio realizado en el DOM se refleja en esta colección. La colección proporciona acceso aleatorio y tiene una longitud.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene el primer elemento HTML encontrado con este nombre.

var length = elements.length;

longitud es igual al número de elementos HTML que actualmente tienen “código postal” como su atributo de nombre. Este número puede cambiar cuando se cambia el DOM.

Usar HTML interno