在一个 div 中引用一个与另一个 div 中的另一个具有相同 ID 的 div
-
03-07-2019 - |
题
当嵌套 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')