Acá les dejo el ejercicio CU01126E del tutorial pdf de programación JavaScript desde cero, donde cambio los
childNode[] por
firstChild y
nextSibling.
Cabe aclarar que cambié
alert(msg) por
document.write(msg) y así también las etiquetas de salto de lineas
('\n\n') por
('<br><br>') para que sea más fácil de leer el resultado ya que dentro del alert no entraba todo el contenido.
Para esté enunciado utilicé el código del
navegador 1.
Una vez tengas el código ejecutándose, modifica la forma de acceso a los nodos de modo que en vez de childNodes uses firstChild y nextSibling para acceder a todos los nodos.
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio CU01126E</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 + '<br><br>';
msg = msg + 'Para el nodo document el nodeType vale: ' + document.nodeType +' , y el nodeName vale '+ document.nodeName + '<br><br>';
msg = msg + 'El valor de nodeValue para el nodo document es: ' + document.nodeValue +'<br><br>';
msg = msg + 'Nodo hijo del nodo raíz es la declaración DOCTYPE con nodeName: ' + document.firstChild.nodeName +'<br><br>';
msg = msg + 'Nodo hijo del nodo raíz es etiqueta html con nodeName: ' + document.firstChild.nextSibling.nodeName +' y nodeType: '+ document.firstChild.nextSibling.nodeType + '<br><br>';
msg = msg + 'Número de hijos de nodo etiqueta html: ' + document.firstChild.nextSibling.childElementCount + '(' + document.firstChild.nextSibling.children.length +')<br><br>';
msg = msg + 'Nodo hijo de etiqueta html es etiqueta head con nodeName: ' + document.firstChild.nextSibling.firstChild.nodeName +' y nodeType: '+ document.firstChild.nextSibling.firstChild.nodeType +'<br><br>';
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.firstChild.nextSibling.firstChild.nextSibling.nodeName +'<br><br>';
msg = msg + 'Nodo hijo de etiqueta html es etiqueta body con nodeName: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeName +'<br><br>';
msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeName: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.firstChild.nodeName +'<br><br>';
msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.firstChild.nodeValue +'<br><br>';
var nodoBody = document.firstChild.nextSibling.firstChild.nextSibling.nextSibling;
msg = msg + '(Repetimos) Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' + nodoBody.firstChild.nodeValue +'<br><br>';
msg = msg + 'Nodo hijo de etiqueta body es div con nodeName: ' + nodoBody.firstChild.nextSibling.nodeName +'<br><br>';
msg = msg + 'Nodo hijo de etiqueta div es texto vacío (salto de línea) con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nodeName +' y node value: '+ nodoBody.firstChild.nextSibling.firstChild.nodeValue + '<br><br>';
msg = msg + 'Nodo hijo de etiqueta div es etiqueta H1 con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nodeName +'<br><br>';
msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nodeName +'<br><br>';
msg = msg + 'Nodo hijo de etiqueta h1 es etiqueta span con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nextSibling.nodeName +'<br><br>';
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 +'<br><br>';
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 +'<br><br>';
msg = msg + 'Nodo hijo de etiqueta div es texto vacío (salto de línea) con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeName +'<br><br>';
msg = msg + 'Nodo hijo de etiqueta div es img con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nextSibling.nodeName +'<br><br>';
msg = msg + 'Valor del atributo name de la imagen: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nextSibling.name +'<br><br>';
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 + '<br><br>';
msg = msg + 'Valor del atributo title de la imagen: '+ nodoImg.title+'<br><br>';
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+' <br><br>';
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+' <br><br>';
document.write(msg);
</script>
</body>
</html>
Tema: JavaScript Acceder a nodos DOM hijos childNode[] firstChild nextSibling CU01126E (Leído 1403 veces)
RSS -
WAP2