如果我重复了问题，请原谅。
我有一个HTML，其中div标签内的所有元素都具有不同的id，假设我已经获取了对该div的引用，是否有任何简单的方法可以通过其id获取元素，而无需迭代该div中的所有元素？
这是我的示例HTML：
<div id="div1" >
<input type="text" id="edit1" />
<input type="text" id="edit2" />
</div>
<div id="div2" >
<input type="text" id="edit1" />
<input type="text" id="edit2" />
</div>
<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;
}
演示: http://jsfiddle.net/naveen/H8j2A/
如nnnnnn所建议的一个更好的方法。
function GetElementInsideContainer(containerID, childID) {
var elm = document.getElementById(childID);
var parent = elm ? elm.parentNode : {};
return (parent.id && parent.id === containerID) ? elm : {};
}
演示: http://jsfiddle.net/naveen/4JMgF/
调用方式：
var e = GetElementInsideContainer("div1", "edit1");
getElementById()进行获取？如果想要只在特定div的子级中返回它，则仍然可以通过获取子级并检查其父级来开始。 - nnnnnnvar x = document.getElementById("parent").querySelector("#child");
// don't forget a #
或者
var x = document.querySelector("#parent").querySelector("#child");
或者
var x = document.querySelector("#parent #child");
或者
var x = document.querySelector("#parent");
var y = x.querySelector("#child");
eg.
var x = document.querySelector("#div1").querySelector("#edit2");
你不应该这么做。在HTML中，有多个元素拥有相同的id是无效的。浏览器不能很好地处理这种情况，你会遇到未定义的行为，也就是说当你通过id选取一个元素时，你根本不知道浏览器会返回什么结果，这可能是不可预测的。
你应该使用类(class)，或者遍历输入并跟踪索引。
尝试像这样：
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);
}
document.getElementById(parent.id).children[child.id];
在同一页中，一个ID只能使用一次。即使它们位于页面的不同部分，有多个对象具有相同的ID是无效的HTML。
您可以将您的HTML更改为以下内容：
<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>
#div1 .edit1
关于jQuery的on方法：
$("#div1 .edit1")
或者，如果你想迭代一个div中的项，可以像这样做：
$("#div1 input").each(function(index) {
// do something with one of the input objects
});
如果我不能使用像jQuery或YUI这样的框架，我会去获取Sizzle并包含它的选择器逻辑（它是jQuery内部的同一选择器引擎），因为使用好的选择器库可以大大简化DOM操作。
如果我甚至不能使用Sizzle（这将极大地降低开发人员的生产力），您可以使用普通的DOM函数来遍历给定元素的子元素。
你可以使用像childNodes、firstChild和nextSibling这样的DOM函数，并且必须检查nodeType以确保只获取想要的元素类型。我从不使用这种方式编写代码，因为与使用选择器库相比，效率要低得多。
<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.
很不幸，这是无效的HTML。在整个HTML文件中，ID必须是唯一的。
当您使用JavaScript的document.getElementById()时，它取决于浏览器返回哪个元素，大多数情况下会返回具有给定ID的第一个元素。
您将没有其他选择，只能重新分配ID，或者选择使用class属性。
id必须始终是唯一的。 - Tomasz Nurkiewicz