Autor Tema: JavaScript Acceder a nodos DOM hijos childNode[] firstChild nextSibling CU01126E  (Leído 627 veces)

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
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.
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 <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>
« Última modificación: 23 de Septiembre 2020, 18:59 por Ogramar »

Ogramar

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

 

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".