【基本を抑える_05】DOM操作

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 = '値を書き換えました';

実際の動きをみる

実際に上記の３パターンについて、

動きをみてみたいのであれば、

以下のサイトでみてみましょう。

初心者のためのWeb入門（JSの基本）

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入門」

のサイトに記載があるので、

そちらを参考にしてください。