DOMの基本
javaScriptの中で、ボタンやテキストなどの操作を行うことができます。
そのような操作対象にできるものをjavaScriptではDOMと呼びます。
DOMの操作する範囲
DOMの操作する範囲は、イメージとして、
ブラウザの実際にコンテンツを表示している範囲と考えましょう。
イメージとしては、
この赤枠部分のコンテンツ部分が対象の範囲と考えてください。
DOMの構造
DOM自体は、ブラウザのコンテンツ部分の範囲を扱うことができます。
この扱う範囲のDOMは、階層化になっているという事を把握しておきましょう。
例えば、
シンプルな、以下のHTMLだとすると
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>
<img src="...."/>
<h1>タイトル</h1>
<p>説明</p>
</body>
</html>DOMの階層も、HTMLの構造と同じように、
このように「ツリー状」の階層化された構造になっています。
DOM操作をする場合のjavaScriptの注意点
javaScriptをHTMLファイルから、
外部ファイルとして読み込む時に、
DOM操作を行うためには、
- HTMLタグの要素の後にjavaScriptのコードを読み込む
ということが必要です。
具体的には、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<img src="...."/>
<h1>タイトル</h1>
<p>説明</p>
</body>
</html>このコードでは、
このように、
HTMLの読み込む順序の関係で、
javaScriptの中で、
DOM操作をしようとしても、
bodyタグの中身が読み込まれていないため、
DOM操作ができません。
そのため、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>
<img src="...."/>
<h1>タイトル</h1>
<p>説明</p>
</body>
<script type="text/javascript" src="sample.js"></script>
</html>このように、
HTMLのbodyタグの後に書くことで、
読み込んでいる要素に対して、
DOM操作が可能になるので、
javaScriptの読み込む場所に関しては注意しましょう。
DOM操作の基本
javaScriptのDOM操作は、「querySelector」を使用します。
querySelectorの書き方
querySelectorは、以下のように書きます。
let sample = document.querySelector('対象のタグ/クラス/ID');document.querySelectorで取得した値を、sampleという変数に入れています。
DOM操作で、
document.querySelectorに設定する値は、
以下の３パターンを把握しておきましょう。
- パターン１：対象のタグを指定する場合
- パターン２：対象のクラスを指定する場合
- パターン３：対象のIDを指定する場合
パターン１：対象のタグを指定する場合
タグを指定する場合、querySelectorに直接、タグの名前を設定します。
<!-- DOM操作したいタグ（h4タグ) -->
<h4>サンプルのh4タグです。</h4>// h4タグのDOMを取得する
let sample = document.querySelector('h4');
// 取得したDOM（h4タグ）の値を書き換える
sample.textContent = 'h4タグの値を書き換えました';パターン２：対象のクラスを指定する場合
クラスを指定する場合、querySelectorに直接、クラスの名前を設定します。
<!-- DOM操作したい要素（クラスを設定) -->
<div class="test">サンプルのh4タグです。</div>// クラスが設定されたタグのDOMを取得する
let sample = document.querySelector('.test');
// 取得したDOM（クラス名test）の値を書き換える
sample.textContent = '値を書き換えました';パターン３：対象のIDを指定する場合
IDを指定する場合、querySelectorに直接、IDの名前を設定します。
<!-- DOM操作したいタグ（IDを指定) -->
<div id="test">サンプルのh4タグです。</div>// ID（test）のDOMを取得する
let sample = document.querySelector('#test');
// 取得したDOM（IDがtest）の値を書き換える
sample.textContent = '値を書き換えました';実際の動きをみる
実際に上記の３パターンについて、
動きをみてみたいのであれば、
以下のサイトでみてみましょう。
DOM操作の古い方法
javaScriptのDOM操作に関して、昔ながらのやり方があります。
DOM操作の昔ながらのやり方として、いくつかの方法があります。
その中で、２つの方法を紹介しておきます。
- Document.getElementById()で設定する方法
- Document.getElementsByClassName()で設定する方法
ここで、上記の２つの方法を説明しますが、
できれば、「querySelector」を使えるようにしましょう。
Document.getElementById() を使う方法
getElementByIdは、
IDを指定することでDOMを取得することができます。
<div id="test">サンプル</div>let sample = Document.getElementById('test');Document.getElementsByClassName()を使う方法
getElementsByClassNameは、
classを指定することでDOMを取得することができます。
<div class="test">サンプル</div>let sample = document.getElementsByClassName('test');参考サイト
この記事の内容や、
Dom操作のメソッドなど、
「初心者のためのWeb入門」
のサイトに記載があるので、
そちらを参考にしてください。