javascript DOMの基本操作まとめ

2013-02-08

javascriptのDOM操作の基本をおさらいしておこうと思います。jQueryは少し触ったことがあるのですが、javascript自体はほとんど使ったことがないのでこれを機会に勉強していこうと思います。

ここではDOMの操作とイベント処理をまとめてみます。これが出来るようになると、Web上でインタラクティブな要素を盛り込むことができるようになります。

javascriptの基本 DOM操作

まずはiavascriptのDOM操作から。ここで使うHTMLはこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>javascriptの練習</title>
</head>
<body>
<div id="main" style="border:1px solid #555;width:400px">
    <header id="header">
        <h1 class="title">title</h1>
    </header>
    <article style="background-color:#888;float:left;width:200px;height:150px">
        <section class="entry">entry1</section>
        <section class="entry">entry2</section>
        <section class="entry">entry3</section>
    </article>
    <aside style="background-color:#999;float:left;width:200px;height:150px">
        <ul class="sideparts">
            <li>parts1</li>
            <li>parts2</li>
            <li>parts3</li>
        </ul>
    </aside>
    <footer>footer</footer>
</div>

このHTMLをjavascriptで操作していきます。基本的な操作方法は操作する対象の要素を取得、その後要素の変更をしていくという流れになります。

まずは要素の取得方法をまとめてみました。

/* 要素の検索 */
//タグ名で取得
var getTagName=document.getElementsByTagName("section");

document.write(getTagName[0].innerHTML);    //entry1



//ID名で取得
var getID=document.getElementById("header");

document.write(getID.innerHTML);    //<h1 class="title">title</h1>

document.write(getID.textContent);  //title



//クラス名で取得
var getClass=document.getElementsByClassName("sideparts");

document.write(getClass[0].innerHTML);  //<li>parts1...parts3</li>

document.write(getClass[0].textContent);  //parts1~parts3



//selectorを使う
var selector=document.querySelector(".title");    //#使うとid取得

document.write(selector.innerHTML);     //title



//selectorで複雑な指定を使う
var selectorX=document.querySelector("article > section:nth-of-type(2)");

document.write(selectorX.innerHTML);    //entry2

こんな感じで操作したい要素を取得すると、タグを変更したり削除したりできるようになります。以下はタグの作成や削除のコードです。

/* ノードの操作 */
//作成
var newNode=document.createElement("section");    //作成する要素
var text=document.createTextNode("entry4追加");     //挿入するテキスト

newNode.appendChild(text);                      //要素にテキスト入れる

var getInsertTag=document.getElementsByTagName("article");    //挿入場所を取得
getInsertTag[0].appendChild(newNode);                       //取得した場所に挿入




//変更
var replaceNode=document.createElement("p");  //変更する要素作成
var oldNode=document.getElementById("header");    //変更したい場所指定

oldNode.parentNode.replaceChild(replaceNode, oldNode);  //親ノードから変更




//削除
var deleteNode=document.getElementsByClassName("sideparts");  //削除対象を指定

deleteNode[0].parentNode.removeChild(deleteNode[0]);    //親ノードから削除

javascriptの基本イベント処理

次はjavascriptのイベント処理の方法についてです。ここまでjavascriptコードではタグの取得や操作をしましたが、その発動タイミングは読み込み時でした。イベントハンドラやリスナを設定することで、マウスのクリックやキーボードのタッチでメソッドを処理できるようにすることができます。

//イベントハンドラ
function touched(){             //処理する関数を設定
    alert("touched article");
}


var article=document.getElementsByTagName("article"); //イベント場所を指定

article[0].onclick=touched; //イベントハンドラをセット


//イベントリスナ
function dbClick(){         //処理する関数を設定
    alert("dbClick!");
}

var aside=document.getElementsByTagName("aside");     //イベント場所を指定

aside[0].addEventListener("dblclick",dbClick,false);  //イベントリスナのセット