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

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

框架在浏览器兼容性,"缺少"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中看到它们.