El DOM Document Object Model

El DOM

Tabla de contenidos

  1. Qué es el DOM
  2. Los nodos del árbol
    1. Propiedades generales de los nodos
    2. Identificar el tipo de nodo
    3. Valores y nombres de los nodos
  3. Niveles del DOM

Qué es el DOM

El DOM es una API para XML1, lo que sin siglas quiere decir que es una capa de programación intermedia que representa un documento y que nos permite modificarlo. Por decirlo de otra manera, es una serie de funciones y procedimientos que nos permiten trabajar sobre un modelo abstracto de un documento, que sirve como medio de comunicación entre nuestro lenguaje de programación —en este caso JavaScript— y los contenidos del documento.
El DOM es una interfaz independiente de cualquier lenguaje de programación, pero aquí voy a centrarme en su uso por medio de JavaScript.
Pongamos un ejemplo. Tenemos un documento como el siguiente:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Título de la página</title>
    </head>
    <body>
        <h1>Encabezado</h1>
        <p>Un párrafo</p>
        <p>Un párrafo con <a href="otra_pagina.htm">un vínculo</a></p>
        <ul>
            <li>Un elemento de lista</li>
            <li>Otro elemento de lista</li>
        </ul>
        <p>Otro párrafo</p>
    </body>
    </html>
            
y por medio de JavaScript queremos modificar la lista. ¿Cómo lo hacemos? Necesitamos que haya alguna manera de indicarle al agente de usuario —por ejemplo, nuestro navegador— que de todos los caracteres que componen ese documento nos interesa seleccionar los que componen el que es un elemento ul. Ahí es donde entra en juego el DOM, que permite que el navegador se represente el documento como un árbol jerárquico, algo así:
El código anterior, representado gráficamente como un árbol jerárquico
Ahora sí, el navegador no interpreta simplemente el documento como una serie de caracteres, sino que «comprende» que existen una serie de elementos con sus propiedades, y que la relación entre todos ellos es una relación estructural. Así, por ejemplo, se puede pedir al navegador que devuelva una lista de los hijos del elemento ul.
Una ventaja de esta interfaz es que la manera de trabajar con ella es análoga a la forma de emplear selectores de CSSbasados en el árbol de parentesco que ya vimos.
El modelo resultante del documento original es un árbol, y una vez creado es este árbol lo que representa el navegador, y también lo que modificamos con nuestros scripts.

Los nodos del árbol

Como se ve, el DOM es un modelo jerárquico. En la representación que he ofrecido antes, todo aquello situado en el origen o el final de una rama del árbol es un nodo, y los nodos establecen entre sí relaciones de parentesco. Por ejemplo, el elemento ul es hijo de body, padre de dos li, hermano de h1 y los tres p, descendiente de html y ascendente del texto de cualquiera de los li.
Así, todo documento puede representarse como un conjunto de nodos relacionados entre sí. Además, existe un número limitado de tipos de nodos que son suficientes para representar cualquier documento, y que han sido definidos por el W3C:
Tipos de nodos en el DOM: descripción y posibilidad de tener hijos o no
NodoDescripción¿Hijos?
DocumentEste nodo es único, y representa el documento en sí.
DocumentTypeEste nodo también es único, y representa la referencia a la DTD del documento, es decir, la línea del <!DOCTYPE>.No
DocumentFragmentRepresenta un fragmento del modelo total del árbol del documento.
ElementRepresenta un elemento.2
AttrRepresenta un atributo de un elemento, en combinación con su valor.No
TextRepresenta un texto dentro de un elemento, o de una sección CData.No
CDataSectionRepresenta una sección <[!CDATA[]]>.3
EntityRepresenta la definición de una entidad en la DTD.No
EntityReferenceRepresenta una referencia de entidad.No
ProcessingInstructionRepresenta una instrucción de proceso.No
CommentRepresenta un comentario en el código XML.No
NotationRepresenta una notación definida en la DTD.No
Así, cuando el agente de usuario mapea un documento, lo que hace es asignar a cada nodo una constante que lo identifica. Dependiendo del tipo de nodo, éste aceptará una serie de propiedades y métodos, y podrá tener hijos o no.

