4.

4 DOM
Document Object Model
4.4 Documento Object Model (DOM)
• Es una plataforma y un lenguaje, con una interface neutral, que permite a los programas y
scripts acceder de manera dinámica y actualizar el contenido, la estructura y el estilo de los
documentos.

• Estándar de W3C que permite manipular cualquier documento XML o HTML.

• Define una interfaz común para procesar y navegar una estructura jerárquica de tipo XML en
cualquier lenguaje. Todos ellos implementan los mismos métodos y propiedades así como
indica el estándar.

• En JavaScript se puede utilizar el DOM para poder manipular y recorrer el

documento(X)HTML a través del objeto window.document.

• También es posible recorrer cualquier XML que se cree en forma manual o que se reciba vía
Ajax. Referencia

Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 100
Copyright 2013 MC Fco. Fabián González de la O.
• 4.4.1 Estructura del DOM
La estructura de un documento DOM es jerárquica y se asemeja a un árbol genealógico, en el que se incluyen conceptos como hijos, padres, hermanos.

HTML
HEAD BODY
DIV SPAN DIV
TABLE
A
TR TR TR
A Referencia
TD TD TD
Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 100 a 101
Copyright 2013 MC Fco. Fabián González de la O.
4.4.2 DOM - Objetos
• Existen dos tipos de objetos:
• El que representa a todo el documento
• El que representa a cada uno de los nodos o etiquetas de la estructura
jerárquica.

Etiqueta
<clientes> ID Atributos
Nodo Hijo

<cliente id=“2355” nombre=“Cliente SA” teléfono=“444-3333”>

Visita www.clientesa.com Valor del Nodo
</cliente>
</clientes> Referencia
Fin de Etiqueta

Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 102
Copyright 2013 MC Fco. Fabián González de la O.
4.4.3 DOM – Propiedades de los nodos
• El objeto documento representa a TODO el DOM y encapsula todo su contenido. Este objeto no se debe confundir con el Nodo Raíz
• Básicamente contiene todos los métodos de cualquier nodo y además incorpora la propiedad documentElement que devuelve el objeto nodo raíz.

Todos los nodos poseen las propiedades siguientes:

childNodes Devuelve un arreglo con todos los nodos hijos (directos)
firstChild Devuelve el primer hijo, equivale a childNodes[0]
lastChild Devuelve el último hijo.
nextSibling Devuelve el hermano siguiente en la estructura.
previousSibling Devuelve el hermano anterior en la estructura.
tagName Representa el nombre de la etiqueta del nodo.
nodeValue Representa el texto que está dentro de la etiqueta (Entra la apertura y el cierre)
Referencia
parentNode Devuelve el nodo padre (que lo contiene).

Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 102
Copyright 2013 MC Fco. Fabián González de la O.
4.4.4 DOM – Métodos de los nodos
Todos los nodos poseen los siguientes métodos o funciones:
setAttribute(atributo,valor) define un atributo en el nodo.
getAttribute(atributo) devuelve el valor de un atributo.
removeAttribute(atributo) elimina el atributo del nodo.
getElementById(id) devuelve el nodo con el id especificado.
getElementsByTagName(tag) devuelve un arreglo con todos los nodos descendientes de
la etiqueta proporcionada.
createElement(etiqueta) Instancia un objeto nodo de la etiqueta proporcionada.
appendChild(nodo) agrega como hijo nuevo del hijo actual el nodo recibido por
el parámetro.
insertBefore(nodo1,nodo2): Inserta como hijo del nodo actual el nodo recibido por el
parámetro pero antes que el otro parámetro.
Referencia
Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 100
Copyright 2013 MC Fco. Fabián González de la O.
4.4.5 DOM - Ejemplo 1. <?xml versión 1.0?>
• Ejemplo: Supongamos que tenemos el siguiente XML cargado en una variable
2. <armadoras>
llamada xml. 3. <armadora Id=”1” nombre=”Ford” />
4. <armadora Id=”2” nombre=”Chrysler” >
5. <marca>Dodge Dart</marca>
6. <marca>Dodge Journey</marca>
7. </armadora>
8. </armadoras>

Si ejecutamos Obtenemos
var c=xml.documentElement; El nodo armadoras (2)
c.childNodes; Un vector que contiene 3 y 4
c.firstChild.tagName; armadora
c.firstChild.getAttribute(“nombre”) Ford
c.firstChild.getAttribute(“precio”) undefined
c.childNodes[1].childNodes Un vector que contiene 5 y 6
var cc=c.getElementById(“2”); El nodo armadora (4)
cc.childNodes[0].nodeValue Dodge Dart
Copyright 2013 MC Fco. Fabián González de la O.
4.4.6 DOM – Propiedades Útiles en XHTML
• Cuando utilizamos DOM dentro de un (X)HTML, es decir con el objeto window.document hay ciertas ventajas como:
• Leer y asignar atributos sin utilizar getAttribute o setAttribute, si no directamente con el nombre de la propiedad como:
• Acceder directamente a la propiedad utilizando notación de punto
• document.getElementById(“tblcliente”).cellspacing=10;
• document.getElementById(“tblcliente”).width=100%;
• La única excepción es la definición del atributo class, que permite definir el nombre de una regla CSS de clase. Como es una
palabra reservada de JavaScript, se reemplazó esta propiedad por classname cuando se accede por medio de propiedades.
• document.getElementById(“txtNombre”).classname= “txtError”;

Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 105
Copyright 2013 MC Fco. Fabián González de la O.
4.4.6 DOM – Propiedades Útiles en XHTML
• this – Objeto especial que sirve para representar el nodo actual. Se utiliza para trabajar con propiedades dentro de la clase.
• El acceso (lectura o escritura) a una propiedad fuera de la clase se hace con la sintaxis: NombreObjeto.Propiedad. Dentro de la clase la sintaxis de
this.Propiedad se utiliza para obtener o establecer el valor de la propiedad.

Forma Tradicional de hacer Utilizamos this para hacer

referencia a una propiedad. referencia a una propiedad.

function Persona(gender) function Persona(gender)

{ {
Persona.genero = gender; this.genero = gender;
alert('Persona creada'); alert('Persona creada');
} } Referencia

Copyright 2013 MC Fco. Fabián González de la O.

4.4.6 DOM – Propiedades Útiles en XHTML
• disabled – permite deshabilitar cualquier nodo XHTML. Si se pone en True se estará desactivando el elemento XHTML. Esto
implica que el usuario no puede utilizarlo.

• El siguiente ejemplo desactiva un botón después de presionarlo:

• <input type=“button” id=“btnpresionar” onclick=“this.disable=true”/>
• También podemos y debemos separar nuestro código y definir el evento onclick desde el código en JavaScript:
• $(“btnpresionar”).onclick= function() { this.disabled = true;}

Referencia

Referencia: Firtman Maximilinao Ajax Web 2.0 con jQuery para profesionales 2 Edición, pág. 106
Copyright 2013 MC Fco. Fabián González de la O.