DOM Tutorial
Empezando con DOM

Observaciones

Versiones

Recuperando elementos html existentes

Una de las tareas más comunes es recuperar un elemento existente del DOM para manipularlo. Más comúnmente, estos métodos se ejecutan en un document , porque es el nodo raíz, pero todos estos métodos funcionan en cualquier elemento HTML en el árbol. Solo devolverán hijos 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án una HTMLCollection vivo (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 los cambios realizados en el DOM se reflejan 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 límites

var length = elements.length;

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

Recuperar por clase

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

elements contendrán una HTMLCollection vivo (un objeto similar a una matriz) de todos los elementos donde su atributo de class incluye "receta". Esta colección está sincronizada con el DOM, por lo que los cambios realizados en el DOM se reflejan 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 hay tales elementos, el element tiene el valor undefined en el primer ejemplo y null en el segundo ejemplo.

var length = elements.length;

length es igual al número de elementos HTML que actualmente tienen la clase "receta". Este número puede cambiar cuando se cambia el DOM.

Recuperar por nombre

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

elements contendrán un NodeList vivo (un objeto similar a una matriz) de todos los elementos con su atributo de name establecido en "zipcode". Esta colección está sincronizada con el DOM, por lo que los cambios realizados en el DOM se reflejan 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;

length es igual a la cantidad de elementos HTML que actualmente tienen "código postal" como atributo de nombre. Este número puede cambiar cuando se cambia el DOM.

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 se manipula a 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 el modelo lógico para la interfaz de programación.

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

Se eligió el nombre "Modelo de objetos de documento" porque es un "modelo de objeto" en el sentido de diseño orientado a objetos tradicional: los documentos se modelan utilizando objetos, y el modelo abarca no solo la estructura de un documento, sino también el comportamiento de un documento y los objetos de los que se compone. 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 objeto, el modelo de objeto de documento identifica:

• Las interfaces y objetos utilizados para representar y manipular un documento.
• Semántica de estas interfaces y objetos, incluidos tanto el comportamiento como los atributos.
• Las relaciones y colaboraciones entre estas interfaces y objetos.

Espera a que se cargue el DOM

Use DOMContentLoaded cuando el código <script> que interactúa con DOM se incluye en la sección <head> . Si no se DOMContentLoaded dentro de la DOMContentLoaded llamada DOMContentLoaded , el código arrojará errores como

No se puede leer algo de null

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});

^{https://html.spec.whatwg.org/multipage/syntax.html#the-end}

Alternativa a DOMContentLoaded

Una alternativa (adecuada para IE8 )

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}

^{https://developer.mozilla.org/en/docs/Web/API/Document/readyState}

Usar innerHTML

HTML

<div id="app"></div>

JS

document.getElementById('app').innerHTML = '<p>Some text</p>'

y ahora el HTML se ve así

<div id="app">
    <p>Some text</p>
</div>

Marcado HTML

ejemplo de entrada:

<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 dependiendo de la etiqueta específica