PROPIEDADES GENERALES DE LOS NODOS

Independientemente del tipo de nodo, hay una serie de propiedades generales que comparten, y que recojo en la tabla siguiente:
Propiedades generales de cualquier nodo
PropiedadDescripciónDevuelve
nodeNameEl nombre del nodo, que se define dependiendo del tipo de nodo.Una cadena literal
nodeValueEl valor del nodo, que se define dependiendo del tipo de nodo.Una cadena literal
nodeTypeUn número que representa el tipo de nodo del que se trata.Un número del 1 al 12
ownerDocumentEl documento al que pertenece el nodo.El documento
firstChildEl primer hijo del nodo.Un nodo
lastChildEl último hijo del nodo.Un nodo
childNodesUna lista de los hijos de un nodo.Una matriz de nodos
previousSiblingEl hermano anterior al nodo.Un nodo, o null si el nodo es el primer hijo
nextSiblingEl hermano siguiente al nodo.Un nodo, o null si el nodo es el último hijo
hasChildNodesIndica si el nodo tiene hijos o no.Un booleano
attributesUna lista con los atributos del nodo.Una matriz con los atributos
La sintaxis para acceder a estas propiedades es la misma que vimos para los objetos nativos de JavaScript, por lo que no voy a detenerme a explicarla aquí. No obstante, vamos a emplear muchas de ellas en los ejemplos de las secciones siguientes.
En cuanto a los métodos comunes, les dedico su propia sección: appendChildinsertBeforereplaceChild,removeChild y cloneNode.

IDENTIFICAR EL TIPO DE NODO

En algún momento podemos necesitar identificar el tipo de un nodo, y para eso contamos con la propiedad nodeType, que devuelve un número. A continuación recojo el tipo de nodo que corresponde a cada número:
Tipos de nodos identificados por el número devuelto por nodeType
Tipo de nodoConstante4Número
ElementNode.ELEMENT_NODE1
AttrNode.ATTRIBUTE_NODE2
TextNode.TEXT_NODE3
CDataSectionNode.CDATA_SECTION_NODE4
EntityReferenceNode.ENTITY_REFERENCE_NODE5
EntityNode.ENTITY_NODE6
ProcessingInstructionNode.PROCESSING_INSTRUCTION_NODE7
CommentNode.COMMENT_NODE8
DocumentNode.DOCUMENT_NODE9
DocumentTypeNode.DOCUMENT_TYPE_NODE10
DocumentFragmentNode.DOCUMENT_FRAGMENT_NODE11
NotationNode.NOTATION_NODE12

VALORES Y NOMBRES DE LOS NODOS

Además, dos de las propiedades listadas anteriormente nos proporcionan datos sobre un nodo: nodeName y nodeValue. Sin embargo, a diferencia de nodeType, su valor no es una constante, sino que dependiendo del tipo de nodo el valor que devuelven difiere:
Resultados de nodeName y nodeValue en relación con el tipo de nodo
Tipo de nodonodeNamenodeValue
ElementEl nombre del elemento, en mayúsculasnull
AttrEl nombre del atributo, en minúsculasEl valor del atributo como una cadena literal
Text#textEl contenido del nodo como una cadena literal
CDataSection#cdata-sectionEl contenido del nodo como una cadena literal
EntityReferenceEl nombre de la entidad de referencianull
EntityEl nombre de la entidadnull
ProcessingInstructionEl nombre del destino de la instrucciónEl contenido del nodo como una cadena literal
Comment#commentEl texto del comentario como una cadena literal
Document#documentnull
DocumentTypeEl nombre del tipo de documentonull
DocumentFragment#document-fragmentnull
NotationEl nombre de la notaciónnull
Con esto, hemos dado el primer paso para conocer el DOM, aunque lo visto no es más que un ápice del nivel más bajo y básico de esta interfaz. No obstante, esta información es necesaria si se quiere trabajar con ella, y avanzar en el estudio de los siguientes niveles.

