レッスンに戻る

DOM の子

重要性: 5

次のページに対して:

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

次へのアクセスの方法はどうなるでしょう?:

  • <div> DOM ノード?
  • <ul> DOM ノード?
  • 2つ目の <li> (Pete を持つ)?

多くの方法があります、例えば:

<div> DOM ノード:

document.body.firstElementChild
// or
document.body.children[0]
// or (最初のノードはスペースなので、2つ目を取得します)
document.body.childNodes[1]

<ul> DOM ノード:

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

2つ目の <li> (Pete):

// <ul> を取得し、その最後の要素の子を取得
document.body.lastElementChild.lastElementChild