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

2014-08-08

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');

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

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

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

ブラウザで表示すると以下のようになります。

ここではgetElementsByTagNameを使ってli要素を取得してます。要素の取得方法はこれ以外にも以下のような方法があります。

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

javascriptのDOM 要素の操作

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

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

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

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

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

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

これをブラウザで表示するとこんな感じ。

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');
}

ブラウザで表示すると以下のようになります。