Moyen Simple d'obtenir de l'élément par son id dans une balise div?

var x = document.getElementById("parent").querySelector("#child");
//don't forget a #

ou

var x = document.querySelector("#parent").querySelector("#child");

ou

var x = document.querySelector("#parent #child");

ou

var x = document.querySelector("#parent");
var y = x.querySelector("#child");

par exemple.

var x = document.querySelector("#div1").querySelector("#edit2");

Un ID peut être utilisé seulement une fois dans une page. C'est du code HTML non valide pour plusieurs objets avec le même ID, même si elles sont dans les différentes parties de la page.

Vous pouvez modifier votre code HTML à ceci:

<div id="div1" >
    <input type="text" class="edit1" />
    <input type="text" class="edit2" />
</div>
<div id="div2" >
    <input type="text" class="edit1" />
    <input type="text" class="edit2" />
</div>

Ensuite, vous pouvez obtenir le premier élément dans div1 avec un sélecteur CSS comme ceci:

#div1 .edit1

En jQuery:

$("#div1 .edit1")

Ou, si vous voulez parcourir les éléments dans un de tes divs, vous pouvez le faire comme ceci:

$("#div1 input").each(function(index) {
    //do something with one of the input objects
});

Si je ne pouvais pas utiliser un framework comme jQuery ou YUI, j'allais le chercher Grésillement et comprennent que c'est le sélecteur de logique (c'est le même sélecteur moteur est à l'intérieur de jQuery) parce que la manipulation du DOM est massivement plus facile avec une bonne sélecteur de bibliothèque.

Si je ne pouvais pas utiliser la même Grésillement (ce qui serait une baisse massive de la productivité du développeur), vous pouvez utiliser de la plaine des fonctions DOM pour traverser les enfants d'un élément donné.

Vous utilisez des fonctions DOM comme childNodes ou firstChild et nextSibling et vous en aurez pour vérifier l'nodeType à assurez-vous que vous avez seulement eu le genre d'éléments que vous vouliez. Je n'ai jamais écrire le code de cette façon parce que c'est beaucoup moins productif que l'aide d'un sélecteur de la bibliothèque.

Sample Html code   
 <div id="temp">
        F1 <input type="text" value="111"/><br/>
        F2 <input type="text" value="222"/><br/>
        F3 <input type="text" value="333"/><br/>
        Type <select>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        </select>
        <input type="button" value="Go" onclick="getVal()">
    </div>

Javascript

    function  getVal()
    {
        var test = document.getElementById("temp").getElementsByTagName("input");
        alert("Number of Input Elements "+test.length);
        for(var i=0;i<test.length;i++)
        {
          if(test[i].type=="text")
          {
            alert(test[i].value);
          }
       }
      test = document.getElementById("temp").getElementsByTagName("select");
      alert("Select box  "+test[0].options[test[0].selectedIndex].text);
    }

By providing different tag names we can get all the values from the div.