Niveles del DOM

Dejo fuera de esta sección tanto el DOM 0 como el DHTML5. Si alguien tiene curiosidad, remito a Level 0 DOM (inglés) e Intermediate DOMs (inglés) en quirksmode.org (inglés).
A diferencia de otras recomendaciones como pueda ser la de XHTML 1.0, el DOM no se recoge en un único documento, sino que consiste en tres niveles —a día de hoy—, y cada uno de ellos está a su vez compuesto por varias recomendaciones referidas a distintos aspectos de la interfaz:
  • DOM 1:
    • DOM Core (inglés): Define el conjunto mínimo de objetos e interfaces con los que manipular la estructura de un documento, ya se trate de un documento HTML o XML, o cualquier lenguaje basado en éste.
    • DOM HTML (inglés): Define una serie objetos y métodos específicos de un documento HTML, y que por extensión también pueden aplicarse a un XHTML. Es importante conocerlo bien porque en muchas ocasiones hay que emplearlo en un script como alternativa para Internet Explorer de métodos del DOM Core 1, como por ejemplo getAtribute y setAttribute.
      Sobre la inconsistencia del soporte de Explorer para estos dos métodos, ver «Una nota sobre el soporte de getAttribute y setAttribute en Internet Explorer 6».
  • DOM 2:
    • DOM Core (inglés): Extiende las interfaces definidas en el DOM Core 1, por ejemplo añadiendo soporte para espacios de nombre, y permitiendo así poder manipular secciones del documento asociadas a uno de ellos.
    • DOM Views (inglés): Define lo que es una «vista» de un documento, es decir, el documento cuando es representado en un agente de usuario —por ejemplo cuando se le aplica una hoja de estilo en un navegador—, en contraposición a la «vista abstracta» del documento en sí. Sí, es casi metafísica.
    • DOM Events (inglés): Especifica qué es un evento, sus tipos, y qué son los procesos de burbujacaptura y cancelación6. Además, entre otras muchas cosas, define un método maravilloso: addEventListener (inglés).
    • DOM Style (inglés): Define una interfaz para poder extraer información y manipular la/s hojas/s de estilo de un documento.
    • DOM Traversal and Range (inglés): Define la interfaz avanzada y los métodos con los que desplazarse por el árbol del documento, y para seleccionar partes del mismo.
    • DOM HTML (inglés): Amplía el DOM HTML 1, e indica explícitamente que vuelve el anterior obsoleto.
  • DOM 3:
Para el nivel 3 del DOM hay muchos más documentos que tratan otros aspectos de esta interfaz (inglés), pero no tienen todavía la categoría de Recomendaciones.
En las siguientes secciones sólo veremos una ínfima parte de lo que contiene la especificación del DOM Core 1.

Notas

  1. Existen otras API para XML, como SAXVolver
  2. Éste es el único tipo de nodo que puede tener como hijo uno del tipo attrVolver
  3. Sólo acepta como hijos nodos de tipo TextVolver
  4. El número devuelto por nodeType es una referencia; estrictamente, al mapear el árbol del documento es una constante la que se asigna a cada nodo para identificarlo. En realidad la mayor parte de las veces para trabajar basta con el número, pero saber algo más no hace daño nunca. Volver
  5. A pesar de que pueda parecerlo, DHTML no es ninguna especificación de un lenguaje, sólo un nombre comercial para englobar las propiedades de los modelos de capas y los métodos con los que operar con ellas en las versiones 4 de Explorer y Netscape. Cosa del pasado, vamos. Volver
  6. Veremos estos conceptos al tratar addEventListenerVolver
SHARE

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 comentarios:

Publicar un comentario