1

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

不工作

4

7 回答 7

24

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

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

于 2009-03-06T01:42:13.377 回答
10

ID 应该是唯一的。

于 2009-03-06T01:39:51.900 回答
7

讨厌指出明显的问题，但在您的示例中， 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 方面节省了大量时间和麻烦。无论如何，这些东西使它们成为一个好主意。

于 2010-01-21T04:53:05.903 回答
6

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
于 2010-01-21T05:06:24.653 回答
5

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

于 2009-03-06T02:03:42.373 回答
4

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

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

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

document.getElementById('obj1').getElementsByTagName('meta');
于 2009-03-06T03:03:06.677 回答
3

由于 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')
于 2009-03-06T02:25:10.247 回答