Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Nodos hijos no encontrados

Estas en el tema de Nodos hijos no encontrados en el foro de Javascript en Foros del Web. Buenas Tengo el siguiente código HTML5 de prueba: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original <!DOCTYPE html> < html lang = 'es' >   < head ...
  #1 (permalink)  
Antiguo 01/12/2013, 03:24
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 17 años, 11 meses
Puntos: 32
Nodos hijos no encontrados

Buenas

Tengo el siguiente código HTML5 de prueba:

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang='es'>
  3.   <head>
  4.     <meta charset='UTF-8' />
  5.     <script type='text/javascript' src='js/insert_text.js'></script>
  6.     <title>Insertando texto</title>
  7.   </head>
  8.   <body>
  9.     <header>
  10.       <h1>Insertando texto</h1>
  11.     </header>
  12.     <section id='option_1'>
  13.       <h2>Opción 1</h2>
  14.       <label>Escribir texto: <input type='text' /></label>
  15.       <button id='button_1'>insertar</button>
  16.       <p>
  17.         <span>blablabla</span><span>bleble</span>
  18.       </p>
  19.     </section>
  20.   </body>
  21. </html>

Por otro lado, como se puede observar, he añadido un código javascript 'js/insert_text.js' que es el siguiente:
Código Javascript:
Ver original
  1. function insert()
  2. {
  3.     // crear elemento span con texto "blibli"
  4.     var text = document.createElement("span");
  5.     var content = document.createTextNode("blibli");
  6.     text.appendChild(content);
  7.  
  8.     //buscar nodo donde insertar
  9.     var node = document.getElementById( 'option_1' );
  10.     alert(node);             // ObjectHTMLElement OK
  11.     alert(node.textContent); // muestra texto OK
  12.     alert(node.p);           // undefined? ERROR!
  13.  
  14.     // insertar elemento
  15.     node.p.appendChild(text);
  16.     alert('hola');
  17.  
  18.  
  19. }
  20.  
  21. window.onload = function() {
  22.     document.getElementById( 'button_1' ).onclick = insert;
  23. }
Este código lo único que pretende hacer es insertar un texto "blibli" dentro del párrafo donde ya hay un texto "blablablableble". Pero como ya doy a entender en el comentario, accedo al nodo section mediante un id y cuando quiero bajar al nodo hijo p alert me advierte que es como si no existiera. He mirado a ver si sólo es con este nodo en particular, pero con h2, label y button me pasa lo mismo, no los detecta.

Soy bastante novato en javascript y me cuesta ver en lo que estoy fallando.

Un saludo y gracias!
  #2 (permalink)  
Antiguo 01/12/2013, 03:39
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 5 meses
Puntos: 206
Respuesta: Nodos hijos no encontrados

Te sale undefined porque así no se recorren nodos de HTML.
para eso está getElementsByTagName, que no sólo funciona con el objeto document. Funciona con cualquier otro nodo, y buscará entre lo que haya dentro de él.

No uses alert para depurar, usa console.log y google chrome. La consola se abre con CTR+SHIFT+J, e incluso permite depurar con breakpoints.
  #3 (permalink)  
Antiguo 01/12/2013, 05:03
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 17 años, 11 meses
Puntos: 32
Respuesta: Nodos hijos no encontrados

Muchas gracias por el consejo en el tema de depuración.

Entiendo lo de getElementByTagName. Supongo que, después de leer ayer un texto sobre objetos en javascript y la manipulación de estos como arrays asociativos, ya imaginé que al crearse el arbol DOM se crearían también el acceso a los hijos a través de propiedades con su nombre de elemento. Pero ahora veo que esto no tiene mucho sentido, pues no podria aplicarse en caso de que hubieran dos hijos directos con el mismo tipo de elemento.

El problema que le veo a getElementByTag es que hace una búsqueda en toda la profundidad del árbol para encontrar todos los tags que se correspondan con "p". Esto no seria del todo eficiente si sólo buscas un hijo directo "p". ¿Deberé hacer alguna función usando childNodes o ya hay algo para este caso en javascript?

Un saludo y gracias.
  #4 (permalink)  
