HTML y Dom Actual

S.E.P.
D.G.E.S.T.
INSTITUTO TECNOLGICO
del Istmo
MATERIA:
PROGRAMACION WEB
CATEDRATICO:
LIC. LPOEZ POSADA JOSE ANTONIO
UNIDAD II
CAPITULO 4 .DOM (Document Object Model)
TEMA:
4.3 LA INTERFZ NODE
4.4 HTML Y DOM
PRESENTAN:
ACEVEDO GUERRA ANA DELY 06190606
MARTINEZ ENDOLAY CLAUDIA
MIGUEL CRUZ MARIA SELENE 06190610
VILLANUEVA CABRERA LUIS ANGEL
ESPECIALIDAD:
LIC. EN INFORMATICA
SEMESTRE Y GRUPO:
8 S
Heroica. Cd. De Juchitn de Zaragoza, Oax., A de 25 Marzo de 2010
INDICE
NPAG.
LA INTERFAZ NODE3
HTML Y DOM..4
ACCESO RELATIVO A LOS NODOS...5
TIPOS DE NODOS...6
ATRIBUTOS...7
ACCESO DIRECTO A LOS NODOS.........8
FUNCIN GETELEMENTSBYTAGNAME()..............9
Funcin getElementsByName().12
FUNCIN GETELEMENTBYID()...............13
CREAR, MODIFICAR Y ELIMINAR NODOS........15
Atributos HTML y propiedades CSS en DOM....19
Tablas HTML en DOM....21
BIBLIOGRAFIA...25
4.3. LA INTERFAZ NODE

Una vez que DOM ha creado de forma automtica el rbol completo de nodos de
la pgina, ya es posible utilizar sus funciones para obtener informacin sobre los
nodos o manipular su contenido. JavaScript crea el objeto Node para definir las
propiedades y mtodos necesarios para procesar y manipular los documentos.
En primer lugar, el objeto Node define las siguientes constantes para la
identificacin 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
Adems de estas constantes, Node proporciona las siguientes propiedades y
mtodos:
Los mtodos y propiedades incluidas en la tabla anterior son especficos de XML,

aunque pueden aplicarse a todos los lenguajes basados en XML, como por
ejemplo XHTML. Para las pginas creadas con HTML, los navegadores hacen
como si HTML estuviera basado en XML y lo tratan de la misma forma. No
obstante, se han definido algunas extensiones y particularidades especficas para
XHTML y HTML.
4.4. HTML y DOM

El Document Object Model (una traduccin al espaol no literal, pero apropiada,
podra ser Modelo en Objetos para la representacin de Documentos o
tambin Modelo de Objetos del Documento ), abreviado DOM, es esencialmente
una interfaz de programacin de aplicaciones que proporciona un conjunto
estndar de objetos para representar documentos HTML y XML, un modelo
estndar sobre cmo pueden combinarse dichos objetos, y una interfaz estndar
para acceder a ellos y manipularlos.
La creacin del Document Object Model o DOM es una de las innovaciones que
ms ha influido en el desarrollo de las pginas web dinmicas y de las
aplicaciones web ms complejas.
DOM permite a los programadores web acceder y manipular las pginas XHTML
como si fueran documentos XML. De hecho, DOM se dise originalmente para
manipular de forma sencilla los documentos XML.
A pesar de sus orgenes, DOM se ha convertido en una utilidad disponible para la
mayora de lenguajes de programacin (Java, PHP, JavaScript) y cuyas nicas
diferencias se encuentran en la forma de implementarlo.
Desafortunadamente, las posibilidades tericas de DOM son mucho ms
avanzadas de las que se pueden utilizar en la prctica para desarrollar
aplicaciones web. El motivo es que el uso de DOM siempre est limitado por las
posibilidades que ofrece cada navegador. Mientras que algunos navegadores
como Firefox y Safari implementan DOM de nivel 1 y 2 (y parte del 3), otros
4
navegadores como Internet Explorer (versin 7 y anteriores) ni siquiera son

