Home » AJAX » ¿Qué es DOM (Modelo de Objeto Documento)?

¿Qué es DOM (Modelo de Objeto Documento)?

Los objetos del documento DOM son de los siguientes tipos de nodos: Document, DocumentType, DocumentFragment, EntityReference, Element, Attr, ProcessingInstruction, Comment, Text, CDATASection, Entity y Notation.

Document

El tipo de nodo Document representa a todo el documento. Es el nodo raíz del árbol jerárquico DOM. Puede tener como hijos los siguientes tipos de nodos:

  • Element
  • ProcessingInstruction
  • Comment
  • DocumentType

En las siguientes tablas se describen las propiedades y los métodos del nodo de tipo Document.

Propiedades

  • doctype: Devuelve un objeto DocumentType.
  • documentElement: Es el elemento raíz de este documento

Métodos

  • createAttribute(n1): Crea un atributo, con el nombre n1.
  • createAttributeNS(en, nc): Crea un atributo con el espacio de nombre en y nombre calificado nc especificados.
  • createCDATASection(d1): Crea un nodo CDATASection que contiene el texto d1.
  • createComment(d1): Crea un nodo Comment que contiene el texto d1.
  • createDocumentFragment(): Crea un objeto DocumentFragment vacío.
  • createElement(etiq): Crea un elemento con el nombre especificado.
  • createElementNS(en, nc): Crea un elemento con el espacio de nombre en y nombre calificado nc especificados.
  • createEntityReference(n1): Crea una referencia de entidad, con el nombre n1.
  • createTextNode(d1): Crea un nodo Text que contiene el texto d1.
  • getElementByID(id1): Devuelve el elemento con el identificador id1. Si no existe, devuelve NULL.
  • getElementsByTagName(e): Devuelve un objeto NodeList de todos los elementos en el documento con esta etiqueta e.
  • getElementsByTagNameNS(en, nl): Devuelve un objeto NodeList de todos los elementos en el documento que tiene el nombre local nl y están en el espacio de nombres en.
  • importNode(n1, b1): Importa un nodo n1 desde otro documento. El nodo original no se elimina del documento de origen. Si el parámetro booleano b1 es true, clonará recursivamente todo el subárbol del nodo, en caso contrario, sólo clona al nodo. Devuelve el nuevo nodo.

Element

El tipo de nodo Element amplía el objeto Node con varios métodos y propiedades. Puede tener este tipo de nodos hijos:

  • Element
  • Text
  • Comment
  • ProcessingInstruction
  • CDATASection
  • EntityReference

Esta es la propiedad del objeto:

  • tagName : Nombre del elemento.

Métodos

  • getAttribute(n1): Devuelve el valor del atributo n1 o una cadena vacía si ese  atributo no tiene especificado un valor predeterminado.
  • getAttributeNode(n1): Devuelve un nodo Attr que contiene el atributo n1.
  • getElementsByTagName(n1): Devuelve un objeto NodeList con los descendientes del nodo n1.
  • removeAttribute(n1): Elimina el atributo n1.
  • removeAttributeNode(a1): Elimina el nodo Attr a1 y lo devuelve.
  • setAttribute(n1, v1): Asigna el valor v1 al atributo n1. Si tal atributo no existiese, se crea uno nuevo con el nombre n1.
  •  setAttributeNode(a1): Añade un nuevo nodo atributo a1. Si ya existe, lo reemplaza.

Attr

El tipo de nodo Attr tiene las propiedades para gestionar un atributo. Puede tener estos nodos hijos:

  • Text
  • EntityReference

Estas son las principales propiedades del objeto:

  • name: Nombre del atributo.
  •  ownerElement: Objeto Element al que pertenece este atributo.
  • specified: Valor  booleano que indica si se especificó el atributo (true)  o si es el valor predeterminado (false).
  •  value:  Valor del atributo.

CharacterData

El tipo de nodo CharacterData tiene las propiedades y métodos que nos permiten trabajar con datos de caracteres.
Estos son los principales miembros del objeto:

Propiedades

  • data: Texto en este nodo CharacterData.
  • length: Cantidad de caracteres del nodo.

Métodos

  •  appendData(c1): Añade la cadena en c1 hasta el final de la cadena.
  • deleteData(d1, c1): Elimina una subcadena, comenzando con el desplazamiento indicado en d1. Eliminará la cantidad de caracteres especificados en l1.
  • insertData(d1, c1): Inserta la cadena indicada en c1, a partir de la posición d1.
  • replaceData(d1, l1, c1): Reemplaza una subcadena, comenzando con el desplazamiento indicado en d1. Reemplazará la cantidad de caracteres especificados en l1. El parámetro c1 es la nueva cadena que se insertará.
  • substringData(d1, l1):  Devuelve una subcadena, comenzando con el desplazamiento indicado en d1 y con la longitud l1.

Text

El tipo de nodo Text, que se deriva de CharacterData,  aporta un método más para trabajar con nodos de texto. No puede tener nodos hijos.

Método

  • splitText(d1):  Separa este nodo Text en dos nodos Text adyacentes. Todo el texto hasta el punto d1 va hacia el primer nodo Text, y el resto va al segundo nodo Text.

Comment

El tipo de nodo Comment define un comentario XML y tiene los métodos y propiedades del objeto del cual deriva, CharacterData.  No puede tener nodos hijos.

CDATASection

El objeto CDATASection se deriva de Text y no añade ningún método ni propiedad. No tiene nodos hijos.

DocumentType

El nodo de tipo DocumentType suministra propiedades para trabajar con un tipo de documento XML.  No tiene nodos hijos.

