これまで、if文・for文・配列・関数など、JavaScriptの基本的なことを学んできました。
ここからは、それらの基礎的なことを使って、HTMLやCSSといった「DOM」を操作していきます。
- JavaScriptでHTMLの要素を取得する４つの方法
- ４つの方法の使い分け方
JavaScriptとHTML
Web制作において、JavaScriptはアニメーションをさせるために使われることが多いです。
では、JavaScriptでアニメーションをさせるというのはどういうことでしょうか？
答えは、JavaScriptでHMTL・CSSを操作するということです。
HTML（とそれに付随するCSS）を操作することを、DOM操作（ DOM = Document Object Model ）と言います。外部の記事を見るときにも出てくる単語なので、覚えておくとよいでしょう。
では、DOM操作をどのように行なっていくかを見ていきます。
JavaScriptでDOMを操作するために
DOM操作を行ううえで、セレクタの指定が必要となります。
CSSでも、次のようにセレクタの指定を行ってきましたね。
.class-name {
/* セレクタに当てるスタイルを記述 */
color: #fff;
}これと同様に、DOM操作をするときは、HTMLを取得・指定して、そこに対して処理を追加していきます。
例えば、上記の.class-nameに対してcolor: #fff;のスタイルを当てる処理をJavaScriptで書くと
document.querySelector(".class-name").style.color = "#fff";のようになります。
これだけだとやっていることはCSSと変わりませんが、応用すると
- 「ユーザーがクリックしたときに文字を白くする」
- 「あるところまでスクロールしたときに表示させる」
などの、Webサイトのユーザーの操作に応じて「HTML・CSSを変化させる = DOM操作」を行うことができます。
次は、DOM操作に必要な、DOMの取得について解説していきます。
DOMを取得する方法
DOMを取得する方法は４つあります。一通り紹介した後に、使い分け方を解説していきます。
document.getElementsByClassName()
次のように、指定のclass属性がついているDOMを配列で取得できます。
document.getElementsByClassName("class-name");こちらを用いて、DOMをコンソールに出力してみると
<div class="class-name">
<p>例えばこんな文章が入っているとします</p>
</div>
<div class="class-name class-name02">
<p>すると、同じクラス名は配列形式で取得されます</p>
</div>
<div class="class-name class-name03">
<p>そのため、セレクタとして扱うときは、インデックス番号の指定が必要です</p>
</div>const className = document.getElementsByClassName("class-name");
console.log(className);
というように、配列で取得されます。
２つ目と３つ目につけたclass-name02とclass-name03が、配列の２つ目・３つ目にあるので、順番に並んでいることがわかります。
そのため、次のようにインデックス番号を指定してあげることで、セレクタとしてDOMを取得することができます。
<div class="class-name">
<p>例えばこんな文章が入っているとします</p>
</div>
<div class="class-name class-name02">
<p>すると、同じクラス名は配列形式で取得されます</p>
</div>
<div class="class-name class-name03">
<p>そのため、セレクタとして扱うときは、インデックス番号の指定が必要です</p>
</div>
const className = document.getElementsByClassName("class-name");
console.log(classNames[0]);
console.log(classNames[1]);
console.log(classNames[2]);
ポイント
- DOMは配列で取得される
"class-name"のように、class属性名をそのまま指定する
document.getElementById()
次のように、指定のid属性がついているDOMを取得できます。
document.getElementById("id-name");こちらを用いて、DOMをコンソールに出力してみましょう。
<div id="id-name">
<p>idは同じページに同じ名前はないので、配列にはなりません</p>
</div>const idName = document.getElementById('id-name');
console.log(idName);
ポイント
- DOMはそのまま取得される
"id-name"のように、id属性名をそのまま指定する
document.querySelector()
指定した任意のDOMを取得できます。id属性・class属性・タグなど、CSSのセレクタ感覚で指定することが可能です。
document.querySelector(".class-name");
document.querySelector("#id-name");
document.querySelector("div");
document.querySelector("div p");ポイント- そのまま取得される
- CSSセレクタと同様にclass属性なら
.（ドット）、id属性なら#（シャープ）が必要 - 複数ある場合は、最初の要素が取得される
コンソールで表示してみます。
const queryClassName = document.querySelector('.class-name');
const queryIdName = document.querySelector('#id-name');
console.log(queryClassName);
console.log(queryIdName);
document.querySelectorAll()
次のように、指定のDOMを配列で取得できます。id属性・class属性・タグなど、CSSのセレクタ感覚で指定することが可能です。
document.querySelectorAll(".class-name");
document.querySelectorAll("div");
document.querySelectorAll("div p");ポイント- 配列で取得される
- CSSセレクタと同様にclass属性なら
.（ドット）、id属性なら#（シャープ）が必要
コンソールで表示してみます。
const queryAllClassName = document.querySelectorAll('.class-name');
const queryAllIdName = document.querySelectorAll('#id-name');
console.log(queryAllClassName);
console.log(queryAllIdName);
id属性や要素の個数に関わらず、問答無用で配列で取得されます。
DOM取得の使い分け方
ここまで、DOMを取得する方法４つを紹介しました。次はその使い分け方について解説します。
授業では、わかりやすさを重視して、
- 一つの要素を取得したいとき：
document.querySelector() - 複数の要素を取得したいとき：
document.querySelectorAll()
の二つを中心に使っていきます。
複数要素を取得したいときの想像が難しいと思いますが、そのときに改めて解説しますので、ひとまず上の二つを覚えてもらえればOKです。
では、残り二つはどうなるかというと、
- 一つの要素を取得したいとき→id属性を指定：
document.getElementById() - 複数の要素を取得したいとき→class属性を指定：
document.getElementsByClassName()
というように、取得したい要素の数に応じて指定する属性を使い分けるところから始まります。
こちらの方が処理のスピードが速い場合がありますが、わかりやすさを重視して、教材ではこの二つは使いません。
ちなみに、処理スピードの差は教材や小規模のWeb制作であれば誤差レベルなので、そこまで気にしなくても大丈夫です。
メソッドについて
JavaScriptではセレクタに対して、メソッドという処理の指示を与えていきます。
書き方としては
// セレクタ.メソッド
document.querySelector(".class-name").addEventListener();のようにして書いていきます。（addEventListener()は次の記事で紹介しています。）
また、次のように、セレクタを変数に入れて、その変数に対してメソッドを当てる書き方もあります。
const className = document.querySelector(".class-name")
className.addEventListener();このようにする理由として、見やすさや処理の速度などが挙げられます。
詳しくは次回の記事以降で扱っていきます。
まとめ
今回は、DOM操作に必要な要素の取得について学んできました。ポイントを簡単にまとめます。
DOM操作のポイント
- JavaScriptでHMTL（とそれに付随するCSS）を操作することを、DOM操作という
- DOM操作では、セレクタの指定・取得をする必要がある
- 一つの要素を取得したいとき：
document.querySelector() - 複数の要素を取得したいとき：
document.querySelectorAll()
ここから、JavaScriptでアニメーションさせることをマスターしていきましょう。
