INSTITUTO TECNOLGICO SUPERIOR DE PTZCUARO

PROGRAMACIN DE SISTEMAS WEB II

DOM
ISC. ALFREDO AYALA ORTEGA.

ALUMNO: JOS ANTONIO NAMBO MENDOZA. MATRICULA: 07090005

GRUPO: LIN02

SEMESTRE: NOVENO

1. TIPOS DE NODOS (CONSTANTES):

En algn momento podemos necesitar identificar el tipo de un nodo, y para eso contamos con la propiedad nodeType, que devuelve un nmero. A continuacin recojo el tipo de nodo que corresponde a cada nmero:

Tipo de nodo
Element Attr Text CDataSection EntityReference Entity ProcessingInstruction Comment Document DocumentType DocumentFragment Notation

Constante
Node.ELEMENT_NODE Node.ATTRIBUTE_NODE Node.TEXT_NODE Node.CDATA_SECTION_NODE Node.ENTITY_REFERENCE_NODE Node.ENTITY_NODE Node.PROCESSING_INSTRUCTION_NODE Node.COMMENT_NODE Node.DOCUMENT_NODE Node.DOCUMENT_TYPE_NODE Node.DOCUMENT_FRAGMENT_NODE Node.NOTATION_NODE

descripcin
Representa un elemento. Representa un atributo de un elemento, en combinacin con su valor. Representa un texto dentro de un elemento, o de una seccin CData. Representa una seccin <[!CDATA[]]>. Representa una referencia de entidad. Representa la definicin de una entidad en la DTD. Representa una instruccin de proceso. Representa un comentario en el cdigo XML. Este nodo es nico, y representa el documento en s. Este nodo tambin es nico, y representa la referencia a la DTD del documento, es decir, la lnea del <!DOCTYPE>. Representa un fragmento del modelo total del rbol del documento. Representa una notacin definida en la DTD.

Hijos? Nmero
si no no si no no no no Si no si no 1 2 3 4 5 6 7 8 9 10 11 12

2. PROPIEDADES Y MTODOS DE LOS NODOS:

2.1

PROPIEDADES GENERALES DE LOS NODOS:

Independientemente del tipo de nodo, hay una serie de propiedades generales que comparten, y que se muestran en la tabla siguiente:

Propiedad
nodeName

Descripcin
El nombre del nodo, que se define dependiendo del tipo de nodo. El valor del nodo, que se define dependiendo del tipo de nodo. Un nmero que representa el tipo de nodo del que se trata. El documento al que pertenece el nodo. (Referencia del documento al que pertenece el nodo) El primer hijo del nodo. (Referencia del primer nodo de la lista childNodes) El ltimo hijo del nodo. (Referencia del ltimo nodo de la lista childNodes) Una lista de los hijos de un nodo actual. El hermano anterior al nodo.

Devuelve
Una cadena literal

Tipo del valor devuelto

String

nodeValue

Una cadena literal

String

nodeType ownerDocument

Un nmero del 1 al 12 El documento

Number Document

firstChild

Un nodo

Node

lastChild

Un nodo

Node

childNodes previousSibling

una matriz de nodos Un nodo, o null si el nodo es

NodeList Node

el primer hijo nextSibling hasChildNodes attributes El hermano siguiente al nodo. Un nodo, o null si el nodo es el ltimo hijo Indica si el nodo tiene hijos o Un booleano no. Se emplea con nodos de Una matriz con los atributos tipo Element. Una lista con los atributos del nodo. Node Bolean NamedNodeMap

2.2 Mtodo
appendChil d(nodo)

MTODOS DE LOS NODOS: Valor devuelto

Node

Para trabajar incorporando, modificando o eliminando nodos, contamos con los mtodos que vamos a ver a continuacin:

Descripcin

Ejemplo

Por medio de appendChild podemos incluir var lista = document.createElement('ul'); var item = document.createElement('li'); en un nodo un nuevo hijo, de esta manera: lista.appendChild(item); elemento_padre.appendChild(nuevo_nodo) Crea un elemento ul y un elemento li, y convierte el ; segundo en hijo del primero. El nuevo nodo se incluye inmediatamente despus de los hijos ya existentes si hay alguno y el nodo padre cuenta con una nueva rama.

removeChil d(nodo)

Node

Elimina un nodo de la lista childNodes La document.getElementById('padre').removeChild(se gundo_p); sintaxis es:

elemento_padre.removeChild(nodo_a_elim inar); replaceChild Node (nuevoNodo , anteriorNod o) Reemplaza el nodo anteriorNodo por el document.getElementById('padre').replaceChild(nu evo_parrafo,segundo_p); nodo nuevoNodo , cuya sintaxis es:

elemento_padre.replaceChild(nuevo_nodo, nodo_a_reemplazar) Inserta el nodo nuevoNodo antes que la Si tuviramos un fragmento de un documento como posicin del nodo anteriorNodo dentro de ste: la lista childNodes Su sintaxis es: <div id="padre"> <p>Un prrafo.</p> <p>Otro prrafo.</p> </div> y quisiramos aadir un nuevo prrafo antes del segundo, lo haramos as: // Creamos el nuevo prrafo var nuevo_parrafo = document.createElement('p').appendChild(documen t.createTextNode('Nuevo prrafo.')); // Recojemos en una variable el segundo prrafo var segundo_p = document.getElementById('padre').getElementsByT agName('p')[1];

insertBefore (nuevoNodo , anteriorNod o)