Propiedades

  • entities: Objeto NamedNodeMap que contiene todas las entidades declaradas en la DTD (tanto internas como externas.
  • internalSubset:  Subconjunto interno.
  • name: Nombre de la DTD.
  • notations:  Objeto NamedNodeMap que contiene las notaciones contenidas en la DTD.
  • publicID:  Identificador público de un subconjunto externo.
  • systemID: Identificador de sistema de un subconjunto externo.

Notation

El nodo de tipo Notation suministra las propiedades para trabajar con una notación DOM que son de sólo lectura. No tiene nodos hijos.

Propiedades

  • publicID: Identificador público de esta notación.
  • systemID: Identificador de sistema de esta notación.

Entity

El nodo de tipo Entity suministra las propiedades para trabajar con entidades. Estos nodos son sólo de lectura.  Puede tener estos tipos de nodos hijos:

  • Element
  • ProcessingInstruction
  • Comment
  • Text
  • CDATASection
  • EntityReference

Propiedades

  • publicID:  Identificador público asociado con la entidad.
  • systemID: Identificador de sistema  asociado con la entidad.
  • notationName: Nombre de la notación para la entidad.

EntityReference

El nodo de tipo EntityReference contiene  una referencia de entidad XML.  No añade métodos ni propiedades al objeto Node. Puede tener estos tipos de nodos hijos:

  • Element
  • ProcessingInstruction
  • Comment
  • Text
  • CDATASection
  • EntityReference

Ejemplos

Búsqueda de un nodo con getElementById01.html:

<html>
<body>
<table>
<tr id=”tr1″>
<td id=”id1″>casilla 1</td>
<td>casilla 2</td>
<td>casilla 3</td>
</tr>
</table>
<script type=”text/javascript”>
var x = document.getElementById(“id1”);
x.style.fontFamily = “Courier”;
var y = x.nextSibling;
x.style.fontFamily = “Courier”;
</script>
</body>
</html>

Referencia al elemento de raíz

Un documento es una estructura jerárquica formada por todos los elementos de la página. La propiedad documentElement nos permite hacer referencia al elemento de nivel superior del documento.

var raiz = document.documentElement;

Ahora la variable raíz mantiene una refrencia al elemento de nivel superior del documento, en una página web es <html>. Lo interesante es que la variable raiz es un nodo elemento que podemos  gestionar con las propiedades y métodos del objeto Node y Element.
<html>
<head>
</head>
<body>
<script type=”text/javascript”>

var raiz = document.documentElement;

// mostrará HTML
alert(raiz.tagName);

</script>
</body>
</html>

Navegación por el documento

Un nodo cualquiera se puede utilizar como partida para navegar por la estructura jerárquica, lo que nos permitirá acceder al contenido y a los atributos y, eventualmente, modificarlos, eliminarlos o añadir nuevos elementos a la estructura.
<html>
<head>
<title>Documento de prueba</title>
</head>
<body>
<h1 id=”idh1″>Un texto cualquiera</h1>
<p id=”idp1″>Un párrafo de prueba</p>
<p id=”idp2″>otro párrafo de prueba</p>
<script type=”text/javascript”>

var v1 = document.getElementById(“idh1”);

// etiqueta obtenida
document.write(v1.tagName + “<br>”);

// le cambiamos la letra
v1.style.fontFamily = “Courier”;

// etiqueta obtenida
var v1 = v1.nextSibling;
document.write(v1.tagName + “<br>”);

// le cambiamos la letra
v1.style.fontFamily = “Arial”;

</script>
</body>
</html>

Añadido de nuevos elementos a la estructura

<html>

<head>

<title>Documento de prueba</title>
</head>
<body>

<script type=”text/javascript”>

// se crea un texto
var nuevoParrafo = document.createTextNode(“Nuevo párrafo”);

// se crea un nodo elemento nodo
var nuevoElemento = document.createElement(“p”);

// se añade el nodo Text al nodo Element
nuevoElemento.appendChild(nuevoParrafo);

// se añade el nodo al cuerpo del documento
document.body.appendChild(nuevoElemento);

</script>
</body>
</html>

Asignación de atributos a un elemento

<html>
<head>
<title>Documento de prueba</title>
</head>
<body>

<script type=”text/javascript”>

// se crea un texto
var nuevoParrafo = document.createTextNode(“Nuevo párrafo”);

// se crea un nodo elemento nodo
var nuevoElemento = document.createElement(“p”);

// se añade el nodo Text al nodo Element
nuevoElemento.appendChild(nuevoParrafo);

// se añade un atributo ailgn
nuevoElemento.setAttribute(“align”,”center”);

// se añade el nodo al cuerpo del documento
document.body.appendChild(nuevoElemento);

</script>
</body>
</html>

Eventos en el modelo DOM

El modelo DOM tiene un objeto evento que tiene la responsabilidad de suministrar información relacionada con el elemento que generó el evento y, lo más importante, podemos acceder a este objeto desde el código JavaScript. Para poder acceder al objeto evento debemos pasarlo como parámetro a la función llamada por el gestor de eventos. Por ejemplo:

<html>
<head>
<title>Documento de prueba</title>
</head>
<body>
<p onclick=”fun1(event)”>Un texto cualquiera</p>

<script type=”text/javascript”>

function fun1(evt)
{

if (evt.type == “click”)
{
alert(“Click recibido en (” + evt.clientX + “,” + evt.clientY +
“)”);
}

}
</script>
</body>
</html>

El objeto event tiene las siguientes propiedades:

  • bubbles:  Indica si un evento pasar el control de un elemento a otro.
  • cancelable: Indica si la acción predeterminada del evento se puede cancelar.
  • currentTarget: Indica el evento se está procesando en este momento.
  • target: Indica el elemento que  provocó el evento.
  • type: Indica el nombre del evento.

Todos los eventos tienen capacidad para crear un objeto event pero sólo un subconjunto de ellos podría crear un objeto MouseEvent que es el evento que generado específicamente por el ratón. En este caso tendríamos acceso a los dos objetos: event y MouseEvent.

Propiedades
  • altKey: Indica si se ha pulsado la techa Alt cuando se generó el evento.
  • button: Indica el botón que se ha pulsado del ratón.
  • clientX: Indica la coordenada x del click del ratón.
  • clientY: Indica la coordenada y del click del ratón.
  • ctrlKey: Indica si se ha pulsado la tecla Ctrl cuando se generó el evento.
  • metakey: Indica si se ha pulsado la tecla meta cuando se generó el evento.
  • screenX : Indica la coordenada x del click del ratón en posición relativa a la pantalla.
  • screenY:  Indica la coordenada y del click del ratón en posición relativa a la pantalla.
  • shiftKey: Indica si se ha pulsado la tecla Mayús cuando se generó el evento.

Los eventos que pueden crear un objeto MouseEvent son los siguientes: click, mousedown, mouseover, mousemove y mouseout.

EntityReference

El nodo de tipo EntityReference contiene una referencia de entidad XML. No añade métodos ni propiedades al objeto Node. Puede tener estos tipos de nodos hijos:

Element

  • ProcessingInstruction
  • Comment
  • Text
  • CDATASection
  • EntityReference
  • publicID:  Identificador público de esta notación.
  •  systemID : Identificador de sistema de esta notación.

 

Deja un comentario