回到课程

DOM 子节点

重要程度: 5

对于这个页面:

<html>
<body>
  <div>Users:</div>
  <ul>
    <li>John</li>
    <li>Pete</li>
  </ul>
</body>
</html>

对于以下各项,请给出至少一种访问方式:

  • <div> DOM 节点?
  • <ul> DOM 节点?
  • 第二个 <li> 节点(即包含 Pete 的节点)?

这里有很多种方法,例如:

获取 <div> DOM 节点:

document.body.firstElementChild
// 或
document.body.children[0]
// 或(第一个节点是空格,所以我们应该获取的是第二个)
document.body.childNodes[1]

获取 <ul> DOM 节点:

document.body.lastElementChild
// 或
document.body.children[1]

获取第二个 <li>(即包含 Pete 的节点):

// 获取 <ul>,然后获取它的最后一个子元素
document.body.lastElementChild.lastElementChild