js: azioni su tag basandosi sulla discendenza e sui "name"

Salve a tutti. Sto cercando di imparare ad utilizzare javascript, ma c'è una cosa che non capisco: questo script funziona:

<script>
function funzione()
{
document.form1.input1.style.display = "none";
}
</script>

<div onclick="funzione()">clicca qui</div>

<form name="form1">
<input name="input1"></input>
</form>

ma mi chiedo, perché non si può fare la stessa cosa con dei div?

<script>
function funzione()
{
document.div1.div2.style.display = "none";
}
</script>

<div onclick="funzione()">clicca qui</div>

<div name="div1">
<div name="div2">testo che dovrebbe sparire</div>
</div>

dov'è che sbaglio? com'è che dovrei fare senza andare ad utilizzare id ecc?

ringrazio in anticipo e mi scuso se ho duplicato qualche topic precedente.

Prova con:

<script>
function funzione()
{
document.getElementById("div2").style.display = "none";
}
</script>

<div onclick="funzione()">clicca qui</div>

<div id="div1">
<div id="div2">testo che dovrebbe sparire</div>
</div>

Ma non garantisco che funzioni!

grazie della risposta.

è possibile che funzioni, ma pensavo che ci fosse un modo di sfruttare la discendenza del div2 dal div1. Nel senso che potrei avere diversi div chiamate "div2", ma voglio che sparisca soltanto quella che si trova all'interno della "div1" (che in questo caso andrebbe bene come id).

Non ti conviene assegnare lo stesso id a più div, se non altro perché dopo non funzionerà quasi nulla! Comunque che io sappia non è possibile sfruttare la discendenza (ma non si chiamava gerarchia?) dei div, e in generale dei tag HTML, in JavaScript...

allora devo fare un esempio concreto (anche se un po' assurdo)... per capire poi a livello generale come si deve fare.

<div id="m1" class="messaggio">
<div class="titolo">asdasd</div>
<div class="contenuto">bla bla bla</div>
</div>

<div id="m2" class="messaggio">
<div class="titolo">asdasd</div>
<div class="contenuto">bla bla bla</div>
</div>

<div onclick="funzione('m2')">clicca qui per selezionare il secondo messaggio</div>

diciamo che per esempio stando al css i div con la classe "contenuto" sono nascosti per default.
allora com'è fatta la funzione che fa comparire la div "contenuto" del messaggio con la id "m2" ?

spero sia un esempio che chiarifica il problema.

<script>
function mostra(div)
{
document.getElementById(div+"_contenuto").style.display = "block";
}
</script>
<div id="m1" class="messaggio">
<div class="titolo" id="m1_titolo">asdasd</div>
<div class="contenuto" id="m1_contenuto">bla bla bla</div>
</div>
<a href="javascript:void('0');" onclick="mostra('m1')">clicca qui per selezionare il primo messaggio</a>

prova, ma non ti assicuro niente....
ciao!

interessante... funziona, e ho capito il concetto: tutte le info sulla posizione del tag nell'id. per quando riguarda il significato di "javascript:void('0')" vado ad informarmi sui manuali. perfetto. grazie!

semplicemente non fa niente, siccome non puoi creare un link senza un href, e non so quanti browser interpretino l'onclick su div, ho messo un link normale che però punti alla funzione, ciao!