DOM 访问不同的元素

Question

I'm trying to learn how to get to different levels of the DOM with javaScript, once I've made an initial entry point. For example, if I want to access the following div element, I would target its attribute:

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

How would I access the li tags? Ultimately, I want to write an event handler that will populate the li tags, but I first need to know how to access them via the ID attribute for the div.

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

Answer 1

Guess what: you can get the elements by TagName , having your id as the parent node. Cool, han?

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

Now you just need to iterate over child 'li' nodes

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