DOMとは

Document Object Model（ドキュメントオブジェクトモデル）の略で、HTMLやXMLの文書を扱うためのAPIです。
DOMではHTMLやXMLのデータ内の要素をオブジェクトとして扱い、オブジェクトが階層的に組み合わされたものとして識別します。

ノード

DOMでは識別されたオブジェクトのことをノードと呼びます。
ノードにはいくつか種類があり、それぞれが役割を担っています。

ノードの種類	概要
ドキュメントノード	HTML文書全体
要素ノード	HTMLタグ
テキストノード	HTMLタグ以外のテキスト
属性ノード	HTMLタグの属性（classやidなど）
コメントノード	コメントアウトされたテキスト

これらのノードが階層的に組み合わさり、木構造を形成したものをDOMツリーと呼びます。

階層構造

DOMではノードが組み合わさることで階層構造を形成します。
以下のようなコードがあったとします。

<html>
<head>
    <title>sample</title>
    <meta chareset="utf-8">
</head>
<body>
    <p id="test">
    <!--コメント-->
    これは<strong>サンプルテキスト</strong>です。
    </p>
</body>
</html>

階層構造で表すと下記のようになります。

Document
└ html
   ├ head
   │   ├ 空白
   │   ├ title
   │   │   └ sample
   │   ├ 空白   
   │   ├ 　meta
   │   └ 空白
   └ body
     ├ 空白
     └ p ─ id
       ├ 空白
       ├ コメント
       ├ 空白
       ├ これは
       ├ strong
       │ └ サンプルテキスト
       ├ です。
       └ 空白

DOMツリーでは空白はテキストとして扱われ、空白ノードというテキストノードの一つとして分類されます。

DOM操作

ノードにはHTMLと同じように親子関係があります。
bodyタグを基準として考えると、htmlタグは、bodyの親ノードにあたり、headタグは兄弟ノード、pタグは子孫ノードにあたります。

プロパティ

ノードの参照方法として以下のプロパティがありますが、こちらのプロパティでは空白ノードを含めて参照してしまうため、効率があまり良くありません。

プロパティ	概要
parentNode	親ノードへの参照。（参照先がDocumentオブジェクトの場合はnullを返す）
childNodes	子ノードへの参照。
firstChild	最初の子ノード。（子ノードを持たない場合はnullを返す）
lastChild	最後の子ノード。（子ノードを持たない場合はnullを返す）
nextSibling	兄弟ノード内の次のノード。（次の兄弟ノードを持たない場合はnullを返す）
previousSibling	兄弟ノード内の一つ前のノード。（前の兄弟ノードを持たない場合はnullを返す）
nodeType	ノードのノードタイプを返す。
nodeValue	テキストノードの値を返す。
nodeName	要素ノードの要素名を返す。（pタグの場合はp）

そのため、テキストノードを無視して要素ノードを取り出すためのプロパティがあります。

プロパティ	概要
parentElement	親ノードへの参照。（参照先がDocumentオブジェクトの場合はnullを返す）
children	子要素ノードへの参照を格納するHTMLCollection
firstElementChild	最初の子要素ノード。（子要素ノードを持たない場合はnullを返す）
lastElementChild	最後の子要素ノード。（子要素ノードを持たない場合はnullを返す）
nextElementSibling	兄弟要素ノード内の次の要素ノード。（次の兄弟要素ノードを持たない場合はnullを返す）
previousElementSibling	兄弟要素ノード内の一つ前のノード。（前の兄弟要素ノードを持たない場合はnullを返す）
childElementCount	子要素ノードの数。

メソッド

上記のプロパティはdocumentを基準としてノードを取得しているためかなり不便です。
そのため任意の要素ノードを取得するメソッドがあります。

メソッド	概要
getElementById('id名')	指定したid名と一致する要素ノードを取得
getElementsByClassName('クラス名')	指定したクラス名と一致した要素をHTMLCollectionとして取得
getElementsTagName('タグ名')	指定したタグ名と一致した要素をHTMLCollectionとして取得
getElementsByName('属性名')	指定した属性名と一致した要素をNodeListとして取得
quelySelector('セレクタ')	指定したセレクタと一致した要素の最初のひとつを取得
quelySelectorAll('セレクタ')	指定したセレクタと一致した要素を格納したNodeListとして取得

HTMLCollectionとNodeListの違い

今まで何回か出てきたHTMLCollectionとNodeListですが、どちらも要素を配列のように格納したものですが、挙動が異なる点がいくつか存在します。

HTMLCollectionは動的、NodeListは静的

HTMLCollectionは後から要素が増減した場合、動的に反映されるのに比べて、NodeListは要素が後から増減しても反映されることはありません。

<ul id="list">
    <li class="listitem">テキスト</li>
    <li class="listitem">テキスト</li>
    <li class="listitem">テキスト</li>
    <li class="listitem">テキスト</li>
</ul>

const item = document.getElementsByClassName('listitem');
console.log(item); // => 4

//HTMLCollection
const newitem = document.createElement('li');
newitem.innerText = 'テキスト';
newitem.classList.add('listitem');
const list = document.getElementById('list');
list.appendChild(newitem);
console.log(item.length); // => 5

//NodeList
const newList = document.createElement('li');
newList.innerText = 'テキスト';
newList.classList.add('listitem');
const list = document.getElementById('list');
list.appendChild(newList);
console.log(item.length); // => 4

メソッドの違い

HTMLCollectionとNodeListでは、使用できるメソッドが異なります。
NodeListでは、forEachメソッドが使用できますが、HTMLCollectionに対しては使用できないといった違いがあります。