在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

你不想这样做。多个具有相同 id 的元素是无效的 HTML。浏览器不会那么好地对待，并且您将有未定义的行为，这意味着您不知道当您通过该 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

一种在核心 JS 中实现 OP 期望的简单方法。

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

Answer 5

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

On in jQuery:

$("#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 以确保您只获得所需的元素类型。我从不以这种方式编写代码，因为它比使用选择器库的效率低得多。

Answer 6

在 HTML 中，id 应该是唯一的。我建议你将代码更改为如下所示：

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

Answer 7

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.

Answer 8

不幸的是，这是无效的 HTML。 ID 在整个 HTML 文件中必须是唯一的。

当您使用 Javascript 的 document.getElementById() 时，它将返回哪个元素取决于浏览器，大多数情况下它是具有给定 ID 的第一个元素。

您将没有其他机会重新分配您的 ID，或者使用 class 属性。