Академический Документы
Профессиональный Документы
Культура Документы
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
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
BIBLIOGRAFIA...25
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>
<title>ejemplo de getElementsByTagName</title>
</head>
<body>
<script type="text/javascript">
alert(document.nodeType); // 9
</script>
</body>
</html>
EJEMPLO 2:
<html>
<head>
<title>ejemplo de getElementsByTagName</title>
</head>
<body>
<script type="text/javascript">
alert(document.documentElement.nodeType); // 1
</script>
</body>
</html>
EJEMPLO3:
<html>
<head>
<title>ejemplo de getElementsByTagName</title>
</head>
<body>
<script type="text/javascript">
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>
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:
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>
<p>Algo de texto</p>
<div id="div1" style="border: solid blue 3px">
<p>Algo de texto en div1</p>
<p>Algo de texto en div1</p>
<p>Algo de texto en div1</p>
12
</div>
</div>
<p>Algo de texto</p>
<p>Algo de texto</p>
<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++;
var c1 = document.createElement('td')
c1.innerHTML=tc1;
var c2 = document.createElement('td')
c2.innerHTML=tc2;
row.appendChild(c0);
row.appendChild(c1);
row.appendChild(c2);
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>
14
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>
<script type="text/javascript">
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
<html>
18
<body>
<script type="text/javascript">
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>
<head><title>Ejemplo de eliminacin de nodos</title></head>
<body>
<p>Este parrafo va a ser</p>
<script type="text/javascript">
var p = document.getElementsByTagName("p")[0];
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>
<head><title>Ejemplo de eliminacin de nodos</title></head>
<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:
var p = document.getElementsByTagName("p")[0];
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>:
var p = document.getElementsByTagName("p")[0];
document.body.removeChild(p);
La pgina HTML que resulta despus de la ejecucin del cdigo JavaScript
anterior se muestra a continuacin:
<html>
<head><title>Ejemplo de eliminacin de nodos</title></head>
<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
22
25
26
27
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