こんにちは！
JavaScriptのDOM操作を使って画面操作を行う事があるのですが、よく忘れてしまうのでまとめてみました。
このまとめはDOM操作の使い方と個人的によく使うDOM操作の覚え書きになっています。
DOM操作がよくわからん！という方は最初から読んで下さい。
DOMとは
-
DOMとは、Document Object Modelの略で、HTMLやXML文書のためのプログラミングインターフェイスです。
-
DOMではHTML、XMLドキュメントをオブジェクトのツリー状の集合として取り扱います。
このツリーをDOMツリーと呼びます。
DOM操作をする事で何が出来るの？
- 文書構造、スタイル、内容を変更することが出来るので、ユーザーに視覚的なフィードバックを与える事が出来ます。
Javascriptで動的にウィンドウを閉じてみたり、クリックすると色を変えるなど色々出来ます。
やり方
大きい流れは以下の通りです。
- ドキュメント内の要素をメソッドで取得する。
- 取得した要素をプロパティで変更する。
実際にやってみよう
だらだら説明を続けてもよくわからないので、実際にDOM操作でh1要素のタイトルを取得して変更する作業をしてみましょう。
要素取得とプロパティの変更
まず以下のhtmlを用意します。
<html>
<head>
<title>DOMの操作練習</title>
</head>
<body>
<h1 id="title">DOMの操作練習</h1>
</body>
</html>
以下のようにh1のテキストが表示されていますね。
以下のようにJavaScriptのコードを追加してみます。
<html>
<head>
<title>DOMの操作練習</title>
</head>
<body>
<h1 id="title">DOMの操作練習</h1>
</body>
<!-- 以下を追加 -->
<script>
// 1.DOM操作する対象の選択
const title = document.getElementById('title');
// 2.要素の変更
title.textContent = 'タイトルを変更しました';
</script>
</html>
すると以下のようにh1要素のテキストが変更されます。
一体何が行われたのか？
1.DOM操作する対象の選択
2.要素の変更
について詳しく見ていく事にします。
1.DOM操作する対象の選択
まずは、操作したい対象を選択しています。以下のコードを見て下さい。
const element = document.getElementById('title');
Documentオブジェクト
ここで出てくるdocumentは、Documentオブジェクトというものです。
Documentオブジェクトは、そのHTMLドキュメント全体を表現するオブジェクトになります。
JavaScriptでDocumentオブジェクトは、documentというグローバル変数でアクセス出来ます。
要素の取得
getElementById('title')でtitleというIDを持つ要素を取得します。
IDはDOMツリーの中で一意でなければなりません。
2.要素の変更
先程取得した要素のテキストを変更します。
textContentというプロパティを使えば、指定した要素のテキスト部分のみを取り出すことができます。
element.textContent = "タイトル変更";
1行でも書けるよ
説明しやすいので2行で書きましたが1行でつなげて書く事も出来ます。
document.getElementById('title').textContent = 'タイトルを変更しました';
イベントを使ったDOM操作
実際の業務では、イベントと組み合わせて使う事が多いです。
イベントとは「ボタンが押されたら」とか「送信されたら」といった動作の事です。
例えば以下の例は「取得した要素がクリックされたらlogを出力してね」というコードになります。
document.getElementById('title').onclick = function() {
console.log('ログ出力');
}
getElementByIdで取得したtitleをクリックするとログ出力する事が出来ました。
よく使うDOM操作のまとめ(随時更新)
ドキュメント全体からspan要素だけを取得
document.getElementByTagName('span');
ドキュメント全体から全ての要素を取得
document.getElementByTagName('*');
取得した要素のclassを追加
document.getElementById(id).classList.add(class);
document.getElementById(id).classList.add(class1, class2);
classを削除
document.getElementById(id).classList.remove(class);
classをもっているか判定
document.getElementById(id).classList.contains(class);
指定したクラスをもっていれば消す、もっていなければ追加。
document.getElementById(id).classList.toggle(class);
取得された要素がクリックされたタイミングで起動
document.getElementById('title').onclick = function() {
// 処理内容
}