No has iniciado sesión
Conectar al sistema | Registrar usuario
Cursos Cuestionarios Curso de JavaScript Capítulo
 
12 votos
Introducción al DOM
 
El DOM ( Document Object Model ) es una representación en forma de objetos de la información contenida en un documento estructurado ( XHTML, XML, SVG... ). Este tipo de representación nos permite un fácil acceso y modificación de los datos utilizando diversas tecnologías como pueden ser DOM ECMAScript Language Binding o XPATH.

Estamos hablando de una de las claves de las tecnologías del llamado Web 2.0 ( AJAX, XSLT, .NET... ), que extienden el patrón Modelo Vista Controlador tanto en el lado del servidor como en el cliente, utilizan documentos estructurados ( XHTML, XML... ) para la capa Modelo e implementan una capa Controlador programada con lenguajes basados a objetos que implementan métodos de acceso al Modelo basados en DOM.

ArribaTabla de contenido

ArribaLa representación del DOM (Los nodos)

En la representación de un documento basada en DOM, cada unidad de información , ya sea desde el documento entero al texto de un elemento, está representada por un objeto de una clase que implementa a Nodo que podrá ser de los siguientes tipos:
Document - Raiz del documento, representa el documento entero
DocumentFragment - Es un objeto Document ligero
DocumentType - Identifica el tipo de documento (doctype)
EntityReference - Para insertar una referencia a una entidad
Element - Elemento del documento como <br />, <input /> ...
Attr - Atributo del elemento
ProcessingInstruction - Instrucción para la capa controlador
Comment - Comentario, por ejemplo entre <!-- y -->
Text - Dato de texto del elemento o atributo
CDATASection - Implementación de Text
Entity - Representa una entidad a un nodo
Notation - Referéncia a una notacion en la definicion de tipos

ArribaLas relaciones entre nodos

El Nodo raiz (root) del árbol de información es un nodo de tipo Document, cada nodo, incluyendo el nodo raiz, puede incluir enlaces a otros nodos en lo que se establece una relación padre hijo:


Relaciones entre nodos del documento

De esta relación directa entre dos nodos se derivan también relaciones de otras relaciones entre por ejemplo nodos hermanos ( hijos del mismo padre ), veamos la lista de relaciones entre Nodos:
parentNode - Nodo padre del nodo actual
childNodes - Nodos hijo del nodo actual
firstChild - Primer hijo del nodo actual
lastChild - Último hijo del nodo actual
previousSibling - Hijo del nodo padre anterior al nodo actual
nextSibling - Hijo del nodo padre siguiente al nodo actual
attributes - Atributos del nodo actual
ownerDocument - Documento actual
Cada una de estas relaciones es un atributo del objeto de tipo Nodo que hace referéncia a otro nodo.

ArribaAcceso a los nodos

Usando estas relaciones por ejemplo podremos acceder a los diferentes elementos del árbol, de esta manera, en el siguiente XML:
 
000 
001 
002 
003 
004 
005 
006 
<?xml version="1.0"?>
<xml>
  <mensaje>
    <color>#000000</color>
    <texto>[b]Texto[/b]</texto>
  </mensaje>
</xml> 
 
Tenemos un nodo de tipo Document (<?xml version="1.0"?>) con un nodo hijo de tipo Element (<mensaje>), que a su vez tiene dos nodos hijos de tipo Element (<color> y <texto>) y cada uno de ellos con un nodo hijo de tipo Text (#000000 y Texto)

En el ejemplo anterior, y imaginando que document es una referéncia al nodo raiz, podremos acceder al nodo de tipo Text marcado en negrita de la siguiente manera:
 
000 
document.firstChild.firstChild.lastChild
 
Además de usar los atributos parentNode, childNodes... enumerados anteriormente, algunas de las clases derivadas de Nodo ( Tipos de nodo) poseen atributos y métodos que nos permiten acceder a otros nodos, alguno de ellos tan importante como los métodos getElementById y getElementsByTagName
 
Anterior y siguiente
Alert, confirm y p...
 
¿? Resolver dudas
Si tienes problemas o dudas con el contenido del artículo no dudes a preguntar en los foros de JavaScript de Programación Web indicando el artículo al que te refieres.
 
Comentarios
02/10/08 Muy Bueno
muy buen tuto, rápido y conciso.
un 5

saludos desde granada
18/10/08 curso js
muy bueno, sobre todo claro y de rapida lectura. gracias!!
 
Redes Sociales
Programación Webon

Compartir en Google Plus