Monografias.com > Computación > Programación
Descargar Imprimir Comentar Ver trabajos relacionados

DOM (Document Object Model)




Enviado por Elvin Hernandez



    Cuadro
    – Resumen

    Elemento de búsqueda

    Contenido

    Versiones del DOM

    ·        
    DOM
    Level 0:

    El primer DOM, también conocido como Legacy
    DOM o DOM Level 0, no pasaba de un pequeño esbozo de tecnología, levemente
    descrito en el estándar HTML 4, que permitía validación de eventos generados
    por el usuario y ligeras modificaciones en el HTML. Nunca se planteó la
    posibilidad de crear un estándar para esta primera versión preliminar.

     

    ·        
    DOM
    Level 1:

    En octubre de 1998 se lanzó la aprobó la
    primera recomendación W3C sobre DOM, conocida como DOM Level 1, justo un año
    después de haberse publicado el primer borrador. DOM se dividió en dos
    secciones principales: Core y HTML (una extensión de Core estrictamente
    dedicada a la manipulación de HTML).

     

    ·        
    DOM
    Level 2:

    Alcanzó el estado de recomendación del W3C
    tan sólo dos años después de la estandarización de DOM Level 1, en Noviembre
    de 2000. Con DOM Level 2 las cosas empiezan a complicarse por dos razones. En
    primer lugar, porque la especificación explotó hasta dividirse en 6
    secciones: Core, HTML Views, Style, Events y Traversal-Range.

    La segunda razón tiene que ver,
    precisamente, con su proceso de estandarización. Todas las secciones
    siguieron los mismos pasos y lanzaron borradores y versiones candidatas en
    las mismas fechas, hasta convertirse en recomendaciones todas ellas a finales
    de 2000, exceptuando una. La sección HTML en Noviembre de 2000 en lugar de
    pasar a recomendación HTML, volvió al estado de borrador.

     

    ·        
    DOM
    Level 3:

    La última versión de DOM, la Level 3, se
    dividió de nuevo en 6 secciones, aunque diferentes a las anteriores: Core,
    Events, Load and Save, Validation, XPath y Views. Peculariadidades de este
    proceso, muchas:

    Core, Events y Load & Save se iniciaron
    en Septiembre de 2000, mientras que Views comenzó su proceso 2 meses más
    tarde, en Noviembre. De la parte de XPath no habría noticias hasta 10 meses
    después, en Junio de 2001, con su primer borrador.

     

    Los principales tipos de nodos
    en el DOM

    Los principales tipos de nodos en el DOM
    son:

     

    a) Document: el nodo document
    es el nodo raíz, a partir del cual derivan el resto de nodos.

     

    b) Element: son los nodos
    definidos por etiquetas HTML. Por ejemplo una etiqueta div genera un nodo. Si
    dentro de ese div tenemos tres etiquetas p, dichas etiquetas definen nodos
    hijos de la etiqueta div.

     

    c) Text: el texto dentro de
    un nodo element se considera un nuevo nodo hijo de tipo text (texto). Los
    navegadores también crean nodos tipo texto sin contenido para representar
    elementos como saltos de línea o espacios vacíos.

     

    d) Attribute: los atributos de
    las etiquetas definen nodos, aunque trabajando con JavaScript no los veremos como
    nodos, sino que lo consideramos información asociada al nodo de tipo element.

     

    e) Comentarios y otros: los
    comentarios y otros elementos como las declaraciones doctype en cabecera de
    los documentos HTML generan nodos

     

    Objeto NODE y sus constantes

    Una vez que DOM ha creado de forma
    automática el árbol completo de nodos de la página, ya es posible utilizar
    sus funciones para obtener información sobre los nodos o manipular su
    contenido. JavaScript crea el objeto Node para definir las propiedades y
    métodos necesarios para procesar y manipular los documentos.

     

    En primer lugar, el objeto Node define las
    siguientes constantes para la identificación de los distintos tipos de nodos:

     

    ·        
    Node.ELEMENT_NODE = 1

    ·        
    Node.ATTRIBUTE_NODE = 2

    ·        
    Node.TEXT_NODE = 3

    ·        
    Node.CDATA_SECTION_NODE = 4

    ·        
    Node.ENTITY_REFERENCE_NODE = 5

    ·        
    Node.ENTITY_NODE = 6

    ·        
    Node.PROCESSING_INSTRUCTION_NODE = 7

    ·        
    Node.COMMENT_NODE = 8

    ·        
    Node.DOCUMENT_NODE = 9

    ·        
    Node.DOCUMENT_TYPE_NODE = 10

    ·        
    Node.DOCUMENT_FRAGMENT_NODE = 11

    ·        
    Node.NOTATION_NODE = 12

    Acceso relativo al nodo

    A continuación se muestra la página HTML
    básica que se va a emplear en todos los siguientes ejemplos:

    <html>

    <head>

      <title>Aprendiendo
    DOM</title>

    </head>

    <body>

      <p>Aprendiendo
    DOM</p>

      <p>DOM es
    sencillo de aprender</p>

      <p>Ademas,
    DOM es muy potente</p>

    </body>

    </html>

    La operación básica consiste en obtener el
    objeto que representa el elemento raíz de la página:

    var objeto_html =
    document.documentElement;

    Después de ejecutar la instrucción
    anterior, la variable objeto_html contiene un objeto de tipoHTMLElement y que
    representa el elemento <html> de la página web. Según el árbol de nodos
    DOM, desde el nodo <html> derivan dos nodos del mismo nivel jerárquico:
    <head> y <body>.

    Utilizando los métodos proporcionados por
    DOM, es sencillo obtener los elementos <head> y <body>. En primer
    lugar, los dos nodos se pueden obtener como el primer y el último nodo hijo
    del elemento<html>:

    var objeto_head = objeto_html.firstChild;

    var objeto_body = objeto_html.lastChild;

    Otra forma directa de obtener los dos nodos
    consiste en utilizar la propiedad childNodes del elemento<html>:

    var objeto_head =
    objeto_html.childNodes[0];

    var objeto_body = objeto_html.childNodes[1];

    Si se desconoce el número de nodos hijo que
    dispone un nodo, se puede emplear la propiedad lengthde childNodes:

    var numeroDescendientes =
    objeto_html.childNodes.length;

    Además, el DOM de HTML permite acceder
    directamente al elemento <body> utilizando el atajodocument.body:

    var objeto_body = document.body;

    Además de las propiedades anteriores,
    existen otras propiedades como previousSibling y parentNodeque se pueden
    utilizar para acceder a un nodo a partir de otro. Utilizando estas propiedades,
    se pueden comprobar las siguientes igualdades:

    objeto_head.parentNode ==
    objeto_html

    objeto_body.parentNode ==
    objeto_html

    objeto_body.previousSibling
    == objeto_head

    objeto_head.nextSibling ==
    objeto_body

    objeto_head.ownerDocument ==
    document

     

    Tipos de nodos

    La especificación completa de DOM define 12
    tipos de nodos, aunque las páginas XHTML habituales se pueden manipular
    manejando solamente cuatro o cinco tipos de nodos:

    • Document,
      nodo raíz del que derivan todos los demás nodos del árbol.
    • Element,
      representa cada una de las etiquetas XHTML. Se trata del único nodo que
      puede contener atributos y el único del que pueden derivar otros nodos.
    • Attr,
      se define un nodo de este tipo para representar cada uno de los
      atributos de las etiquetas XHTML, es decir, uno por cada
      par atributo=valor.
    • Text,
      nodo que contiene el texto encerrado por una etiqueta XHTML.
    • Comment,
      representa los comentarios incluidos en la página XHTML.

    Los otros tipos de nodos existentes que no
    se van a considerar son DocumentType,CDataSection, DocumentFragment, Entity, EntityReference, ProcessingInstruction y
    Notation.

     

    Acceso atributos

    Los atributos son propiedades del elemento,
    no elementos secundarios del elemento. Es importante hacer esta distinción,
    debido a los métodos utilizados para navegar por los nodos relacionados,
    principales y secundarios del DOM.Por ejemplo, los métodos PreviousSibling y
    NextSibling no se utilizan para navegar de un elemento a un atributo, ni
    entre atributos. En su lugar, un atributo es una propiedad de un elemento y
    pertenece a un elemento, tiene una propiedad OwnerElement y no una propiedad
    parentNode, y tiene métodos de navegación distintos.

    Cuando el nodo actual es un elemento,
    utilice el método HasAttribute para ver si hay algún atributo asociado a
    dicho elemento. Una vez que se sabe que un elemento tiene atributos, existen
    múltiples métodos de acceso a atributos. Para recuperar un único atributo de
    un elemento, utilice los métodos GetAttribute y GetAttributeNode de
    XmlElement, u obtenga todos los atributos en una colección. La obtención de
    la colección resulta útil si es necesario recorrerla en iteración. Si desea
    obtener todos los atributos del elemento, utilice la propiedad Attributes del
    elemento para recuperar todos los atributos en una colección.

     

    Acceso directo al nodo

    Como acceder a un nodo del árbol es
    equivalente a acceder a "un trozo" de la página, una vez construido
    el árbol, ya es posible manipular de forma sencilla la página: acceder al
    valor de un elemento, establecer el valor de un elemento, mover un elemento
    de la página, crear y añadir nuevos elementos, etc.

    DOM proporciona dos métodos alternativos
    para acceder a un nodo específico: acceso a través de sus nodos padre y
    acceso directo.

    Las funciones que proporciona DOM para
    acceder a un nodo a través de sus nodos padre consisten en acceder al nodo
    raíz de la página y después a sus nodos hijos y a los nodos hijos de esos
    hijos y así sucesivamente hasta el último nodo de la rama terminada por el
    nodo buscado. Sin embargo, cuando se quiere acceder a un nodo específico, es
    mucho más rápido acceder directamente a ese nodo y no llegar hasta él
    descendiendo a través de todos sus nodos padre.

    Por ese motivo, no se van a presentar las
    funciones necesarias para el acceso jerárquico de nodos y se muestran
    solamente las que permiten acceder de forma directa a los nodos.

    Por último, es importante recordar que el
    acceso a los nodos, su modificación y su eliminación solamente son posible
    cuando el árbol DOM ha sido construido completamente, es decir, después de
    que la página XHTML se cargue por completo. Más adelante se verá cómo
    asegurar que un código JavaScript solamente se ejecute cuando el navegador ha
    cargado entera la página XHTML.

     

     

     

    Arbol
    de Nodos y los tipos que los representa

     

    En
    el esquema anterior, cada rectángulo representa un nodo DOM y las flechas
    indican las relaciones entre nodos. Dentro de cada nodo, se ha incluido su tipo
    y su contenido.

    La
    raíz del árbol de nodos de cualquier página XHTML siempre es la misma: un nodo
    de tipo especial denominado "Documento".

    A
    partir de ese nodo raíz, cada etiqueta XHTML se transforma en un nodo de tipo
    "Elemento". La conversión de etiquetas en nodos se realiza de forma
    jerárquica. De esta forma, del nodo raíz solamente pueden derivar los nodos
    HEAD y BODY. A partir de esta derivación inicial, cada etiqueta XHTML se
    transforma en un nodo que deriva del nodo correspondiente a su "etiqueta
    padre".

     

     

                                                              

    Web
    Biografia

     


    La interfaz Node (Introducción a AJAX). (s/f). Recuperado el 22 de marzo de
    2016, a partir de http://librosweb.es/libro/ajax/capitulo_4/la_interfaz_node.html


    HTML y DOM (Introducción a AJAX). (s/f). Recuperado el 22 de marzo de 2016, a
    partir de http://librosweb.es/libro/ajax/capitulo_4/html_y_dom.html


    Árbol de nodos (Introducción a JavaScript). (s/f). Recuperado el 22 de marzo de
    2016, a partir de http://librosweb.es/libro/javascript/capitulo_5/arbol_de_nodos.html


    Acceso a atributos en DOM. (s/f). Recuperado el 22 de marzo de 2016, a partir
    de https://msdn.microsoft.com/es-es/library/hk61a712%28v=vs.110%29.aspx?f=255&MSPPError=-2147217396


    DOM | JavaScript. (s/f). Recuperado el 22 de marzo de 2016, a partir de http://www.arkaitzgarro.com/javascript/capitulo-13.html


    Historia del estándar DOM del W3C. (s/f). Recuperado el 22 de marzo de 2016, a
    partir de http://www.desarrolloweb.com/articulos/historia-estandar-dom.html


    Tipos de nodos DOM: document, element, text, attribute, comment. Arbol de nodos
    para JavaScript (CU01124E). (s/f). Recuperado el 22 de marzo de 2016, a partir
    de http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=802:tipos-de-nodos-dom-document-element-text-attribute-comment-arbol-de-nodos-para-javascript-cu01124e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

     

     

     

    Autor:

    ELVIN
    A. HERNÁNDEZ G.

    JUAN
    M. BULTRÓN G.

    RICARDO
    J. RAMOS A.

     

    MARTES
    22 DE MARZO DE 2016

    UNIVERSIDAD
    DE PANAMÁ

    FACULTAD
    DE INFORMÁTICA, ELECTRÓNICA Y COMUNICACIÓN

    LICENCIATURA
    EN INFORMÁTICA PARA LA GESTIÓN EDUCATIVA Y EMPRESARIAL

    AGUADULCE,
    COCLÉ

     

    Nota al lector: es posible que esta página no contenga todos los componentes del trabajo original (pies de página, avanzadas formulas matemáticas, esquemas o tablas complejas, etc.). Recuerde que para ver el trabajo en su versión original completa, puede descargarlo desde el menú superior.

    Todos los documentos disponibles en este sitio expresan los puntos de vista de sus respectivos autores y no de Monografias.com. El objetivo de Monografias.com es poner el conocimiento a disposición de toda su comunidad. Queda bajo la responsabilidad de cada lector el eventual uso que se le de a esta información. Asimismo, es obligatoria la cita del autor del contenido y de Monografias.com como fuentes de información.

    Categorias
    Newsletter