今回は、DOMを解説していきます。
DOMとは
DOMはドキュメントオブジェクトモデルのことで、ドキュメントつまりHTMLにアクセスして操作できる仕組みです。
Webサイトを閲覧しているときに、ボタンをクリックしたらメニューが表示されるような動きを見たことがあると思います。
あれもJavaScriptのDOMを使って動作しています。
HTMLやCSSだけではできない表現をWebサイトに追加できるので、DOMの操作がJavaScriptの醍醐味と言えるでしょう。
DOM操作
実際に簡単なDOM操作をしていきます。
getElementById
まずは、index.htmlのbody内を以下のように書き換えてみてください。
body内以外のコードは省略しています。
<body>
<div class="content">
<p id="text">テキスト</p>
</div>
<script src="./js/script.js"></script>
</body>次に、JavaScriptを以下のように書き換えます。
const replaceText = () => {
const text = document.getElementById('text');
text.innerHTML = 'このテキストに置き換えられます。';
}
replaceText();ブラウザで表示を確認すると、「テキスト」ではなく「このテキストに置き換えられます。」という文章になっています。
documentはindex.htmlの文書全体を表しています。
getElementByIdはidを指定して要素を取得する、documentがあらかじめ持つメソッドです。
特定のidを持つ要素を取得したいときは、document.getElementById('id名')の形で取得できます。
取得した要素もさまざまなメソッドを持ちます。
innerHTMLは取得した要素の中身を取得するメソッドですが、上記のように中身を書き換えることもできます。
querySelector
index.htmlを以下のように書き換えてください。
<body>
<div class="content">
<p class="text">テキスト</p>
</div>
<script src="./js/script.js"></script>
</body>次に、JavaScriptを以下のように書き換えます。
const replaceText = () => {
const text = document.querySelector('.text');
text.innerHTML = 'このテキストに置き換えられます。';
}
replaceText();querySelectorは、CSSのプロパティと同じ要領で要素を指定できます。
該当する要素が複数ある場合、最初の要素だけ取得します。
以下のように、同じクラス名の要素を追加してみます。
<body>
<div class="content">
<p class="text">テキスト</p>
<p class="text">テキスト</p>
</div>
<script src="./js/script.js"></script>
</body>HTMLを変更して、ブラウザの表示を確認してください。
最初の「テキスト」は「このテキストに置き換えられます。」に書き換えられましたが、二番目の「テキスト」は書き換えられません。
以下のように、要素名を指定した形でも取得できます。
const text = document.querySelector('p');querySelectorAll
querySelectorは要素を一つだけ取得しましたが、querySelectorAllは、複数の要素を取得できます。
index.htmlはそのままで、script.jsを書き換えてください。
const replaceText = () => {
const text = document.querySelectorAll('.text');
console.log(text);
}
replaceText();コンソールでtext変数の中身を見てみると、2つのp要素が取得できているのが分かります。
const replaceText = () => {
const text = document.querySelectorAll('.text');
text[0].innerHTML = 'このテキストに置き換えられます。';
}
replaceText();このように、番号を指定して要素を取得できます。
querySelectorAllで取得した要素のリスト（NodeList）では、以前のレクチャーで紹介したforEachメソッドが使用できます。
forEachは要素の数だけ処理を行うメソッドなので、以下のように書くと取得した全ての要素を操作できます。
const replaceText = () => {
const text = document.querySelectorAll('.text');
text.forEach((item) => {
item.innerHTML = 'このテキストに置き換えられます。';
});
}
replaceText();これでtextクラスを付けた全要素のテキストが書き換えられました。
getElementsByClassName
getElementsByClassNameは、クラス名を指定して該当の要素を全て取得するメソッドです。
index.htmlはそのままで、script.jsを以下のように書き換えてください。
const replaceText = () => {
const text = document.getElementsByClassName('text');
text[0].innerHTML = 'このテキストに置き換えられます。';
}
replaceText();getElementsByClassNameの場合、引数は'.text'ではなく'text'になっている点に気をつけてください。
querySelectorAllと同様に、番号を指定して取得できます。
ただし、getElementsByClassNameで取得した要素のリスト（HTMLCollection）には、forEachメソッドはありません。
getElementsByClassNameで取得した要素の全てに処理を行いたいときは、以下のように書きます。
const replaceText = () => {
const text = document.getElementsByClassName('text');
[...text].forEach((item) => {
item.innerHTML = 'このテキストに置き換えられます。';
})
}
replaceText();...textの...の部分は、配列やオブジェクトを展開するスプレッド構文です。
[]は配列なので、各要素を展開して配列の形にしています。配列であればforEachメソッドが使えるようになります。