javascript 初心者のためのDOM操作の実践

Pocket

javascriptを使うなら必ず理解しておきたいDOM操作。DOM操作をマスターすればHTMLファイルの中から変更したい場所を取得し、必要な処理を行えるようになります。

一度覚えるとあとは簡単なのでさくっと乗り切りましょう。

javascriptのDOM 要素の取得方法

まずは要素の取得方法。例えばアコーディオンなどでは「現在開いている要素意外を閉じる」という動作がよくあります。これを実装するにはクリックした場所だけでなく、その前後の要素も取得する必要があるのです。

そんな場合に要素の取得が必要になるわけです。DOM操作の基本的な書き方はこんな感じです。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic DOM</title>

  <style>
    .clear_task{
      text-decoration: line-through;
      color: #ccc;
    }
  </style>
</head>
<body>
  <h1>Basic DOM</h1>
  
  <ul id="task_list">
    <li>起きる</li>
    <li>コーヒー</li>
    <li>歯を磨く</li>
    <li>顔洗う</li>
    <li>出勤</li>
  </ul>

  <script src="js/basic-dom.js"></script>
</body>
</html>

javascript

// li要素を取得
var elements = document.getElementsByTagName('li');

// 要素が1以上なら
if(elements.length >= 1){

  // 1つめの要素を取得
  var element = elements[0];

  // クラスを追加
  element.className = 'clear_task';
}

ブラウザで表示すると以下のようになります。
javascript 初心者のためのDOM操作実践編1
ここではgetElementsByTagNameを使ってli要素を取得してます。要素の取得方法はこれ以外にも以下のような方法があります。

  • getElementById() : id名で取得
  • getElementByClassName() : class名で取得
  • getElementByTagName() : 要素名で取得
  • parentNode : 親要素を取得

javascriptのDOM 要素の操作

要素の取得ができたら次は要素の操作をやってみます。クラス名を付け加えたり、要素内のテキストを書き換えたりできるのでWebアプリ制作なんかでもよく使います。

先ほどもclassNameでクラス名を追加してますが、さらに追記してみます。

// 2つめの要素を取得
var nextEl = elements[1];

// 2つ目の要素内のテキストを取得
var nextText = nextEl.textContent;

// ラベルをセット
var nextLabel = ' <em>next</em>';

// 要素内を書き換え
nextEl.innerHTML = nextText + nextLabel;

これをブラウザで表示するとこんな感じ。
javascript 初心者のためのDOM操作実践編2
HTMLに書き込まれていないnextの部分をjavascriptで追加しています。

DOM操作の関数にはclassName意外に以下のようなものがあります。

  • innerHTML : 取得した要素内を取得、書き換え
  • textContent : 取得した要素内を取得、書き換え(テキストのみ)
  • createElement() : 要素を作成
  • createTextNode() : テキストを作成
  • appendChild() : 指定した要素の子要素に追加
  • removeChild() : 指定した要素の子要素を削除
  • className : クラス名を取得、追加
  • id : id名を取得、追加
  • hasAttribute() : 指定した要素に属性があるかチェック
  • getAttribute() : 指定した要素の属性を取得
  • setAttribute() : 指定した要素に属性をセット
  • removeAttribute() : 指定した要素の属性を削除

これらの使用例はこんな感じになります。

// 新しい要素とテキストを作成
var newEl = document.createElement('li');
var newText = document.createTextNode('朝礼であいさつ');

// 要素内にテキストを入れる
newEl.appendChild(newText);

// 新しい要素をulに追加
var parentEl = document.getElementsByTagName('ul');
parentEl[0].appendChild(newEl);


// 要素にクラスがあるかチェック
if (!parentEl[0].hasAttribute('class')) {

  // クラスを追加
  parentEl[0].setAttribute('class','today_task');
}

ブラウザで表示すると以下のようになります。
javascript 初心者のためのDOM操作実践編3

こんな感じで操作したい要素を指定して、idやclassを追加したり、新しい要素を入れたりといったことが簡単にできるようになります。

この他にも様々なDOM関係のメソッドやAPIが用意されてるのでこちらのElementリファレンスなどを参考にしてみてください。