Autor Tema: CU01126E problema con arbol DOM por qué al nodo doctype aparece nodeName html  (Leído 2591 veces)

FranStoker

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
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"):

Código: [Seleccionar]
<!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?

Código: [Seleccionar]
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.
« Última modificación: 19 de Julio 2016, 16:38 por Alex Rodríguez »

FranStoker

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Re:CU01126-problema con arbol DOM
« Respuesta #1 en: 10 de Julio 2016, 02:52 »
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.

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
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

FranStoker

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Gracias por tu respuesta Alex. Ahora me queda todo más claro.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".