Question

当一个嵌套的div与同名的div嵌套在一起，具有相同的id时，我如何通过id引用嵌套的div

Sorry, "eg" is already in English and does not require translation. It stands for "for example".

<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 )

不起作用 (bù qǐ zuò yòng)

Answer 1

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

那里的代码不起作用是因为你正在引用一个唯一 ID 的元素，但页面上有多个这样的元素。

Answer 2

ID 应该是唯一的。

Answer 3

讨厌指出显而易见的事实，但在你的例子中，obj1_Meta和obj2_Meta是唯一的标识符，因此如果在你的工作代码中是这种情况：

document.getElementById( obj1_Meta ).getElementsByTagName( meta )[0].innerHTML;

会按照描述工作。作为一种双重检查，你有没有过度思考这个问题？

如果不行，就糟糕了...

尽管您的代码可能很“糟糕”或“错误”，但一个可行的解决方案是使用类似jQuery的JavaScript框架。一旦您将其包含在代码中，您可以通过传递CSS选择器（即使不符合语义）来获取元素，如下所示：

$( #obj1 #obj1_Meta meta ).html()

$() is jQuery s way of saying document.getElementById() ...on steroids. .html() is its equivalent of .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 = targets both elements
#obj1.obj = targets only the first
#obj1.obj_Meta = targets obj1 inner DIV
#obj2.obj = targets only the second
#obj2.obj_Meta = targets obj2 inner DIV

Answer 5

您可能会在这个标记中遇到问题，因为“meta”标签仅在head标签中是合法的，而不是body标签。从Firebug查看，从我所看到的，Firefox甚至会进一步将那些meta标签从body中拿出来并将它们丢到head中（在这种情况下，将任何文本内容放入父div中），所以您根本看不到它们在DOM中。

Answer 6

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

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

只需忽略内部 div 上的虚假 ID，并通过标签名称获取它。你也可以完全忽略内部 div，因为 getElementsByTagName 会搜索整个子树：

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

Answer 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 )

友情链接