Antiguo 01/12/2013, 05:18
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 5 meses
Puntos: 206
Respuesta: Nodos hijos no encontrados

getElement y getElements recorre el childnodes por tí. ¿Para qué recorrerlo tú manualmente si ya lo hacen por tí? Puedes programar una versión recortada que sólo recorra el childnodes del elemento que le pases, sin recorrer los childnodes de cada uno de sus hijos, pero la ganancia que vas a tener es insignificante.

Por otro lado, ¿te parece más eficiente que el navegador cuando carga la página haga cientos de colecciones que almacenen los tags que están contenidos en otros tags, para que luego muy probablemente el programador no use nunca?

Última edición por marlanga; 01/12/2013 a las 05:31
  #5 (permalink)  
Antiguo 01/12/2013, 05:54
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 17 años, 11 meses
Puntos: 32
Respuesta: Nodos hijos no encontrados

Cita:
Iniciado por marlanga Ver Mensaje
getElement y getElements recorre el childnodes por tí. ¿Para qué recorrerlo tú manualmente si ya lo hacen por tí? Puedes programar una versión recortada que sólo recorra el childnodes del elemento que le pases, sin recorrer los childnodes de cada uno de sus hijos, pero la ganancia que vas a tener es insignificante.

Por otro lado, ¿te parece más eficiente que el navegador cuando carga la página haga cientos de colecciones que almacenen los tags que están contenidos en otros tags, para que luego muy probablemente el programador no use nunca?
Depende, si que tenía entendido que se hacían colecciones de tags para tener un acceso más rápido. Pero puede haber casos en que con getElementsByTagName obtengas toda una lista de nodos y luego dentro de esta tengas que encontrar el que es el hijo directo del nodo.

De todos modos, veo que una mejor solución seria cambiar el id de section y ponerlo en el elemento p.

HTML:
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang='es'>
  3.   <head>
  4.     <meta charset='UTF-8' />
  5.     <script type='text/javascript' src='js/insert_text.js'></script>
  6.     <title>Insertando texto</title>
  7.   </head>
  8.   <body>
  9.     <header>
  10.       <h1>Insertando texto</h1>
  11.     </header>
  12.     <section>
  13.       <h2>Opción 1</h2>
  14.       <label>Escribir texto: <input type='text' /></label>
  15.       <button id='button_1'>insertar</button>
  16.       <p id='option_1'><span>blablabla</span><span>bleble</span></p>
  17.     </section>
  18.     <section>
  19.       <h2>Opción 2</h2>
  20.       <label>Escribir texto: <input type='text' /></label>
  21.       <button id='button_2'>insertar</button>
  22.       <p id='option_2'><span>blobloblo</span><span>blublu</span></p>
  23.     </section>
  24.   </body>
  25. </html>

Javascript:
Código Javascript:
Ver original
  1. function insert()
  2. {
  3.     // crear elemento span con texto "blibli"
  4.     var text = document.createElement("span");
  5.     var content = document.createTextNode("blibli");
  6.     text.appendChild(content);
  7.  
  8.     //buscar nodo donde insertar
  9.     var node = document.getElementById( 'option_' + this.id.substr( 7 ) );
  10.  
  11.     // insertar elemento
  12.     node.appendChild(text);
  13.  
  14.  
  15. }
  16.  
  17. window.onload = function() {
  18.     document.getElementById( 'button_1' ).onclick = insert;
  19.     document.getElementById( 'button_2' ).onclick = insert;
  20. }

Un saludo!
  #6 (permalink)  
Antiguo 01/12/2013, 06:12
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 5 meses
Puntos: 206
Respuesta: Nodos hijos no encontrados

Ecmascript 5 permite buscar elementos con selectores CSS con querySelector(), asi que también sirve para lo que quieres, si sabes poner el selector css correctamente. No funciona en navegadores prehistóricos.
  #7 (permalink)  
Antiguo 01/12/2013, 06:46
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 17 años, 11 meses
Puntos: 32
Respuesta: Nodos hijos no encontrados

A raíz de lo que has dicho he visto que también es posible usar XPath con document.evaluate, lo que no he averiguado desde que estándar de Ecmascript.

Gracias.

Etiquetas: hijos, html, input, js, nodos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:24.