El DOM está separado en 3 partes / niveles:
DOM Core - modelo estándar para cualquier documento estructurado.
DOM XML - modelo estándar para documentos XML.
DOM HTML - modelo estándar para documentos HTML.
El DOM HTML es un estándar dónde se define cómo acceder, modificar, añadir o borrar elementos HTML.
En el DOM se definen los objetos y propiedades de todos los elementos del documento, y los métodos para acceder a ellos.
Hay que tener en cuenta que muchas de las funciones de Internet Explorer 4 y posteriores del modelo de objetos, no forman parte de la expecificación DOM W3C.
El DOM transforma todos los documentos XHTML en un conjunto de elementos, a los que llama nodos. En el HTML DOM cada nodo es un objeto. Estos nodos están conectados entre sí y representan los contenidos de la página web, y la relación que hay entre ellos. Cuando unimos todos estos nodos de forma jerárquica, obtenemos una estructura similar a un arbol, por lo que muchas veces se suele referenciar como árbol DOM, "árbol de nodos", etc.
Ejemplo de arbol de nodo:
Los rectángulos del gráfico representa un nodo del DOM, y las lineas representan la relación entre los nodos. La raíz del árbol de nodos es un nodo especial, denominado "document". A partir de ese nodo, cada etiqueta XHTML se transformará en nodos de tipo "elemento" o "texto". El nodo inmediantamente superior será el nodo padre y todos los nodos que están por debajo serán nodos hijos.
Algunos de los tipos de nodos:
document, es el nodo raíz y del que derivan todos los edemás nodos del árbol.
element, representa cada una de las etiquetas XHTML. Es el único nodo que puede contener atributos y el único del que pueden derivar otros nodos.
Attr, con este tipo de nodos representamos los atributos de las etiquetas XHTML, es decir, un nodo por cada atributos = valor.
Text, es el 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 pueden ser: CdataSection, documentFragment, documentType, EntityReference, entity, Notation y processingInstruction.
Acceso a los nodos.
El accededr a un nodo específico lo podremos hacer empleando dos métodos: a través de los nodos padres, o bien usando método de acceso directo. A través de los nodos padres partiendo del nodo raiz, accediendo a los nodos hijos y asi sucesivamente hasta llegar al elemento que queriamos.
GetElementsName(), Esta función obtiene una colección, que contiene todos los elementos de la página XHTML cuyo atributo name coincida con el indicado como parámetro.
var elementos = document.getElementsByName("apellidos");
Una colección no es un array, aunque se le parezca mucho, ya que aunque puedas recorrerla y referenciar a sus elementos como un array, no se pueden usar métodos de array, como push o pop, en la colección.
getElementById(), esta función es la más utilizada, ya que nos permite acceder directamente al elemento por el ID. Entre paréntesis escribiremos la cadena de texto con el ID. Es muy importante que el ID sea único para cada elemento de una misma página. La función nos devolverá únicamente el nodo buscando.
var elemento= document.getElementById("apellidos");
NOTA: Cuando escribimos los atributos en HTML, da igual que se pongan en mayúsculas o minúsculas, pero si estamos trabajando con XHTML debermos escribirlos siempre en minúculas , ejemplo type, value, size, etc.
El tamaño máximo de lo que se puede almacenar en un nodo de texto, depende del navegador, por lo que muchas veces, si el texto es muy largo, tendremos que consultar varios nodos para ver todo el contenido.
En el DOM de HTML, para acceder al valor de un nodo de texto, o modificarlo, es muy común ver la porpiedad innerHTML. Esta propiedad es de microsoft al igual que outerHTML. Aunque hasta HTML5 no estaba en el estándar de W3C esta propiedad está soportada por todos los navegadors, y es muy rápida en su uso para hacr modificaciones, del contenido de un DIV por ejemplo. outerHTML no se soporta en el estandar.
Para modificar el contenido del nodo, modificaremos la propiedad nodeValue.
document.getElementsByTagName("p")[0].childNodes[1].firstChild.nodeValue = "Texto MODIFICADO";
Lo que hace es cambiar la cadena de texto "texto HTML", por "texto MODIFICADO".
Creación y borrado de nodos
La creación y borrado de nodos fue uno de los objetos para los que se creó el DOM. Podremos crear elementos y luego insertarlos en el DOM, y la actualización quedará reflejada automaticamente por el navegador. También podremos mover nodos ya existentes, simplemente insertándolo en cualquier otro lugar del árbol del DOM.
Ten en cuenta que cuando estemos creando nodos de elementos, el elemento debe estar en minúsculas. Aunque en HTML esto daría igual, el XHTML sí que es sensible a mayúsculas y tendrá que ir, por lo tanto, en minúsculas.
para crear se usan los metodos createElement(), createTextNode() y appendChild(), que nos permitirán crear un elemento, crear un nodo de texto y añadir un nuevo nodo hijo.
//Creamos tres elementos nuevos: p, b, br var elementoP = document.createElement('p'); var elementoB = document.createElement('b');
var elementoBR = document.createElement('br');
//Le asignamos un nuevo atributo title al elementoP que hemos creado. elementoP.setAttribute('title','Parrafo creado desde JavaScript');
//Preparamos los nodos de texto var texto1 = document.createTextNode('Con JavaScript se '); var texto2 = document.createTextNode('pueden realizar '); var texto3 = document.createTextNode('un monton'); var texto4 = document.createTextNode(' de cosas sobre el documento.');
//Añadimos al elemento B los nodos de texto2, elemento BR y texto3. elementoB.appendChild(texto2); elementoB.appendChild(elementoBR); elementoB.appendChild(texto3); //Añadimos al elemento P los nodos de texto1, elemento B y texto 4. elementoP.appendChild(texto1); elementoP.appendChild(elementoB); elementoP.appendChild(texto4);
//insertamos el nuevo párrafo como un nuevo hijo de nuestro párrafo document.getElementById('parrafito').appendChild(elementoP);
Propiedades y métodos de los objetos nodo
Todo lo que se utiliza en la actualidad es el DOM 2, y algunas de las extensiones de DOM 3. Por que el DOM 3 esa creado para XHTML.
Nota: hay que procurar evitar utilizar funciones especificas de DOM 1 por los problemas inesperados que se pueddad dar sobre todo si se utilizan en XHTML.
Gestión de eventos
Cuando el usuario hace algo, se produce un evento. Tambien habrá algunos eventos que no están relacionados directamente con acciones de usuario: ejemplo: el evento carga de un documento, que es el caso de "load", se dispara automaticamente cuando un documento ha sido cargado en el navegador.
Existen diferencias, en lo que es la gestión de eventos, por unos navegadores u otros. Esas diferencias provocan que los programadores tengan que tener mucha precaución con los métodos y propiedades que usan, dependiendo del navegador que ejecutará la página de javascript.
un ejemplo de solución es cross-browser para asignar evento, independientemente del navegador utilizado. Ejemplo:
function crearEvento(elemento, tipoEvento, funcion) { if (elemento.addEventListener) { elemento.addEventListener(tipoEvento, funcion, false); } else if (elemento.attachEvent) { elemento.attachEvent("on" + tipoEvento, funcion); } else { elemento["on" + tipoEvento] = funcion; }}var miparrafo = document.getElementById("parrafito");crearEvento(miparrafo, 'click', function () { alert("hola")});
No hay comentarios:
Publicar un comentario