DOM children
importance: 5
Look at this page:
<html>
<body>
<div>Users:</div>
<ul>
<li>John</li>
<li>Pete</li>
</ul>
</body>
</html>
For each of the following, give at least one way of how to access them:
- The
<div>DOM node? - The
<ul>DOM node? - The second
<li>(with Pete)?
There are many ways, for instance:
The <div> DOM node:
document.body.firstElementChild
// or
document.body.children[0]
// or (the first node is space, so we take 2nd)
document.body.childNodes[1]
The <ul> DOM node:
document.body.lastElementChild
// or
document.body.children[1]
The second <li> (with Pete):
// get <ul>, and then get its last element child
document.body.lastElementChild.lastElementChild