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

给定的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这样的框架，我会去获取Sizzle并将它包含在它的选择器逻辑中（它与jQuery中的选择器引擎相同）因为DOM操作非常容易选择器库。

如果我甚至无法使用Sizzle（这会大大降低开发人员的工作效率），您可以使用纯DOM函数来遍历给定元素的子元素。

您可以使用像childNodes或firstChild和nextSibling这样的DOM函数，并且必须检查nodeType以确保只获得所需的元素类型。我从不以这种方式编写代码，因为它比使用选择器库的效率低得多。

Answer 5

一种简单的方法来完成OP在核心JS中的需求。

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

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。在整个HTML文件中，ID必须是唯一。

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

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

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

8 个答案: