Tema: Nodos hijos no encontrados
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 01/12/2013, 05:54
Pantaláimon
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 18 años, 4 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!