Documentación Técnica

Documentación técnica:
DOM
2 de 16
Índice
1. Introducción ………………………………………………………………………………………………….….………...… 5
2. Árbol de nodos ………..…………………………………………………………..………………………..…………… 6
2.1. Tipos de nodos …………………………………………………………………………………………………… 7
2.2. Acceso al DOM ……….………………………………………………………………………………………… 7

2.3. Crear nodos …………………………………………………………………………………………………………10
2.4. Eliminar nodos ………………………………………….……………………………………..…………….…11

2.5. Contenido HTML ………………………………………………………………………………
……………….12
4 de 16
1. Introducción
El Modelo de Objetos de Documento o en inglés Document Object Model (DOM) es

un modelo estándar (creado por la W3C) que nos permite representar un
documento HTML, XHTML y XML. Nos proporciona un interfaz para poder trabajar
y modificar tanto la estructura como el estilo y el contenido de una página web. Lo
que ha influido de una forma definitiva en el desarrollo de páginas web dinámicas.
El diseño de DOM se realizó para que sea independiente del lenguaje de

programación que se utilice para acceder a él. Existen tres formas de ver una página
web: como nos la presenta un navegador, como texto plano (por ejemplo, html) que
se puede ver en cualquier editor de texto, y como el modelo DOM.
5 de 16
2. Árbol de nodos
La representación de un documento en el modelo DOM se asemeja a un árbol de

elementos (nodos), frente al texto plano del lenguaje HTML, XHTML. La
transformación de este texto plano a la estructura DOM la realizan todos los
navegadores de forma automática, lo que nos permite utilizar las herramientas de
DOM de una manera sencilla.
La transformación pasa los documentos XHTML a unos elementos llamados nodos,

que están interconectados, que representan los contenidos de la página y las
relaciones entre ambas, estas relaciones unen los nodos y forman el llamado árbol
de nodos. Esta transformación sigue dos reglas básicas:
1. Las etiquetas XHTML se transforman en dos nodos:

1. La propia etiqueta.
2. El contenido de la etiqueta (sería hijo del nodo etiqueta).
2. Si una etiqueta está dentro de otra, su nodo será hijo del de la etiqueta que
lo contiene.
Es importante verificar que no haya errores en el código html, ya que estos errores
se trasladarán al árbol de nodos. Para poder acceder y modificar el árbol, este debe
estar completo, es decir, es necesario que el navegador haya cargado
completamente la página XHTML.
Ejemplo:
<html>
<title> Nueva Página </title>
<body>
<p>Página de <strong>EJEMPLO</strong></p>
</body>
</html>
6 de 16
2. Árbol de nodos
Árbol de nodos:
Document
XHTML
Nodo Title Nodo Body
NodoTexto:
Nodo P
Nueva Página
Nodo Texto:
Nodo Strong
Página de
Nodo Texto:
EJEMPLO
2.1. Tipos de nodos
El estándar de DOM define hasta 12 tipos diferentes de nodos, aunque los habituales
para páginas XHTML son únicamente cinco:
• Document: nodo raíz del que derivan el resto de nodos.

• Element: nodos definidos a partir de etiquetas XHTML.
• Attribute: atributos de las etiquetas XHTML, corresponden al par
atributo=valor. En JS este no se suelen considerar nodos, sino información
asociada al nodo Element.
• Text: Texto dentro de una etiqueta XHTML.
• Comment: los comentarios que pudiera haber.
2.2. Acceso al DOM
Una vez construido el árbol de nodos, se puede acceder de forma directa a cualquier
nodo del mismo. Para lo cual se disponen de una serie de funciones. No todos los
navegadores tienen el mismo comportamiento, veremos el acceso de forma
genérica sin profundizar.
7 de 16
2. Árbol de nodos
2.2.1. Propiedades
Para acceder a los distintos nodos, hay una serie de propiedades que podemos
utilizar:
• parentNode: devuelve el nodo padre.

• childNodes: devuelve una array con los nodos hijos.
• firstChild (firstElementChild para elements): primer hijo por la izquierda.
• lastChild (lastElementChild para elements): último hijo (por la derecha).
• nextSibling (nextElementSibling para elements): próximo nodo hermano.
• previousSibling(previousElementSibling en elements): anterior nodo hermano.
• children.length (childElementCount): número de nodos hijos de un nodo.
• atributo: atributo de un nodo.
• nodeName: nombre del nodo.
• nodeType: tipo del nodo (9=document, 1=element, 3=text, 8=comment).
• nodeValue: contenido en formato texto del nodo.
Ejemplo:
var tipoHijo1=document.childNodes[1].nodeType;
Utilizando estas propiedades podemos acceder a los distintos nodos de forma

secuencial recorriendo todo el árbol.
2.2.2. Funciones
Podemos acceder a un nodo recorriendo todo el árbol desde el nodo raíz, o si

queremos acceder directamente a un nodo, podemos hacerlo sin necesidad de
recorrer el árbol.
Veamos las funciones que nos permiten el acceso directo a nodos.
• document.getElementById(parametro); Función que devuelve el elemento de la

página cuyo identificador de atributo(es único) coincida con el parámetro.
Ejemplo:
var elementoTitulo = document.getElementById("titulo");
8 de 16
2. Árbol de nodos
• document.getElementsByTagName(parametro); Función que obtiene todos los

elementos de la página cuya etiqueta coincida con el parámetro pasado.
Ejemplo:
var elementosH1 = document.getElementsByTagName("h1");
• document.getElementsByName(parametro); Similar al anterior, pero en este

caso en lugar de comprobar la etiqueta se comprueba el atributo name.
Ejemplo:
var notas = document.getElementsByName("nota");
• document.querySelector(parametro); el parámetro pasado identifica el

elemento o elementos a seleccionar. Devuelve el primer elemento encontrado
que cumple la condición, si no encuentra ninguno devuelve null.
Ejemplo:
var primerEnlace = document.querySelector(".enlace");

//devuelve el primer enlace o null
• document.querySelectorAll(parametro); el parámetro pasado es un selector

que indica los elementos a devolver en un objeto NodeList. Para acceder a los
elementos del mismo lo hacemos como si fuera un array.
Ejemplo:
var enlaces = document.querySelectorAll(".enlace"):

// devuelve una lista de enlaces
Ejemplo:
// página sencilla que va cambiando el color de los párrafos

<!DOCTYPE html>
<html>
<body>
<p>Hola Mundo 1</p>
<p id="test1">Hola Mundo 2</p>
9 de 16
2. Árbol de nodos
<button onclick="cambiacolor('blue')">Azul</button>
<button onclick="cambiacolor('red')">Rojo</button>
<script>
function cambiacolor(colorN) {
var colorA =
document.getElementsByTagName("P")[1].style.color;
document.getElementsByTagName("P")[0].style.color = colorA;
document.getElementsByTagName("P")[1].style.color = colorN;
}
</script>
</body>
</html>
2.3. Crear nodos
Como hemos visto, un elemento se compone de dos nodos, uno para la etiqueta y
otro para el texto del contenido. Por tanto, para crear un nuevo elemento debemos
crear ambos nodos y, posteriormente, indicar de quien son hijos (el texto de la
etiqueta, y la etiqueta de otro elemento).
Las funciones utilizadas son:
• document.createElement(parametro); crea un nodo Element con la etiqueta

pasada como parámetro.
• createTextNode(parametro); crea un nodo de tipo Text con el contenido pasado
como parametro.
• nodoPadre.appendChild(parametro); añade el hijo indicado por el parámetro al
nodoPadre.
Ejemplo:
// Crear nodo de tipo Element

var titulo = document.createElement("title");
// Crear nodo de tipo Text