capaces de ofrecer una implementacin completa de DOM nivel 1.
Cuando se utiliza DOM en pginas HTML, el nodo raz de todos los dems se
define en el objeto HTMLDocument. Adems, se crean objetos de tipo
HTMLElement por cada nodo de tipo Element del rbol DOM. Como se ver en el
siguiente captulo, el objeto document es parte del BOM (Browser Object Model),
aunque tambin se considera que es equivalente del objeto Document del DOM
de los documentos XML. Por este motivo, el objeto document tambin hace
referencia al nodo raz de todas las pginas HTML.
4.4.1. ACCESO RELATIVO A LOS NODOS

A continuacin se muestra la pgina HTML bsica 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 operacin bsica consiste en obtener el objeto que representa el elemento raz
de la pgina:
var objeto_html = document.documentElement;
Despus de ejecutar la instruccin anterior, la variable objeto_html contiene un
objeto de tipo HTMLElement y que representa el elemento <html> de la pgina
web. Segn el rbol de nodos DOM, desde el nodo <html> derivan dos nodos del
mismo nivel jerrquico: <head> y <body>.
Utilizando los mtodos 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;
5
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 nmero de nodos hijo que dispone un nodo, se puede emplear
la propiedad length de childNodes:
var numeroDescendientes = objeto_html.childNodes.length;
Adems, el DOM de HTML permite acceder directamente al elemento <body>
utilizando el atajo document.body:
var objeto_body = document.body;
Adems de las propiedades anteriores, existen otras propiedades como
previousSibling y parentNode que 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
EJEMPLO 1 :
<html>
<head>
<title>ejemplo de getElementsByTagName</title>
</head>
<body>
<script type="text/javascript">
var objeto_body = document.body;
alert(objeto_body);
</script>
</body>
</html>
4.4.2. TIPOS DE NODOS
Una operacin comn en muchas aplicaciones consiste en comprobar el tipo de
nodo, que se obtiene de forma directa mediante la propiedad nodeType:
6
alert(document.nodeType); // 9
alert(document.documentElement.nodeType); // 1
En el primer caso, el valor 9 es igual al definido en la constante
Node.DOCUMENT_NODE. En el segundo ejemplo, el valor 1 coincide con la
constante Node.ELEMENT_NODE. Afortunadamente, no es necesario memorizar
los valores numricos de los tipos de nodos, ya que se pueden emplear las
constantes predefinidas:
alert(document.nodeType == Node.DOCUMENT_NODE); // true
alert(document.documentElement.nodeType == Node.ELEMENT_NODE); // true
El nico navegador que no soporta las constantes predefinidas es Internet
Explorer 7 y sus versiones anteriores, por lo que si se quieren utilizar es necesario
definirlas de forma explcita:
EJEMPLO 1:
<html>
<head>
</head>
<body>
alert(document.nodeType); // 9
</script>
</body>
</html>
EJEMPLO 2:
<html>
<head>
</head>
<body>
alert(document.documentElement.nodeType); // 1
</script>
</body>
</html>
EJEMPLO3:
<html>
<head>
</head>
<body>
if(typeof Node == "undefined") {
var Node = {
ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_NODE: 3,
CDATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSING_INSTRUCTION_NODE: 7,
COMMENT_NODE: 8,
DOCUMENT_NODE: 9,
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11,
NOTATION_NODE: 12
};
}
alert(Node)
</script>
</body>
</html>
El cdigo anterior comprueba si el navegador en el que se est ejecutando tiene