Node

elemento_padre.insertBefore(nuevo_nodo, nodo_de_referencia);

// Y ahora lo insertamos document.getElementById('padre').insertBefore(nue vo_parrafo,segundo_p); cloneNode node podemos crear un clon de un nodo por Si quisiramos clonar un div (con dos prrafos de medio de cloneNode: contenido) con el siguiente cdigo: elemento_a_clonar.cloneNode(booleano); var clon = El booleano que se pasa como parmetro document.getElementById('padre').cloneNode(false define si se quiere clonar el elemento ); con el valor false, o bien si se quiere clonar con su contenido con el clon contendra un elemento div, pero de esta valor true, es decir, el elemento y todos manera: sus descendientes. var clon = document.getElementById('padre').cloneNode(true); Contendra un elemento div con los dos prrafos que contendran los mismos nodos de texto que el original.

2.3

MTODOS PARA TRATAR CON LOS ATRIBUTOS DE LOS ELEMENTOS: Mtodo Valor devuelto
Devuelve el nodo cuya propiedad nodeName contenga el valor nombre.

getNamedItem(nombre)

removeNamedItem(nombre) Elimina el nodo cuya propiedad nodeName coincida conel valor nombre.

setNamedItem(nodo) item(posicion)

Aade el nodo a la lista NamedNodeMap , indexndolo segn su propiedad nodeName. Devuelve el nodo que se encuentra en la posicin indicada por el valor numrico posicin.

Los mtodos anteriores devuelven un nodo de tipo Attr y, por tanto, no devuelven el valor del atributo de forma directa. Empleando los mtodos anteriores, es posible procesar y modificar fcilmente los atributos de los elementos HTML: <p id="introduccion" style="color: blue"> Prrafo de prueba </p> var p = document.getElementById("introduccion"); var elId = p.attributes.getNamedItem("id").nodeValue; // elId = "introduccion" var elId = p.attributes.item(0).nodeValue; // elId = "introduccion" p.attributes.getNamedItem("id").nodeValue = "preintroduccion"; Afortunadamente, DOM proporciona otros mtodos que permiten el acceso y la modificacin de los atributos de forma ms directa:

Mtodo
getAttribute(nombre) setAttribute(nombre,valor) removeAttribute(nombre)

Valor devuelto
Es equivalente a attributes.getNamedItem(nombre) Equivalente a attributes.getNamedItem(nombre).va-lue = valor equivalente a attributes.removeNamedItem(nombre)

2.4 MTODOS DE ACCESO DIRECTO A LOS NODOS: Mtodo Descripcin

getElementsByTagName() La funcin getElementsByTagName(nombreEtiqueta) obtiene todos los elementos de la pgina XHTML cuya etiqueta sea igual que el parmetro que se le pasa a la funcin

Ejemplo
El siguiente ejemplo muestra cmo obtener todos los prrafos de una pgina XHTML:

Valor devuelto

El valor que devuelve la funcin es un array con todos los nodos que cumplen la condicin de que su etiqueta coincide con el var parrafos = parmetro proporcionado (en document.getElementsByTag realidad, no se devuelve un Name("p"); array normal sino un objeto de tipo NodeList ). De este modo, el primer prrafo de la pgina se podra acceder de la siguiente manera: var primerParrafo = parrafos[0];

getElementsByName()

La funcin getElementsByName() es similar a la anterior, pero en este caso se buscan los elementos cuyo atributo name sea igual al parmetro proporcionado.

En el siguiente ejemplo, se En el caso de que varios obtiene directamente el elementos HTML tengan nico prrafo con el como atributo name comn la nombre indicado: funcin devuelve una coleccin de elementos. var parrafoEspecial = document.getElementsByNam e("especial"); La funcin getElementById() devuelve el elemento XHTML cuyo atributo id coincide con el

getElementById()

La funcin getElementById() es la funcin var cabecera = ms utilizada cuando se desarrollan document.getElementById aplicaciones web dinmicas. Se trata de la "cabecera");<div

funcin preferida para acceder id="cabecera"><a href="/" directamente a un nodo y poder leer o id="logo">...</a></div> modificar sus propiedades.

parmetro indicado en la funcin. Como el atributo id debe ser nico para cada elemento de una misma pgina, la funcin devuelve nicamente el nodo deseado.

2.5

MTODOS PARA CREAR, MODIFICAR Y ELIMINAR NODOS:

Hasta ahora, todos los mtodos DOM presentados se limitan al acceso a los nodos y sus propiedades. El siguiente paso lgico es el de proporcionar los mtodos necesarios para la creacin, modificacin y eliminacin de nodos dentro del rbol de nodos DOM. Los mtodos DOM disponibles para la creacin de nuevos nodos son los siguientes:

Mtodo
createAttribute(nombre) createCDataSection(texto) createComment(texto) createDocumentFragment() createElement(nombre_etiqueta) createEntityReference(nombre) createProcessingInstruction(objetivo,datos) createTextNode(texto)

Descripcin
Crea un nodo de tipo atributo con el nombre indicado. Crea una seccin CDATA con un nodo hijo de tipo texto que contiene el valor indicado. Crea un nodo de tipo comentario que contiene el valor indicado Crea un nodo de tipo DocumentFragment Crea un elemento del tipo indicado en el parmetro nombre_etiqueta Crea un nodo de tipo EntityReference Crea un nodo de tipo ProcessingInstruction Crea un nodo de tipo texto con el valor indicado como parmetro