返回课程

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
// or
document.body.children[0]
// or (the first node is space, so we take 2nd)
document.body.childNodes[1]

<ul> DOM 节点

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

第二个 <li>(带有 Pete)

// get <ul>, and then get its last element child
document.body.lastElementChild.lastElementChild