definido el objeto Node. Si este objeto no est definido, se trata del navegador
Internet Explorer 7 o alguna versin anterior, por lo que se crea un nuevo objeto
llamado Node y se le incluyen como propiedades todas las constantes definidas
por DOM.
4.4.3. ATRIBUTOS
Adems del tipo de etiqueta HTML y su contenido de texto, DOM permite el
acceso directo a todos los atributos de cada etiqueta. Para ello, los nodos de tipo
Element contienen la propiedad attributes, que permite acceder a todos los
atributos de cada elemento. Aunque tcnicamente la propiedad attributes es de
tipo NamedNodeMap, sus elementos se pueden acceder como si fuera un array.
DOM proporciona diversos mtodos para tratar con los atributos:
getNamedItem(nombre), devuelve el nodo cuya propiedad nodeName contenga
el valor nombre.
removeNamedItem(nombre), elimina el nodo cuya propiedad nodeName coincida
con el valor nombre.
setNamedItem(nodo), aade el nodo a la lista attributes, indexndolo segn su
propiedad nodeName.
item(posicion), devuelve el nodo que se encuentra en la posicin indicada por el
valor numrico posicion.
Los mtodos anteriores devuelven un nodo de tipo Attr, por lo que no devuelven
directamente el valor del atributo. Utilizando estos mtodos, es posible procesar y
modificar fcilmente los atributos de los elementos HTML:
EJEMPLO:
4.4.4. ACCESO DIRECTO A LOS NODOS

Los mtodos presentados hasta el momento permiten acceder a cualquier nodo
del rbol de nodos DOM y a todos sus atributos. Sin embargo, las funciones que
proporciona DOM para acceder a un nodo a travs de sus padres obligan a
acceder al nodo raz de la pgina y despus 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.
Cuando se trabaja con una pgina web real, el rbol DOM tiene miles de nodos de
todos los tipos.
Por este motivo, no es eficiente acceder a un nodo descendiendo a travs de
todos los ascendentes de ese nodo.
Para solucionar este problema, DOM proporciona una serie de mtodos para
acceder de forma directa a los nodos deseados. Los mtodos disponibles son
getElementsByTagName(), getElementsByName() y getElementById
4.4.4.1. Funcin getElementsByTagName()
La funcin getElementsByTagName() obtiene todos los elementos de la pgina
XHTML cuya etiqueta sea igual que el parmetro que se le pasa a la funcin.
El siguiente ejemplo muestra cmo obtener todos los prrafos de una pgina
XHTML:
var parrafos = document.getElementsByTagName("p");
El valor que devuelve la funcin es un array con todos los nodos que cumplen la
condicin de que su etiqueta coincide con el parmetro proporcionado. En
realidad, el valor devuelto no es de tipo array normal, sino que es un objeto de tipo
NodeList. De este modo, el primer prrafo de la pgina se puede obtener de la
siguiente manera:
10

var primerParrafo = parrafos[0];
De la misma forma, se pueden recorrer todos los prrafos de la pgina recorriendo
el array de nodos devuelto por la funcin:
EJEMPLO
<html>
<head>
</head>
<body>
for(var i=0; i<parrafos.length; i++) {
var parrafo = parrafos[i];
}
alert(parrafos);
</script>
</body>
</html>
La funcin getElementsByTagName() se puede aplicar de forma recursiva sobre
cada uno de los nodos devueltos por la funcin. En el siguiente ejemplo, se
obtienen todos los enlaces del primer prrafo de la pgina:
var primerParrafo = parrafos[0];
var enlaces = primerParrafo.getElementsByTagName("a");
Ejemplo 1 Funcin getElementsByTagName()
html>
<head>
function getAllParaElems(){
var allParas = document.getElementsByTagName("p");
var num = allParas.length;
alert("Hay " + num + " <p> elementos en este documento");
11
}
function div1ParaElems()
{
var div1 = document.getElementById("div1")
var div1Paras = div1.getElementsByTagName("p");
var num = div1Paras.length;
alert("Hay " + num + " <p> elementos en el elemento div1");
}
function div2ParaElems()
{
var div2 = document.getElementById("div2")
var div2Paras = div2.getElementsByTagName("p");
var num = div2Paras.length;
alert("Hay " + num + " <p> elementos en el elemento div2");
}
</script>
</head>
<body style="border: solid green 3px">
<p>Algo de texto</p>
<div id="div1" style="border: solid blue 3px">
<p>Algo de texto en div1</p>
<div id="div2" style="border: solid red 3px">

