Un moyen simple d'obtenir un élément par identifiant dans une balise div?

Vous pouvez essayer quelque chose comme ça.

Exemple de balisage.

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

JavaScript

 function GetElementInsideContainer(containerID, childID) { var elm = {}; var elms = document.getElementById(containerID).getElementsByTagName("*"); for (var i = 0; i < elms.length; i++) { if (elms[i].id === childID) { elm = elms[i]; break; } } return elm; } 

Demo: http://jsfiddle.net/naveen/H8j2A/

Une meilleure méthode suggérée par nnnnnn

 function GetElementInsideContainer(containerID, childID) { var elm = document.getElementById(childID); var parent = elm ? elm.parentNode : {}; return (parent.id && parent.id === containerID) ? elm : {}; } 

Demo: http://jsfiddle.net/naveen/4JMgF/

Appelez-le comme

 var e = GetElementInsideContainer("div1", "edit1"); 

Vous ne voulez pas faire cela. Il est invalide HTML pour avoir plus d'un élément avec le même id . Les navigateurs ne traiteront pas bien, et vous aurez un comportement indéfini, ce qui signifie que vous ne savez pas ce que le navigateur vous donnera lorsque vous sélectionnez un élément par cet identifiant, il pourrait être imprévisible.

Vous devriez utiliser une classe, ou tout simplement itérer à travers les entrées et suivre un index.

Essayez quelque chose comme ceci:

 var div2 = document.getElementById('div2'); for(i = j = 0; i < div2.childNodes.length; i++) if(div2.childNodes[i].nodeName == 'INPUT'){ j++; var input = div2.childNodes[i]; alert('This is edit'+j+': '+input); } 

JSFiddle

 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 identifiant donné ne peut être utilisé qu'une seule fois dans une page. C'est un code HTML non valide pour avoir plusieurs objets avec le même identifiant, même s'ils se trouvent dans différentes parties de la page.

Vous pouvez modifier votre code HTML vers 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 en div1 avec un sélecteur CSS comme ceci:

 #div1 .edit1 

On in jQuery:

 $("#div1 .edit1") 

Ou, si vous souhaitez itérer les éléments dans l'une de vos 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 chercher Sizzle et inclure cela pour sa logique de sélecteur (c'est le même moteur de sélection que dans jQuery) car la manipulation de DOM est plus simple avec une bonne bibliothèque de sélecteurs.

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

Vous utilisiez les fonctions DOM comme childNodes ou firstChild et nextSibling et vous devriez vérifier le nodeType pour vous assurer que vous n'avez que le type d'éléments que vous vouliez. Je n'écris jamais le code de cette façon car il est tellement moins productif que l'utilisation d'une bibliothèque de sélecteurs.

Les identifiants HTML doivent être uniques. Je vous suggère de changer votre code à quelque chose comme ceci:

 <div id="div1" > <input type="text" name="edit1" id="edit1" /> <input type="text" name="edit2" id="edit2" /> </div> <div id="div2" > <input type="text" name="edit1" id="edit3" /> <input type="text" name="edit2" id="edit4" /> </div> 

 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. 

Malheureusement, ceci est un code HTML invalide. Un identifiant doit être unique dans le fichier HTML entier.

Lorsque vous utilisez le document.getElementById() de Javascript.getElementById document.getElementById() cela dépend du navigateur, quel élément il reviendra, c'est surtout le premier avec un identifiant donné.

Vous n'aurez aucune autre chance de réaffecter vos identifiants ou, en variante, d'utiliser l'attribut de class .