在div标签中通过id获取元素的简单方法？

Question

如果我重复这个问题,请原谅我.

我有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>

Answer 1

你可以尝试这样的事情.

样本标记.

<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");

Answer 2

var 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");

例如.

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

Answer 3

你不想这样做.具有相同的多个元素是无效的HTML id.浏览器不会那么好对待,并且您将有未定义的行为,这意味着您不知道当您按该ID选择元素时浏览器会给您什么,它可能是不可预测的.

您应该使用类,或者只是遍历输入并跟踪索引.

尝试这样的事情:

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

Answer 4

给定的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>

然后,您可以使用CSS选择器获取div1中的第一个项目,如下所示:

#div1 .edit1

在jQuery中:

$("#div1 .edit1")

或者,如果你想迭代你的一个div中的项目,你可以这样做:

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

如果我不能使用像jQuery或YUI的框架,我会去得到灒和包括它的选择逻辑(这是相同的选择引擎是jQuery的内部),因为DOM操作是一个不错的选择库大量容易.

如果我甚至不能使用Sizzle(这将大大降低开发人员的工作效率),您可以使用普通的DOM函数来遍历给定元素的子元素.

你可以使用像childNodes或firstChild和nextSibling这样的DOM函数,你必须检查nodeType以确保你只获得了你想要的那种元素.我从不以这种方式编写代码,因为它比使用选择器库的效率低得多.

Answer 5

在核心 JS 中执行 OP 所需的简单方法。

document.getElementById(parent.id).children[child.id];