これまでの章では、JavaScriptの基本的な文法、関数、イベントなどを学んできました。この章では、いよいよJavaScriptの真骨頂、HTMLの要素を操作する方法を学びましょう。
1. DOM って何？
DOM（Document Object Model）とは、HTMLやXML文書をプログラムから操作するための仕組みです。ウェブブラウザは、HTML文書を読み込むと、その構造を解析して、オブジェクトのツリーとしてメモリ上に展開します。このオブジェクトのツリーがDOMです。
DOMのイメージを掴むために、簡単なHTML文書を例に考えてみましょう。
html
<!DOCTYPE html>
<html>
<head>
<title>DOMの例</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
</body>
</html>このHTML文書をブラウザが読み込むと、以下のようなDOMツリーが作られます。
Document
|
html
/ \
head body
/ / \
title h1 p
| | |
"DOMの例" "見出し" "段落"このツリーの各ノード（節）が、HTMLの要素やテキストに対応するオブジェクトです。JavaScriptでは、これらのオブジェクトを操作することで、HTMLの内容を変更したり、スタイルを変えたり、新しい要素を追加したりすることができるのです。
つまり、DOMはJavaScriptとHTMLの架け橋のような存在です。DOMがあるおかげで、JavaScriptはHTMLを自由に操ることができるのです。
2. 要素を取得する
JavaScriptでHTMLを操作するには、まず操作したい要素を取得する必要があります。要素を取得するには、主に以下のような方法があります。
document.getElementById()
document.getElementById()は、ID属性を使って要素を取得するメソッドです。HTMLのid属性は、ページ内で一意（ユニーク）である必要があるため、特定の要素をピンポイントで取得したい場合に便利です。
javascript
const element = document.getElementById(id名);id名: 取得したい要素のid属性の値を文字列で指定します。
例えば、以下のようなHTMLがあるとします。
html
<div id="myDiv">これはdiv要素です</div>このdiv要素を取得するには、以下のように書きます。
javascript
const myDiv = document.getElementById("myDiv");
console.log(myDiv); // <div id="myDiv">これはdiv要素です</div>myDivという変数に、idがmyDivである要素が格納されます。
document.querySelector()
document.querySelector()は、CSSセレクタを使って要素を取得するメソッドです。最初にマッチした要素だけを取得します。
javascript
const element = document.querySelector(CSSセレクタ);CSSセレクタ: 取得したい要素を指定するCSSセレクタを文字列で指定します。
例えば、以下のようなHTMLがあるとします。
html
<p class="myParagraph">段落1</p>
<p class="myParagraph">段落2</p>
<p id="special">段落3</p>classがmyParagraphである最初のp要素を取得するには、以下のように書きます。
javascript
const firstParagraph = document.querySelector(".myParagraph");
console.log(firstParagraph); // <p class="myParagraph">段落1</p>idがspecialであるp要素を取得するには、以下のように書きます。
javascript
const specialParagraph = document.querySelector("#special");
console.log(specialParagraph); // <p id="special">段落3</p>document.querySelectorAll()
document.querySelectorAll()は、CSSセレクタを使って、マッチするすべての要素を取得するメソッドです。
javascript
const elements = document.querySelectorAll(CSSセレクタ);CSSセレクタ: 取得したい要素を指定するCSSセレクタを文字列で指定します。
例えば、先ほどのHTMLから、classがmyParagraphであるすべてのp要素を取得するには、以下のように書きます。
javascript
const allParagraphs = document.querySelectorAll(".myParagraph");
console.log(allParagraphs); // NodeList(2) [p.myParagraph, p.myParagraph]allParagraphsという変数には、マッチした要素のリスト（NodeList）が格納されます。
NodeListと配列の違い
document.querySelectorAll()が返すNodeListは、配列とよく似ていますが、厳密には異なります。NodeListには、配列のメソッド（pushやpopなど）がありません。
NodeListを配列に変換するには、Array.from()を使います。
javascript
const allParagraphsArray = Array.from(allParagraphs);これで、allParagraphsArrayは配列になり、配列のメソッドを使えるようになります。