Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: cristiannd en 15 de Abril 2020, 01:58

Título: JavaScript Acceder a nodos DOM hijos childNode[] firstChild nextSibling CU01126E
Publicado por: cristiannd en 15 de Abril 2020, 01:58: 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 (' ') 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.
Citar
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.

Código: [Seleccionar]
<!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 aprenderaprogramar.com, para aprender</h1> <img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"> </div>  <script type = "text/javascript"> var msg = ''; msg = '¿Quién es el nodo padre de document? '+ document.parentNode + ' '; msg = msg + 'Para el nodo document el nodeType vale: ' + document.nodeType +' , y el nodeName vale '+ document.nodeName + ' '; msg = msg + 'El valor de nodeValue para el nodo document es: ' + document.nodeValue +' '; msg = msg + 'Nodo hijo del nodo raíz es la declaración DOCTYPE con nodeName: ' + document.firstChild.nodeName +' '; msg = msg + 'Nodo hijo del nodo raíz es etiqueta html con nodeName: ' + document.firstChild.nextSibling.nodeName +' y nodeType: '+ document.firstChild.nextSibling.nodeType + ' '; msg = msg + 'Número de hijos de nodo etiqueta html: ' + document.firstChild.nextSibling.childElementCount + '(' + document.firstChild.nextSibling.children.length +') '; msg = msg + 'Nodo hijo de etiqueta html es etiqueta head con nodeName: ' + document.firstChild.nextSibling.firstChild.nodeName +' y nodeType: '+ document.firstChild.nextSibling.firstChild.nodeType +' '; 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 +' '; msg = msg + 'Nodo hijo de etiqueta html es etiqueta body con nodeName: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeName +' '; msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeName: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.firstChild.nodeName +' '; msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.firstChild.nodeValue +' '; 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 +' '; msg = msg + 'Nodo hijo de etiqueta body es div con nodeName: ' + nodoBody.firstChild.nextSibling.nodeName +' '; 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 + ' '; msg = msg + 'Nodo hijo de etiqueta div es etiqueta H1 con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nodeName +' '; msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nodeName +' '; msg = msg + 'Nodo hijo de etiqueta h1 es etiqueta span con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nextSibling.nodeName +' '; 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 +' '; 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 +' '; msg = msg + 'Nodo hijo de etiqueta div es texto vacío (salto de línea) con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeName +' '; msg = msg + 'Nodo hijo de etiqueta div es img con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nextSibling.nodeName +' '; msg = msg + 'Valor del atributo name de la imagen: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nextSibling.name +' '; 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 + ' '; msg = msg + 'Valor del atributo title de la imagen: '+ nodoImg.title+' '; 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+' '; 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+' '; document.write(msg); </script> </body> </html>
Título: Re:JavaScript Acceder a nodos DOM hijos childNode[] firstChild nextSibling CU01126E
Publicado por: Ogramar en 23 de Septiembre 2020, 19:05: Buenas, al ejecutar el código obtengo el siguiente mensaje:

Se ha escrito un árbol no equilibrado usando document.write() lo que ha provocado que los datos de red se hayan reinterpretado ("reparsed"). Para más información, https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing

Esto parece que está relacionado con haber hecho uso de document.write

De resto el ejercicio parece bien resuelto. Lo importante aquí es entender cómo funciona la representación del DOM en los navegadores, ya que nos va a resultar útil para trabajar nuestros desarrollos web.

Salu2