DOM操作における主要な操作対象は以下の3つに分類することができます。
- 要素
- テキスト
- 属性
要素はタグのことです。テキストはタグで囲まれたテキストのことを指し、属性はタグに設定された属性を意味します。
例えば以下のようなHTMLがあったとします。
<a href="xxx">Link</a>
この場合、aが要素、Linkがテキスト、hrefが属性を表します。xxxはhref属性の値です。
DOM操作とはこれらに対して何らかの操作を行うことです。操作とは主に、取得（読み取り）、更新、作成、削除となります。p要素のテキストを変更する、a要素の属性を削除する、新たにテーブル要素を作成する。これらの処理を実現する方法を学ぶのが本書の目的です。
最初の1章では、要素の取得を考えます。なぜ要素の取得が最初なのかというと、これがDOM操作の基本だからです。HTMLにおいて、テキストや属性というのはそれ自体では成り立ちません。p要素のテキスト、a要素の属性というように、必ず何らかの要素と関連しています。要素を取得しなければテキストにも属性にもアクセスできません。つまり、要素の取得はDOM操作において必要な土台なのです。
では、要素の取得をやってみましょう。
よく使う3つの取得関数
JavaScriptには要素の取得をするための関数があります。よく使うものを紹介します。
document.getElementById()
document.querySelector()
document.querySelectorAll()
他にも色々ありますが、この3つを押さえておけばまず問題はありません。順番に見ていきましょう。
document.getElementById()
getElementByIdは引数で指定したIDを持つ要素を取得します。
let element = document.getElementById(id);
引数idには取得した要素のidを文字列で指定します。戻り値の型はHTMLElementとなります。ここに要素に関する様々な情報が入っているということを押さえておけばいいでしょう。このオブジェクトを通してテキストや属性にアクセスすることができます。
例えば、以下のHTMLがあるとします。(html,bodyタグなどは省略)
<h1 id="title">タイトル</h1>
<p id="info">DOM操作を覚えよう</p>
getElementByIdを使って、要素を取得してみましょう。
//id=titleの要素を取得
let title = document.getElementById('title');
//id=infoの要素を取得
let info = document.getElementById('info');
idがtitle,infoの要素を取得しています。戻り値は、title,infoという名前の変数に代入しています。これらの変数を通して、テキストや属性の取得や変更を行っていきます（次章以降でやります）。
さて、getElementByIdはIDを指定して要素を取得する非常にシンプルな関数なのですが、逆に言うと機能が限定的です。取得対象をIDでしか指定できません。これは、IDが付いていない要素は取得できないことを意味します。HTML上の取得したい要素にIDを追加するという対応もあり得ますが、要素を取得するためだけにIDを付けるのは面倒な上、HTMLが読みにくくなってしまいます。
document.querySelector()
IDだけでなく他の条件を指定して要素を取得することができるのが、querySelectorです。
let element = document.querySelector(selector);
引数selectorにはCSSのセレクタを指定します。IDはもちろん、クラス名やタグ名、属性値などを指定できるので、様々な状況に対応することができます。ただし、指定したセレクタに該当する要素が複数存在する場合に注意が必要です。querySelectorでは、該当要素が複数存在する場合、最初の要素を返すという仕様になっています。最初というのはHTMLの中でより上部に記述されている要素が優先されるということです。
具体例を見てみましょう。
<ul id="menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
//id=menuの要素を取得
let menu = document.querySelector('#menu');
//id=menuの中のli要素を取得
let li = document.querySelector('#menu li');
idがmenuの要素と、menuの下にあるli要素を取得しています。idがmenuの要素は1つしか存在しないので問題ありません。ところが、「idがmenuの中にあるli要素」は3つ存在しています。この場合は最初の要素（一番上にある要素）であるitem1のliを取得します。
もし2番目以降の要素を取得したい場合、その要素だけに該当するようなセレクタを指定する必要があります。例えば以下のような指定ができます。
//id=menuの中の2番目のli要素を取得
let li2 = document.querySelector('#menu li:nth-child(2)');
CSSセレクタは色々な条件指定ができるので、慣れれば自在に要素を取得することができます。IDしか指定できないgetElementByIdよりも適用範囲が広いのです。
document.querySelectorAll()
querySelectorでは条件に該当する最初の要素を取得しますが、該当する全ての要素を取得したいときもあります。そういう場合にquerySelectorAllを使います。
let nodeList = document.querySelectorAll(selector);
引数にはquerySelectorと同様にCSSセレクタを使います。戻り値はNodeListオブジェクトでHTMLElementを複数集めたモノと思ってください。条件に該当する全ての要素の情報が入っています。
先程の例と同じHTMLで見てみましょう。
<ul id="menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
// id=menuの中のすべてのli要素を取得
let liList = document.querySelectorAll('#menu li');
これを実行すると、liListはli要素が3つ入ったNodeListオブジェクトを指します。
このオブジェクトから各要素へアクセスするには配列のように[]を使います。
let li1 = liList[0];
let li2 = liList[1];
let li3 = liList[2];
各要素の型はHTMLElementになります。
まとめ
要素を取得する関数は他にもありますが、今回学んだ３つを覚えておけば困ることはあまりないでしょう。
- document.getElementById
- document.querySelector
- document.querySelectorAll
要素を取得するのはDOM操作の最初の一歩です。次章からは、取得した要素に関連した情報（テキストや属性）にアクセスしていきます。