12
</div>
</div>
<button onclick="getAllParaElems();">
muestra todos los elementos p en el documento</button><br />
<button onclick="div1ParaElems();">
muestra todos los elementos p en div1</button><br />
<button onclick="div2ParaElems();">
muestra todos los elementos p en div2</button>
</body>
</html>
Ejemplo 2
<html>
<head>
<title>Demo DOM con tablas</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
var cont=1;
function addrow(tc1,tc2) {
var tbl = document.getElementById('tabla');
var row = document.createElement('tr');
var c0 = document.createElement('td')
c0.innerHTML=cont;
cont++;
c1.innerHTML=tc1;
c2.innerHTML=tc2;
row.appendChild(c0);
tbl.appendChild(row);
}
function addrow2() {
var frm = document.getElementById('forma');
addrow(frm.c1.value,frm.c2.value);
}
</script>
</head>
<body>
<h2>Demo de DOM con tablas</h2>
13
<form id='forma'>
Columna 1:<input type="text" name="c1">
Columna 2:<input type="text" name="c2">
<input type="button" value="add" onclick="javascript:addrow2()">
<input type="reset">
</form>
<div onclick="javascript:addrow('vacio','vacio')">Adicionar fila</div><br/>
<table cellpadding="0" cellspacing="0" border="1" id="tabla">
<tr>
<td></td><th>col 1</th><th>col 2</th>
</tr>
</table>
<hr>
</body>
</html>
4.4.4.2. Funcin getElementsByName()

La funcin getElementsByName() obtiene todos los elementos de la pgina
XHTML cuyo atributo name coincida con el parmetro que se le pasa a la funcin.
En el siguiente ejemplo, se obtiene directamente el nico prrafo de la pgina que
tiene el nombre indicado:
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
Normalmente el atributo name es nico para los elementos HTML que lo incluyen,
por lo que es un mtodo muy prctico para acceder directamente al nodo
deseado. En el caso de los elementos HTML radiobutton, el atributo name es
comn a todos los radiobutton que estn relacionados, por lo que la funcin
devuelve una coleccin de elementos.
Internet Explorer 7 y sus versiones anteriores no implementan de forma correcta
esta funcin, ya que tambin devuelven los elementos cuyo atributo id sea igual al
parmetro de la funcin.
4.4.4.3. Funcin getElementById()
La funcin getElementById() es la funcin ms utilizada cuando se desarrollan
aplicaciones web dinmicas. Se trata de la funcin preferida para acceder
directamente a un nodo y para leer o modificar sus propiedades.
14
La funcin getElementById() devuelve el elemento XHTML cuyo atributo id

coincide con el 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.
var cabecera = document.getElementById("cabecera");
<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
Ejercicio 7
A partir de la pgina web proporcionada y utilizando las funciones DOM, mostrar
por pantalla la siguiente informacin:
1. Nmero de enlaces de la pgina
2. Direccin a la que enlaza el penltimo enlace
3. Numero de enlaces que enlazan a http://prueba
4. Nmero de enlaces del tercer prrafo
Ejercicio 8
A partir de la pgina web proporcionada y utilizando las funciones DOM:
1. Se debe modificar el protocolo de todas las direcciones de los enlaces. De esta
forma, si un enlace apuntaba a http://prueba, ahora debe apuntar a https://prueba
2. Los prrafos de la pgina cuyo atributo class es igual a "importante" deben
modificarlo por "resaltado". El resto de prrafos deben incluir un atributo class
igual a "normal".
Ejemplo1 Funcin getElementById()

<html>
<head>
<title>Propagacin del evento</title>
<style type="text/css">
#t-daddy { border: 1px solid red }
#c1 { background-color: pink; }
</style>
15
function stopEvent(ev) {
c2 = document.getElementById("c2");
c2.innerHTML = "hola";
// this ought to keep t-daddy from getting the click.
ev.stopPropagation();
alert("La propagacin del evento se ha parado.");
}
function load() {
elem = document.getElementById("tbl1");
elem.addEventListener("click", stopEvent, false);
}
</script>
</head>
<body onload="load();">
<table id="t-daddy" onclick="alert('hi');">
<tr id="tbl1">
<td id="c1">uno</td>
</tr>
<tr>
<td id="c2">dos</td>
</tr>
</table>
</body>
Ejemplo2
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Ejemplo de ''getComputedStyle''</title>
function cStyles()
{
var RefDiv = document.getElementById("d1");
var txtHeight = document.getElementById("t1");
var h_style =
16
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
txtHeight.value = h_style;
var txtWidth = document.getElementById("t2");
var w_style =
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
txtWidth.value = w_style;
var txtBackgroundColor = document.getElementById("t3");
var b_style =
document.defaultView.getComputedStyle(RefDiv,
null).getPropertyValue("background-color");
txtBackgroundColor.value = b_style;
}
</script>
<style type="text/css">
#d1 { margin-left: 10px; background-color: rgb(173, 216, 230);
height: 20px; max-width: 20px; }
</style>
</head>
<body>
<div id="d1"> </div>
<form action="">
<p><button type="button" onclick="cStyles();">getComputedStyle</button>
height<input id="t1" type="text" value="1">
max-width<input id="t2" type="text" value="2">
bg-color<input id="t3" type="text" value="3"></p>
</form>
</body>
</html>
4.4.5. CREAR, MODIFICAR Y ELIMINAR NODOS
Todos los mtodos DOM presentados se limitan a acceder a los nodos y sus
propiedades. A continuacin, se muestran los mtodos necesarios para la
creacin, modificacin y eliminacin de nodos dentro del rbol de nodos DOM:
17
A continuacin se muestra los paso de un ejemplo sencillo en el que se crea un

nuevo nodo (una nueva etiqueta HTML) y se aade dinmicamente a la siguiente
pgina HTML.
<html>
<head><title>Ejemplo de creacin de nodos</title></head>
<body>
<p>Este prrafo no exista en la pgina HTML original</p>
</body>
</html>
1. Crear un nodo de tipo elemento
2. Crear un nodo de tipo texto
3. Asociar el nodo de texto al elemento
4. Aadir el nuevo nodo de tipo elemento a la pgina original
En primer lugar, se crea un nuevo nodo de tipo elemento:
var p = document.createElement("p");
EJEMPLO1:
<html>
18

