在一个 div 中引用一个与另一个 div 中的另一个具有相同 ID 的 div

StackOverflow https://stackoverflow.com/questions/617450

题

当嵌套 div 与嵌套在类似名称的 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')

不起作用

有帮助吗？

解决方案

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

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

其他提示

Id应该是唯一的。

讨厌指出明显的，但在你的例子中，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 


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

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

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

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

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

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

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

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

由于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')
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top