Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: FranStoker en 09 de Julio 2016, 15:52
-
Hola gente. Estoy estudiando este tema CU01126E del tutorial de programación web con JavaScript, y hay varias cosas que no entiendo. El código es el siguiente (pertenece al "navegador 1"):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tran
sitional//EN" "http://www.w3
.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title><meta charset="utf-8">
</head>
<body>Texto en body
<div id="cabecera" class="brillante">
<h1>Portal web <span class="destacado">aprende
raprogramar.com</span>, para aprender</h1>
<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" al
t="Notepad++" title="Notepad++,
un útil editor de texto">
</div>
<!-- Final del código-->
<script type = "text/javascript">
var msg = '';
msg = '¿Quién es el nodo padre de docu
ment? '+ document.parentNode + '\n\n';
msg = msg + 'Para el nodo document el nodeType vale: ' + document.nodeType +' , y el nodeName vale '+ document.nodeName + '\n\n
';
msg = msg+ 'El valor de nodeValue para el nodo
document es: ' + document.nodeValue +'\n\n';
msg = msg + 'Nodo hijo del nodo raíz es la declaración DOC
TYPE con nodeName: ' + document.childNodes[0].nodeName +'\n\n';
msg = msg + 'Nodo hijo del nodo raíz es etiqueta html con no
deName: ' + document.childNodes[1].nodeName +' y nodeType: '+
document.childNodes[1].nodeType + '\n\n';
msg = msg + 'Número de hijos de nodo etiqueta html:
' + document.childNodes[1].childElementCount +' ( ' +
document.childNodes[1].ch
ildren.length +')\n\n';
msg = msg + 'Nodo hijo de etiqueta html es
etiqueta head con nodeName: ' + document
.childNodes[1].childNodes[0].nodeName +' y
nodeType: '+ document.childNodes[1].childNodes[0].nodeType +'\n\n';
msg = msg + 'Nodo hijo de etiqueta html es tipo texto vacío (sal
to de línea entre terminación de head y comienzo de body): ' +
document.childNodes[1].childNodes[1].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta html es
etiqueta body con nodeName: ' + document
.childNodes[1].childNodes[2].nodeName +'\n\n
';
msg = msg + 'Nodo hijo de etiqueta body es
texto <<Texto en body>> con nodeName: ' +
document.childNodes[1].childNodes[2]
.childNodes[0].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es
texto <<Texto en body>> con nodeValue: ' +
document.childNodes[1].childNodes[2]
.childNodes[0].nodeValue +'\n\n';
var nodoBody = document.childNodes[1].childNodes[2];
msg = msg + '(Repetimos) Nodo hijo de eti
queta body es texto <<Texto en body>> con no
deValue: ' + nodoBody.childNodes[0].nodeVa
lue
+'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es div con
nodeName: ' + nodoBody.childNodes[1].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es te
xto vacío (salto de línea) con nodeName: ' +
nodoBody.childNodes[1].childNodes[0].nodeNam
e +' y node value: '+ nodoBody.childNo
des[1].childNodes[0].nodeValue + '\n\n';
msg = msg + 'Nodo hijo de etiqueta div es etiqueta H1 con nodeName: ' + nodoBody.ch
ildNodes[1].childNodes[1].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.childNodes[1].child
Nodes[1].childNodes[0].nodeName
+'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es etiqueta span con nodeName: ' +
nodoBody.childNodes[1].childNodes[1]
.childNodes[1].nodeName +'\n\n';
var nodoSpan = nodoBody.childNodes[1].childNodes[1].childNodes[1];
msg = msg + 'Nodo hijo de etiqueta span es texto con nodeNa
me: ' + nodoSpan.childNodes[0].nodeName +' y nodeValue: '+
nodoSpan.childNodes[0].nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName:
' + nodoBody.childNodes[1].childNo
des[1].childNodes[2].nodeName +'
y
nodeValue: '+ nodoBody.childNodes[1].child
Nodes[1].childNodes[2]
.nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es te
xto vacío (salto de línea) con nodeName: ' +
nodoBody.childNodes[1].childNodes[2].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es img con nodeName
: ' + nodoBody.childNodes[1].childNodes[3].nodeName +'\n\n';
msg = msg + 'Valor del atributo name de la imagen: '
+ nodoBody.childNodes[1].childNodes[3].name +'\n\n';
var nodoImg = nodoBody.childNodes[1].childNodes[3];
msg = msg + 'Valor del atributo src de la imagen: ' + nodoImg.src +', valor de alt: ' + nodoImg.alt + '\n\n';
msg = msg + 'Valor del atributo title de la imagen: '+ nodoImg.title+'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es texto vacío (salto
de línea) con nodeName: ' + nodoBody.childNodes[2].nodeName +' y
nodeType: '+nodoBody.childNodes[2].nodeType+' \n\n';
msg = msg + 'Nodo hijo de etiqueta body es comentario con
nodeName: ' + nodoBody.childNodes[3].nodeName +' y nodeType:
'+nodoBody.childNodes[3].nodeType+' y nodeValue:
'+nodoBody.childNodes[3].nodeValue+' \n\n';
alert (msg);
</script>
</body>
</html>
Y tengo los siguientes problemas:
1-La etiqueta <head> (lo que lleva dentro, como por ejemplo <title>), no genera nodos?
2- por qué al acceder a acceder al document.childnodes[0].nodeName , decía que el nombre del elemento es html?
msg = msg + 'Nodo hijo del nodo raíz es la declaración DOCTYPE con nodeName: ' + document.childNodes[0].nodeName +'\n\n';
Nodo hijo del nodo raíz es la declaración DOCTYPE con nodeName: html
No debería llamarse "doctype" dicho nodo? Quiero decir, e nodo llamado html es document.childNodes[1].nodeName , ¿no es cierto?
3-Otro problema es que he probado el código en 3 navegadores distintos (Chrome, Firefox e IE), y en ninguno se llega a ejecutar el script... lo último que interpreta el navegador correctamente, es la imagen (hasta donde pone fin del código).
Muchas gracias a todos.
-
Como no encuentro la opción de editar, aclaro: el problema 3 está solucionado. Era cosa de la tabulación del codigo, que con notepad++ daba problemas, aunque la sintaxis era buena.
-
Hola FranStoker al copiar y pegar el código que has puesto algunas cosas me salen incorrectamente (por ejemplo aparecen saltos de línea en lugares indebidos, puede que tengas problemas por esto).
Intentaré responder:
Para la pregunta 1: sí, es posible que desde head se generen nodos, pero no son nodos que afecten a lo que se visualiza en la página, por eso no se les presta atención. La atención se centra en la parte del código más importante.
Para la pregunta 2 cuando yo ejecuto el código para el navegador 1 en mi navegador me aparece esto:
Nodo hijo del nodo raíz es la declaración DOCTYPE con nodeName: html
Nodo hijo del nodo raíz es etiqueta html con nodeName: HTML y nodeType: 1
Es decir al nodo doctype lo está llamando html con minúsculas y al nodo html lo está llamando HTML con mayúsculas. Parece más lógico que se llamara como tú dices doctype, pero no le des más vueltas a esto porque esto depende de cómo lo hayan definido los creadores del navegador y no merece la pena entretenerse con esto.
Para la pregunta 3 ya has indicado que estaba solucionado
Saludos
-
Gracias por tu respuesta Alex. Ahora me queda todo más claro.