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

【问题标题】：Referring to a div inside a div with the same ID as another inside another引用 div 中的 div 与另一个 div 中的另一个 div 具有相同的 ID
【发布时间】：2010-01-21 13:06:24
【问题描述】：

当嵌套的 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')

没用

【问题讨论】：

标签： javascript html dom getelementbyid

【解决方案1】：

只有在页面上有该项目之一时才应使用 ID，无论是 SPAN、DIV 还是其他。当您可能有重复元素时，您应该使用 CLASS。

那里的代码不起作用，因为您通过唯一 ID 引用一个元素，但页面上有多个。

【讨论】：

【解决方案2】：

Id 应该是唯一的。

【讨论】：

有趣的点 /= 我想看到它已经用命名的 ID 进行了编程，我有点坚持去改变它们
是的，除非你能改变它，否则你有点搞砸了。

【解决方案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 方面节省了大量时间和麻烦。无论如何，这些东西使它们成为一个好主意。

【讨论】：

【解决方案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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

对于您提供的 HTML，这应该可以：

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

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

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

【讨论】：

这将不起作用，因为 obj1 和给定的 Meta 中有未知数量的 div
在这种情况下，您仍然可以搜索所有 div（甚至递归地），直到找到所需的标记。由于您无法更改 HTML，因此您必须使用 DOM 获得创意 :)
您应该仍然可以通过遍历子 div 来查找 id "Meta"。您不能使用 getElementById 因为您的 html 无效，但我猜 div 元素仍将设置其 id 值。

【解决方案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')

【讨论】：