DOM 访问不同的元素

Question

一旦我建立了初始入口点，我正在尝试学习如何使用 javaScript 到达不同级别的 DOM。 例如，如果我想访问以下 div 元素，我将定位其属性：

var divContent =  document.getElementById(‘box_1’);

我将如何访问 li 标签？ 最终，我想编写一个事件处理程序来填充 li 标签，但我首先需要知道如何通过 div 的 ID 属性访问它们。

<div id="box_1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Answer 1

猜猜看：您可以通过TagName获取元素，将您的 id 作为父节点。 酷，韩？

var parent = document.getElementById('box_1'),
    children = parent.getElementsByTagName('li');
    // gets all children of parent

现在您只需要遍历子“li”节点

var i, e;
for (i = 0; i < children.length; ++i) {
    e = children[i];
    //do magic with e
}

Answer 2

您是否试图获取某个父级的所有li元素？

children = document.querySelectorAll('#box_1 li');