シリーズ目次

この記事の続編です。

DOMの習得までの道のり

やりたいことまとめ
DOMのノード構造　（本記事）

シリーズで解きたい課題

DOMを利用して、<div>の中に<p>で並んだ要素を、
<ul><li>を用いたリスト形式に変換したい

本記事の内容

DOMとは
DOMツリー

1. DOMとは ¹

JavaScript側からHTML(やXML)の要素を取得できるAPI
- bodyタグを取得
- id="content"のdivタグを取得
- ページの全てのアンカーリンクを取得
Document Object Model、略してDOM
HTMLやXMLをオブジェクトのツリー上の集合体として扱うことができる

2. DOMツリー

たとえば下記のようなhtmlの場合

before

<html lang="ja">
  <head>
    <title>TEST</title>
  </head>
  <body>
    <div id="foods">
      <p>にんじん</p>
      <p>じゃがいも</p>
      <p>たまねぎ</p>
    </div>
    <button onclick="dispList()">リスト形式で表示</button>
    <script type="text/javascript" src="./scripts/test.js"></script>
  </body>
</html>

DOMの取得では階層構造の一番上のDocumentオブジェクトからたどっていく
HTMLのDOM構造の場合は、最上位のDocumentは<html>を指す
全てのHTML要素はDocumentオブジェクトに属する

実践

1.　buttonがクリックされたらdispList発動

document.addEventListener("onclick", displayList);

See the Pen FoodDOM_test03 by SayCheeese (@SayCheeese) on CodePen.

1.　div要素の抽出

const pp = document.getElementById("foods");

See the Pen FoodDOM_test03 by SayCheeese (@SayCheeese) on CodePen.

下記より引用
https://blog.yuhiisk.com/archive/2016/06/13/dom-re-introduction-1.html ↩