Autor Tema: JavaScript nodos, atributos, nodeName Diferencias entre navegadores CU01126E (Leído 2173 veces)

Chompy129 · « **en:** 03 de Octubre 2016, 04:30 »

Acceder a nodos hijos JavaScript y atributos. nodeName, nodeType y nodeValue o texto. Ejemplos (CU01126E)

Aquí el codigo original del ejercicio CU01126E del tutorial básico de programación web con JavaScript:

Código HTML(JavaScript Interno)

Código: [Seleccionar]

<!DOCTYPE html>
<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">aprenderaprogramar.com</span>, para aprender</h1>
<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="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 document? '+ 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 DOCTYPE con nodeName: ' + document.childNodes[0].nodeName +'\n\n';
msg = msg + 'Nodo hijo del nodo raíz es etiqueta html con nodeName: ' + 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].children.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 (salto 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 etiqueta body es texto <<Texto en body>> con nodeValue: ' + nodoBody.childNodes[0].nodeValue +'\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 texto vacío (salto de línea) con nodeName: ' + nodoBody.childNodes[1].childNodes[0].nodeName +' y node value: '+ nodoBody.childNodes[1].childNodes[0].nodeValue + '\n\n';
msg = msg + 'Nodo hijo de etiqueta div es etiqueta H1 con nodeName: ' + nodoBody.childNodes[1].childNodes[1].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.childNodes[1].childNodes[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 nodeName: ' + 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].childNodes[1].childNodes[2].nodeName +' y nodeValue: '+ nodoBody.childNodes[1].childNodes[1].childNodes[2].nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es texto 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>

Código modificado

Código: [Seleccionar]

<!DOCTYPE html>
<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">aprenderaprogramar.com</span>, para aprender</h1>
<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="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 document? '+ 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 DOCTYPE con nodeName: ' + document.firstChild.nodeName +'\n\n';
msg = msg + 'Nodo hijo del nodo raíz es etiqueta html con nodeName: ' + document.firstChild.nextSibling.nodeName +' y nodeType: '+ document.firstChild.nextSibling.nodeType + '\n\n';
msg = msg + 'Número de hijos de nodo etiqueta html: ' + document.firstChild.nextSibling.childElementCount +' ( ' + document.firstChild.nextSibling.children.length +')\n\n';
msg = msg + 'Nodo hijo de etiqueta html es etiqueta head con nodeName: ' + document.firstChild.nodeName +' y nodeType: '+ document.firstChild.nextSibling.firstChild.nodeType +'\n\n';
msg = msg + 'Nodo hijo de etiqueta html es etiqueta body con nodeName: ' + document.firstChild.nextSibling.firstChild.nextSibling.nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeName: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.firstChild.nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.firstChild.nodeValue +'\n\n';
var nodoBody = document.childNodes[1].childNodes[2];
msg = msg + '(Repetimos) Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' + nodoBody.firstChild.nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es div con nodeName: ' + nodoBody.firstChild.nextSibling.nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es texto vacío (salto de línea) con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nodeName +' y nodeValue ' + nodoBody.firstChild.nextSibling.firstChild.nodeValue + '\n\n';
msg = msg + 'Nodo hijo de etiqueta div es etiqueta H1 con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es etiqueta span con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nextSibling.nodeName +'\n\n';
var nodoSpan = nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nextSibling;
msg = msg + 'Nodo hijo de etiqueta span es texto con nodeName: ' + nodoSpan.firstChild.nodeName +' y nodeValue: '+ nodoSpan.firstChild.nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeName +' y nodeValue: '+ nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es texto vacío (salto de línea) con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es img con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nextSibling.nodeName +'\n\n';
msg = msg + 'Valor del atributo name de la imagen: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nextSibling.name +'\n\n';
var nodoImg = nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nextSibling;
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.firstChild.nextSibling.nextSibling.nodeName +' y nodeType: '+nodoBody.firstChild.nextSibling.nextSibling.nodeType+' \n\n';
msg = msg + 'Nodo hijo de etiqueta body es comentario con nodeName: ' + nodoBody.firstChild.nextSibling.nextSibling.nextSibling.nodeName +' y nodeType: '+nodoBody.firstChild.nextSibling.nextSibling.nextSibling.nodeType+' y nodeValue: '+nodoBody.firstChild.nextSibling.nextSibling.nextSibling.nodeValue+' \n\n';
alert (msg);
</script>
</body>
</html>

La diferencia esta entre la linea de espacio del cierre de head hasta llegar a body. Los navegadores funcionan de distinta forma, por lo tanto algunos ignoran esto mientras que otros si que los tienen.

pedro,, · « **Respuesta #1 en:** 04 de Octubre 2016, 10:49 »

Hola Chompy129.

Veo la solución bien.

Esta parte del curso es bastante importante y debe de quedarte muy clara, para después saber manejarte bien a través del DOM.

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: