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:
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É