<body>
var p = document.createElement("p");
alert(p);
</script>
</body>
</html>
En segundo lugar se crea un nodo de texto que almacena el contenido de texto del
prrafo:
var texto = document.createTextNode("Este prrafo no exista en la pgina HTML
original");
EJEMPLO 2:
<html>
<body>
var texto = document.createTextNode("Este prrafo no exista");
alert(texto);
</script>
</body>
</html>
En tercer lugar, se asocia el elemento creado y su contenido de texto (los nodos
de tipo Text son hijos de los nodos de tipo Element):
p.appendChild(texto);
EJEMPLO 3:
<html>
<head><title>Ejemplo de eliminacin de nodos</title></head>
19
<body>
var p = document.getElementsByTagName("p")[0];
alert(p);
</script>
</body>
</html>
El mtodo appendChild() est definido para todos los diferentes tipos de nodos y
se encarga de aadir un nodo al final de la lista childNodes de otro nodo.
Por ltimo, se aade el nodo creado al rbol de nodos DOM que representa a la
pgina.
Utilizando el mtodo appendChild(), se aade el nodo como hijo del nodo que
representa al elemento <body> de la pgina:
document.body.appendChild(p);
EJEMPLO 4:
<html>
<body>
<p>Este parrafo va a ser</p>
document.body.removeChild(p);
alert(p);
</script>
</body>
</html>
Por otra parte, tambin se pueden utilizar funciones DOM para eliminar cualquier
nodo existente originalmente en la pgina y cualquier nodo creado mediante los
mtodos DOM:
Si se considera la siguiente pgina HTML con un prrafo de texto:
20
<html>
<body>
<p>Este parrafo va a ser eliminado dinamicamente</p>
</body>
</html>
En primer lugar, se obtiene la referencia al nodo que se va a eliminar:
Para eliminar cualquier nodo, se emplea la funcin removeChild(), que toma como
argumento la referencia al nodo que se quiere eliminar. La funcin removeChild()
se debe invocar sobre el nodo padre del nodo que se va a eliminar. En este caso,
el padre del primer prrafo de la pginaes el nodo <body>:
document.body.removeChild(p);
La pgina HTML que resulta despus de la ejecucin del cdigo JavaScript
anterior se muestra a continuacin:
<html>
<body></body>
</html>
Adems de crear y eliminar nodos, las funciones DOM tambin permiten
reemplazar un nodo por otro. Utilizando la misma pgina HTML de ejemplo, se va
a sustituir el prrafo original por otro prrafo con un contenido diferente. La pgina
original contiene el siguiente prrafo:
<html>
<head><title>Ejemplo de sustitucin de nodos</title></head>
<body>
<p>Este parrafo va a ser sustituido dinamicamente</p>
</body>
</html>
Utilizando las funciones DOM de JavaScript, se crea el nuevo prrafo que se va a
mostrar en la pgina, se obtiene la referencia al nodo original y se emplea la
funcin replaceChild() para intercambiar un nodo por otro:
21
var nuevoP = document.createElement("p");

var texto = document.createTextNode("Este parrafo se ha creado dinmicamente y
sustituye al parrafo original");
nuevoP.appendChild(texto);
var anteriorP = document.body.getElementsByTagName("p")[0];
anteriorP.parentNode.replaceChild(nuevoP, anteriorP);
Despus de ejecutar las instrucciones anteriores, la pgina HTML resultante es:
<html>
<head><title>Ejemplo de sustitucin de nodos</title></head>
<body>
<p>Este parrafo se ha creado dinmicamente y sustituye al parrafo original</p>
</body>
</html>
Adems de crear, eliminar y sustituir nodos, las funciones DOM permiten insertar
nuevos nodos antes o despus de otros nodos ya existentes. Si se quiere insertar
un nodo despus de otro, se emplea la funcin appendChild(). Pgina HTML
original:
<html>
<head><title>Ejemplo de insercin de nodos</title></head>
<body>
<p>Primer parrafo</p>
</body>
</html>
El siguiente cdigo JavaScript crea un nuevo prrafo y lo inserta despus de
cualquier otro nodo de la pgina HTML:
var nuevoP = document.createElement("p");
var texto = document.createTextNode("Segundo parrafo");
nuevoP.appendChild(texto);
document.body.appendChild(nuevoP);
Despus de ejecutar el cdigo JavaScript anterior, el cdigo HTML resultante es:
<html>
<head><title>Ejemplo de insercin de nodos</title></head>
<body>
<p>Primer parrafo</p>
<p>Segundo parrafo</p>
</body>
</html>
22
4.4.6. ATRIBUTOS HTML Y PROPIEDADES CSS EN DOM

Los mtodos presentados anteriormente para el acceso a los atributos de los
elementos, son genricos de XML. La versin de DOM especfica para HTML
incluye algunas propiedades y mtodos an ms directos y sencillos para el
acceso a los atributos de los elementos HTML y a sus propiedades CSS.
La principal ventaja del DOM para HTML es que todos los atributos de todos los
elementos HTML se transforman en propiedades de los nodos. De esta forma, es
posible acceder de forma directa a cualquier atributo de HTML. Si se considera el
siguiente elemento <img> de HTML con sus tres atributos:
<img id="logo" src="logo.gif" border="0" />
Empleando los mtodos tradicionales de DOM, se puede acceder y manipular
cada atributo:
var laImagen = document.getElementById("logo");
// acceder a los atributos
var archivo = laImagen.getAttribute("src");
var borde = laImagen.getAttribute("border");
// modificar los atributos
laImagen.setAttribute("src", "nuevo_logo.gif");
laImagen.setAttribute("border", "1");
La ventaja de la especificacin de DOM para HTML es que permite acceder y
modificar todos los atributos de los elementos de forma directa:
var laImagen = document.getElementById("logo");
// acceder a los atributos
var archivo = laImagen.src;
var borde = laImagen.border;
// modificar los atributos
laImagen.src = "nuevo_logo.gif";
laImagen.border = "1";
Las ventajas de utilizar esta forma de acceder y modificar los atributos de los
elementos es que el cdigo resultante es ms sencillo y conciso.
La nica excepcin que existe en esta forma de obtener el valor de los atributos
HTML es el atributo class. Como la palabra class est reservada por JavaScript
para su uso futuro, no es posible utilizarla para acceder al valor del atributo class
de HTML. La solucin consiste en acceder a ese atributo mediante el nombre
alternativo className:
23
<p id="parrafo" class="normal">...</p>

var parrafo = document.getElementById("parrafo");
alert(parrafo.class); // muestra "undefined"
alert(parrafo.className); // muestra "normal"
En primer lugar, los estilos CSS se pueden aplicar de varias formas diferentes
sobre un mismo elemento HTML. Si se establecen las propiedades CSS mediante
el atributo style de HTML:
<p id="parrafo" style="color: #C00">...</p>

El acceso a las propiedades CSS establecidas mediante el atributo style se realiza
a travs de la propiedad style del nodo que representa a ese elemento:
var color = parrafo.style.color;
En el caso de las propiedades CSS con nombre compuesto (font-weight, bordertop-style, list-style-type, etc.), para acceder a su valor es necesario modificar su
nombre original eliminando los guiones medios y escribiendo en maysculas la
primera letra de cada palabra que no sea la primera:

var negrita = parrafo.style.fontWeight;
El nombre original de la propiedad CSS es font-weight. Para obtener su valor
mediante JavaScript, se elimina el guin medio (fontweight) y se pasa a
maysculas la primera letra de cada palabra que no sea la primera (fontWeight).
Si el nombre de la propiedad CSS est formado por tres palabras, se realiza la

misma transformacin. De esta forma, la propiedad border-top-style se accede en
DOM mediante elnombre borderTopStyle.
Una vez obtenida la referencia del nodo, se puede modificar el valor de cualquier
propiedad CSS accediendo a ella mediante la propiedad style:
<p id="parrafo">...</p>
24
parrafo.style.margin = "10px"; // aade un margen de 10px al prrafo

parrafo.style.color = "#CCC"; // modifica el color de la letra del prrafo
Por otra parte, los estilos CSS normalmente se aplican mediante reglas CSS
incluidas en archivos externos. Si se utiliza la propiedad style de DOM para
acceder al valor de una propiedad CSS establecida mediante una regla externa, el
navegador no obtiene el valor correcto:
// Cdigo HTML
// Regla CSS
#parrafo { color: #008000; }
// Cdigo JavaScript
var color = parrafo.style.color; // color no almacena ningn valor
Para obtener el valor de las propiedades CSS independientemente de cmo se
hayan aplicado, es necesario utilizar otras propiedades de JavaScript. Si se utiliza
un navegador de la familia Internet Explorer, se hace uso de la propiedad
currentStyle. Si se utiliza cualquier otro navegador, se puede emplear la funcin
getComputedStyle().
// Cdigo HTML
// Regla CSS
#parrafo { color: #008000; }
// Cdigo JavaScript para Internet Explorer
var color = parrafo.currentStyle['color'];
// Cdigo JavaScript para otros navegadores
var color = document.defaultView.getComputedStyle(parrafo,
'').getPropertyValue('color');
La propiedad currentStyle requiere el nombre de las propiedades CSS segn el
formato de JavaScript (sin guiones medios), mientras que la funcin
getPropertyValue() exige el uso del nombre original de la propiedad CSS.
25
4.4.7. TABLAS HTML EN DOM

Las tablas son elementos muy comunes en las pginas HTML, por lo que DOM
proporciona mtodos especficos para trabajar con ellas. Si se utilizan los mtodos
tradicionales, crear una tabla es una tarea tediosa, por la gran cantidad de nodos
de tipo elemento y de tipo texto que se deben crear.
Afortunadamente, la versin de DOM para HTML incluye varias propiedades y
mtodos para crear tablas, filas y columnas de forma sencilla.
Propiedades y mtodos de <table>:
Propiedades y mtodos de <tbody>:
Propiedades y mtodos de <tr>:
26
Si se considera la siguiente tabla XHTML:

<table summary="Descripcin de la tabla y su contenido">
<caption>Ttulo de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Cabecera columna 1</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col"></th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Cabecera fila 1</th>
<td>Celda 1 - 1</td>
</tr>
<tr>
<th scope="row">Cabecera fila 2</th>
</tr>
</tbody>
</table>
A continuacin se muestran algunos ejemplos de manipulacin de tablas XHTML
mediante las propiedades y funciones especficas de DOM.
Obtener el nmero total de filas de la tabla:
27
var tabla = document.getElementById('miTabla');

var numFilas = tabla.rows.length;
Obtener el nmero total de cuerpos de la tabla (secciones <tbody>):
var numCuerpos = tabla.tBodies.length;
Obtener el nmero de filas del primer cuerpo (seccin <tbody>) de la tabla:
var numFilasCuerpo = tabla.tBodies[0].rows.length;
Borrar la primera fila de la tabla y la primera fila del cuerpo (seccin <tbody>):
tabla.deleteRow(0);
tabla.tBodies[0].deleteRow(0);
Borrar la primera columna de la primera fila del cuerpo (seccin <tbody>):
tabla.tBodies[0].rows[0].deleteCell(0);
Obtener el nmero de columnas de la primera parte del cuerpo (seccin <tbody>):
var numColumnas = tabla.rows[0].cells.length;
Obtener el texto de la primera columna de la primera fila del cuerpo (seccin
<tbody>):
var texto = tabla.tBodies[0].rows[0].cells[0].innerHTML;
Recorrer todas las filas y todas las columnas de la tabla:
var filas = tabla.rows;
for(var i=0; i<filas.length; i++) {
var fila = filas[i];
var columnas = fila.cells;
for(var j=0; j<columnas.length; j++) {
var columna = columnas[j];
// ...
}
}
28
BIBLIOGRAFIA
Introduccin a JavaScript, autor: Javier Eguluz Prez; Captulo 2. El primer
script, pgs.13-15 Esta versin impresa se cre el 25 de marzo de 2009 y todava
est incompleta. La versin ms actualizada de los contenidos de este libro se
puede encontrar en http://www.librosweb.es/javascript
29

HTML y Dom Actual

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML y Dom Actual

Cargado por

Copyright:

Formatos disponibles

S.E.P.

Heroica. Cd. De Juchitn de Zaragoza, Oax., A de 25 Marzo de 2010

Tablas HTML en DOM....21

4.3. LA INTERFAZ NODE

Los mtodos y propiedades incluidas en la tabla anterior son especficos de XML,

4.4. HTML y DOM

navegadores como Internet Explorer (versin 7 y anteriores) ni siquiera son

4.4.1. ACCESO RELATIVO A LOS NODOS

El cdigo anterior comprueba si el navegador en el que se est ejecutando tiene

4.4.4. ACCESO DIRECTO A LOS NODOS

var parrafos = document.getElementsByTagName("p");

<div id="div2" style="border: solid red 3px">

4.4.4.2. Funcin getElementsByName()

La funcin getElementById() devuelve el elemento XHTML cuyo atributo id

Ejemplo1 Funcin getElementById()

A continuacin se muestra los paso de un ejemplo sencillo en el que se crea un

<head><title>Ejemplo de creacin de nodos</title></head>

var nuevoP = document.createElement("p");

4.4.6. ATRIBUTOS HTML Y PROPIEDADES CSS EN DOM

<p id="parrafo" class="normal">...</p>

<p id="parrafo" style="color: #C00">...</p>

var parrafo = document.getElementById("parrafo");

Si el nombre de la propiedad CSS est formado por tres palabras, se realiza la

parrafo.style.margin = "10px"; // aade un margen de 10px al prrafo

4.4.7. TABLAS HTML EN DOM

Propiedades y mtodos de <tbody>:

Propiedades y mtodos de <tr>:

Si se considera la siguiente tabla XHTML:

var tabla = document.getElementById('miTabla');

También podría gustarte