#DOMとは#
- Document Object Model のこと
DOMはHTMLをツリー構造で表現をします。
下記のコードをツリー工場にして「ねこ」までを辿ると
html ➡ body ➡ article ➡ ul ➡ li ➡ ねこ
となります。
<html>
<head>
<title>ぼくのサイト</title>
</head>
<body>
<article>
<h1>すきなどうぶつ</h1>
<ul>
<li>ねこ</li>
<li>いぬ</li>
<li>とり</li>
</ul>
</article>
</body>
</html>
ブラウザ内にDOMデータが構築されます。
このDOMを取得し、内容を書き換える操作のことをいいます。
DOMが書き換えられると、自動的に新たなDOMに合わせてブラウザの画面も変わります。
#Document オブジェクトとは
JavaScriptを学習し始めてからしょっちゅう登場するdocument.getElementById('the-button');ですが、documentとは何でしょうか？
documentオブジェクトは、画面に表示されているWEBページを表すオブジェクトでDOM操作をするためのメソッドが含まれています。
document.getElementById('the-button');
この例だと、DOM構造に分解し、DOM構造内を検索し、id名「the-button」のノードを取得していをます。
メソッドには
- getElementById('the-button') id名で検索
- querySelector('#the-button') cssセレクタで最初に一致したものを検索
- querySelectorAll('.button') cssセレクタで一致したすべてを検索
等がある。
#最後に
Javaをこれまで学習してからJavaScriptに手を出しましたが、考え方が違いすぎて理解がなかなかできません。
そのために基礎的なことを簡潔にまとめてみました。
https://www.hypertextcandy.com/vanilla-javascript-dom
こちらの記事を参考にさせて頂きました。
ありがとうございます。