返回課程

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