[SOLUCIONADO] Nodos hijos no encontrados

Pantaláimon · #1 (**permalink**) 01/12/2013, 03:24

Buenas

Tengo el siguiente código HTML5 de prueba:

Código HTML:

Ver original<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8' />
    <script type='text/javascript' src='js/insert_text.js'></script>
    <title>Insertando texto</title>
  </head>
  <body>
    <header>
      <h1>Insertando texto</h1>
    </header>
    <section id='option_1'>
      <h2>Opción 1</h2>
      <label>Escribir texto: <input type='text' /></label>
      <button id='button_1'>insertar</button>
      <p>
        <span>blablabla</span><span>bleble</span>
      </p>
    </section>
  </body>
</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 originalfunction insert()
{
    // crear elemento span con texto "blibli"
    var text = document.createElement("span");
    var content = document.createTextNode("blibli");
    text.appendChild(content);
 
    //buscar nodo donde insertar
    var node = document.getElementById( 'option_1' );
    alert(node);             // ObjectHTMLElement OK
    alert(node.textContent); // muestra texto OK
    alert(node.p);           // undefined? ERROR!
 
    // insertar elemento
    node.p.appendChild(text);
    alert('hola');
 
 
}
 
window.onload = function() {
    document.getElementById( 'button_1' ).onclick = insert;
}

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!

marlanga · #2 (**permalink**) 01/12/2013, 03:39

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.

Pantaláimon · #3 (**permalink**) 01/12/2013, 05:03

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.

marlanga · #4 (**permalink**) 01/12/2013, 05:18

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?

Pantaláimon · #5 (**permalink**) 01/12/2013, 05:54

Cita:

Iniciado por marlanga

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<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8' />
    <script type='text/javascript' src='js/insert_text.js'></script>
    <title>Insertando texto</title>
  </head>
  <body>
    <header>
      <h1>Insertando texto</h1>
    </header>
    <section>
      <h2>Opción 1</h2>
      <label>Escribir texto: <input type='text' /></label>
      <button id='button_1'>insertar</button>
      <p id='option_1'><span>blablabla</span><span>bleble</span></p>
    </section>
    <section>
      <h2>Opción 2</h2>
      <label>Escribir texto: <input type='text' /></label>
      <button id='button_2'>insertar</button>
      <p id='option_2'><span>blobloblo</span><span>blublu</span></p>
    </section>
  </body>
</html>

Javascript:

Código Javascript:

Ver originalfunction insert()
{
    // crear elemento span con texto "blibli"
    var text = document.createElement("span");
    var content = document.createTextNode("blibli");
    text.appendChild(content);
 
    //buscar nodo donde insertar
    var node = document.getElementById( 'option_' + this.id.substr( 7 ) );
 
    // insertar elemento
    node.appendChild(text);
 
 
}
 
window.onload = function() {
    document.getElementById( 'button_1' ).onclick = insert;
    document.getElementById( 'button_2' ).onclick = insert;
}

Un saludo!

marlanga · #6 (**permalink**) 01/12/2013, 06:12

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.

Pantaláimon · #7 (**permalink**) 01/12/2013, 06:46

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.