シリーズ目次
この記事の続編です。
DOMの習得までの道のり
- やりたいことまとめ
- DOMのノード構造 （本記事）
シリーズで解きたい課題
DOMを利用して、<div>の中に<p>で並んだ要素を、
<ul><li>を用いたリスト形式に変換したい
本記事の内容
- DOMとは
- DOMツリー
1. DOMとは 1
- 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.