javascript obtener hijo por id

Question

<div onclick="test(this)"> 
    Test 
    <div id="child">child</div> 
</div> 

Quiero cambiar el estilo de la div secundaria cuando se hace clic en el div principal. ¿Cómo lo hago referencia? Me gustaría ser capaz de hacer referencia a ella mediante identificación que el de la html en el div padre podría cambiar y el niño no va a ser el primer hijo, etc.

function test(el){ 
    el.childNode["child"].style.display = "none"; 
} 

Algo por el estilo, en el que puedo hacer referencia a que el niño nodo por id y establece el estilo de la misma.

Gracias.

EDITAR: señala que los ID deben ser exclusivos. Así que permítanme revisar mi pregunta un poco. No me gustaría tener que crear identificaciones únicas para cada elemento que se agrega a la página. El div principal se agrega dinámicamente. (algo así como un sistema de notas de página). Y luego está este niño div. Me gustaría poder hacer algo como esto: el.getElementsByName ("options"). Item (0) .style.display = "block";

Si reemplazo el con el documento, funciona bien, pero no para cada div de opciones para niños en la página. Mientras que, quiero poder hacer clic en el div principal, y hacer que el div infantil haga algo (como ir, por ejemplo).

Si tengo que crear dinámicamente un millón (exagerado) de identificadores de div, lo haré, pero preferiría no hacerlo. ¿Algunas ideas?

Answer 1

En los navegadores modernos (IE8, Firefox, Chrome, Opera, Safari) que puede utilizar querySelector():

function test(el){ 
    el.querySelector("#child").style.display = "none"; 
} 

para los navegadores antiguos (< = IE7), que tendría que utilizar algún tipo de biblioteca, como Sizzle o un marco, como jQuery, para trabajar con selectores.

Como se mencionó, se supone que los ID son únicos dentro de un documento, por lo que es más fácil simplemente usar document.getElementById("child").

Answer 2

document.getElementById('child') debe devolverle el elemento correcto: recuerde que la identificación debe ser única en un documento para que sea válida de todos modos.

editar: vea this page - ids DEBE ser único.

edición edición: forma alternativa para resolver el problema:.

<div onclick="test('child1')"> 
    Test 
    <div id="child1">child</div> 
</div> 

continuación, sólo tiene la función de prueba() para buscar el elemento de identificación que ha aprobado en

Answer 3

Si el niño siempre va a ser una etiqueta específica, entonces podría hacerlo de esta manera

function test(el) 
{ 
var children = el.getElementsByTagName('div');// any tag could be used here.. 

    for(var i = 0; i< children.length;i++) 
    { 
    if (children[i].getAttribute('id') == 'child') // any attribute could be used here 
    { 
    // do what ever you want with the element.. 
    // children[i] holds the element at the moment.. 

    } 
    } 
} 

Answer 4

Esto funciona así:

function test(el){ 
    el.childNodes.item("child").style.display = "none"; 
} 

Si el argumento del tema() es una entero, la función lo tratará como un índice. Si el argumento es una cadena, la función busca el nombre o ID del elemento.