var contenido = document.createTextNode("Hola Mundo!");
// Añadir el nodo contenido como hijo del nodo titulo

titulo.appendChild(contenido);
10 de 16
2. Árbol de nodos
// Añadir el nodo titulo como hijo del head

document.head.appendChild(titulo);
En la consola del navegador podríamos comprobar que se ha añadido el titulo con

su contenido.
Podríamos modificar el contenido de los nodos creados, por ejemplo:
contenido.nodeValue="Hello World!";
Además de la función appendChild, existen otras dos para poder enlazar un nodo
hijo con su padre: una es insertBefore que inserta el nodo antes de un nodo que le
indiquemos, y una tercera forma es reemplazando un nodo existente con
replaceChild.
Ejemplo:
//Sustituyendo en el ejemplo anterior la sentencia de appendChild titulo
var nuevoHijo = document.head.insertBefore(titulo, elementoExistente);
var nuevoHijo = document.head.replaceChild(titulo, tituloAnterior);
2.4. Eliminar nodos
Para eliminar un nodo, simplemente hay que utilizar la función:

removeChild(parametro); donde le pasamos como parámetro el nodo a eliminar.
Para evitar problemas lo mejor es acceder al nodo padre con la propiedad
parentNode que hemos visto anteriormente.
Ejemplo:
var titulo = document.getElementById("titulo");
11 de 16
2. Árbol de nodos
titulo.parentNode.removeChild(titulo);
2.5. Contenido HTML
La forma más sencilla de añadir contenido dinámico a una página, es usar la

función: document.write()
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hora de carga: " + Date());
</script>
</body>
2.5.1. Modificar atributos XHTML
Los atributos XHTML de un elemento se transforman automáticamente en

propiedades de los nodos. Por tanto, para acceder a ellos accedemos al nodo y, a
continuación, indicamos la propiedad a la que queremos acceder.
Ejemplo:
var boton = document.querySelector("button");
boton.setAttribute("name", "botonHola");
Para las propiedades css se requiere un paso adicional, debemos utilizar el atributo
style para acceder a la propiedad css.
Ejemplo:
parrafo.style.fontFamily = 'sans-serif';
Cada atributo css tiene una propiedad DOM equivalente, el nombre de las
propiedades es el mismo que el de los atributos, pero eliminando los guiones y
cambiando la primera letra de las palabras a mayúsculas como, por ejemplo: font-
weight se transforma en fontWeight. El único atributo css cuyo nombre cambia es
class, al ser una palabra reservada de JS se traduce en className.
12 de 16
2. Árbol de nodos
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo modificar CSS</title>
<script type="text/javascript">
function cambia() {
var p = document.getElementById("pid");
p.style.color = "blue"
p.style.fontSize = "24pt"
}
</script>
</head>
<body>
<p id="pid" onclick="window.location.href =
'http://www.bejob.com/';"> Enlace </p>
<form>
<p><input value="visita" type="button" onclick="cambia();"></p>
</form>
</body>
</html>
2.5.2. innerHTML
En ocasiones, cuando es necesario crear varios elementos a la vez, nuestro código

puede complicarse. Podemos utilizar la propiedad innerHTML para ayudarnos. La
forma más sencilla de acceder o reemplazar al contenido de un elemento es usando
la propiedad innerHTML. Nos permite acceder o cambiar cualquier elemento HTML
incluyendo las etiquetas html y body. La idea más sencilla es modificar el texto
entre unas determinadas etiquetas que definen el nodo sobre el que se aplica la
propiedad. Pero el verdadero potencial de innerHTML es que nos permite también
modificar el código HTML.
Sintaxis:
nodoA.innerHTML = 'Nuevo código HTML en el nodo A';
Ejemplo:
//cambiamos el contenido del párrafo con id “saludo”
13 de 16
2. Árbol de nodos
document.getElementById("saludo").innerHTML = "Hola de nuevo Mundo!";
Ejemplo:
// creamos una tabla y la insertamos en la página con innerHTML:

<!DOCTYPE html>
<html>
<body>
<a id="contenido"> Contenido plano</a>

<button onclick="funcionTabla()">Añade Tabla</button>
<script>
function funcionTabla() {
var tabla = '<table border="0">';
tabla += '<tr><td>Celda 1</td><td>Celda 2</td><td> Celda
3</td></tr>';
tabla += '</table>';
document.getElementById("contenido").innerHTML = tabla;
}
</script>
</body>
</html>
14 de 16
.
15 de 16

Documentación Técnica

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Documentación Técnica

Cargado por

Copyright:

Formatos disponibles

Documentación técnica:

2.2. Acceso al DOM ……….………………………………………………………………………………………… 7

2.4. Eliminar nodos ………………………………………….……………………………………..…………….…11

El Modelo de Objetos de Documento o en inglés Document Object Model (DOM) es

El diseño de DOM se realizó para que sea independiente del lenguaje de

La representación de un documento en el modelo DOM se asemeja a un árbol de

La transformación pasa los documentos XHTML a unos elementos llamados nodos,

1. Las etiquetas XHTML se transforman en dos nodos:

<title> Nueva Página </title>

Nodo Title Nodo Body

2.1. Tipos de nodos

• Document: nodo raíz del que derivan el resto de nodos.

2.2. Acceso al DOM

• parentNode: devuelve el nodo padre.

Utilizando estas propiedades podemos acceder a los distintos nodos de forma

Podemos acceder a un nodo recorriendo todo el árbol desde el nodo raíz, o si

Veamos las funciones que nos permiten el acceso directo a nodos.

• document.getElementById(parametro); Función que devuelve el elemento de la

var elementoTitulo = document.getElementById("titulo");

• document.getElementsByTagName(parametro); Función que obtiene todos los

var elementosH1 = document.getElementsByTagName("h1");

• document.getElementsByName(parametro); Similar al anterior, pero en este

var notas = document.getElementsByName("nota");

• document.querySelector(parametro); el parámetro pasado identifica el

var primerEnlace = document.querySelector(".enlace");

• document.querySelectorAll(parametro); el parámetro pasado es un selector

var enlaces = document.querySelectorAll(".enlace"):

// página sencilla que va cambiando el color de los párrafos

2.3. Crear nodos

Las funciones utilizadas son:

• document.createElement(parametro); crea un nodo Element con la etiqueta

// Crear nodo de tipo Element

// Crear nodo de tipo Text

// Añadir el nodo contenido como hijo del nodo titulo

// Añadir el nodo titulo como hijo del head

En la consola del navegador podríamos comprobar que se ha añadido el titulo con

Podríamos modificar el contenido de los nodos creados, por ejemplo:

//Sustituyendo en el ejemplo anterior la sentencia de appendChild titulo

var nuevoHijo = document.head.insertBefore(titulo, elementoExistente);

var nuevoHijo = document.head.replaceChild(titulo, tituloAnterior);

2.4. Eliminar nodos

Para eliminar un nodo, simplemente hay que utilizar la función:

var titulo = document.getElementById("titulo");

2.5. Contenido HTML

La forma más sencilla de añadir contenido dinámico a una página, es usar la

2.5.1. Modificar atributos XHTML

Los atributos XHTML de un elemento se transforman automáticamente en

var boton = document.querySelector("button");

En ocasiones, cuando es necesario crear varios elementos a la vez, nuestro código

nodoA.innerHTML = 'Nuevo código HTML en el nodo A';

//cambiamos el contenido del párrafo con id “saludo”

document.getElementById("saludo").innerHTML = "Hola de nuevo Mundo!";

// creamos una tabla y la insertamos en la página con innerHTML:

<a id="contenido"> Contenido plano</a>

También podría gustarte