Question

当id与嵌套在类似命名的div中的div具有相同的id时，如何通过id引用嵌套div

例如

<div id="obj1">
    <div id="Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2">
    <div id="Meta">
        <meta></meta>
    </div>
</div>

我想获得meta

的innerHTML

document.getElementById('obj1').getElementById('Meta').getElementsByTagName('meta')

不起作用

Answer 1

ID只应在页面上有该项目时使用，无论是SPAN，DIV还是其他任何内容。如果您有重复元素，CLASS就是您应该使用的。

代码不起作用，因为您是按唯一ID引用元素，但页面上有多个元素。

Answer 2

Id应该是唯一的。

Answer 3

讨厌指出明显的，但在你的例子中，obj1_Meta和obj2_Meta是唯一的id，所以如果你的工作代码是这样的话：

document.getElementById('obj1_Meta').getElementsByTagName('meta')[0].innerHTML;

将按照描述工作。作为一个仔细检查，你有没有想过这个？

如果不是，那真是无聊......

作为代码的“坏”或“错误”，一个可行的选项是使用像jQuery这样的JavaScript框架。一旦你包含它，你可以通过传递一个CSS选择器（甚至是语义上不正确的）来获取元素，如下所示：

$('#obj1 #obj1_Meta meta').html()

$（）是jQuery在类固醇上说document.getElementById（）的方式。 .html（）相当于.innerHTML

其他框架，如PrototypeJS和MooTools也提供类似的功能。

原型例如：

$$('#obj1 #obj1_Meta meta').innerHTML;//note the double $'s

Frameworks在浏览器兼容性，“缺少”JavaScript方法（如getElementsByClassName）和快速编码AJAX方面节省了大量时间和麻烦。无论如何，这些东西都是一个好主意。

Answer 4

ID应该是唯一的，智能地使用类。

<div id="obj1" class="obj">
    <div id="obj1_Meta" class="obj_Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2" class="obj">
    <div id="obj2_Meta" class="obj_Meta">
        <meta></meta>
    </div>
</div>

.obj =定位两个元素
#obj1.obj =仅定位第一个
#obj1.obj_Meta =目标obj1内部DIV
#obj2.obj =仅定位第二个
#obj2.obj_Meta =目标obj2内部DIV

Answer 5

您可能还会遇到此标记的问题，因为“meta”标记仅在head标记内合法，而不是body标记。从我看到Firebug可以看出，Firefox甚至可以将这些元标记从体内拉出并将它们扔到头部（在这种情况下，将任何文本内容放在父div中），所以你根本不会在DOM中看到它们。

Answer 6

对于您提供的HTML，这应该有效：

document.getElementById('obj1').getElementsByTagName('div')[0].getElementsByTagName('meta');

只需忽略内部div上的虚假ID，并通过标记名称获取它。您还应该能够完全忽略内部div，因为getElementsByTagName会搜索整个子树：

document.getElementById('obj1').getElementsByTagName('meta');

Answer 7

由于id属性是唯一的文档范围标识符，因此您应该命名为id。

<div id="obj1">
    <div id="obj1_Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2">
    <div id="obj2_Meta">
        <meta></meta>
    </div>
</div>

document.getElementById('obj1_Meta').getElementsByTagName('meta')

引用div内的div与另一个内的另一个ID相同

7 个答案: