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