DOM #

DOMとはDocument Object Modelの略で、HTML(またはXML)の各要素にアクセスするための仕組みである。Javascriptではこれを用いて、HTMLを操作することが可能になる。

DOMツリー #

DOMツリーとは、HTMLやXMLの構成をツリー状に表現したものである。

例えば、以下のようなHTMLがあったとする。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>タイトル</title>
</head>

<body>
    <h1>見出し1</h1>
    <div id="main">
        <p>Hello!</p>
        <p>World!</p>
    </div>
</body>

</html>

表示例

これをDOMツリーで書き表すと以下のようになる。

また、このDOMツリー内の各要素をノードと言う。

要素の取得方法 #

では、JavascriptからこのDOMをどのように操作するのか？まずは、このノード(要素)を取得する方法についてを述べる。

ID名で取得 #

Javascriptから、要素のID名を使ってノードを取得する方法は以下の通り。

document.getElementById('ID名')

実際に実行してみよう。先程のサンプルページをブラウザで開き、Javascriptコンソールを起動して入力・適用すると以下のようになる。

> var main = document.getElementById('main')
< undefined
> console.log(main)
[Log] <div id="main">
<p>Hello!</p>
<p>World!</p>
</div>
< undefined

最後のconsole.logにおいて、idが’main’の要素を取得し表示している。

タグ名での取得 #

タグ名での取得は以下の通り。

document.getElementsByTagName('タグ名');

同様に、先程記載した例のHTMLに適用すると以下のようになり、p要素を取得している。

> var p = document.getElementsByTagName('p');
< undefined
> console.log(p)
[Log] HTMLCollection (2)
0 
<p>Hello!</p>
1 
<p>World!</p>

< undefined

クラス名で取得 #

同様に、要素のクラス名を使ってノードを取得する方法は以下の通り。

document.getElementsByClassName('クラス名');

親要素を取得 #

Javascriptで取得したノードの親要素を取得するには、parentNodeを使用する。

先程の’ID名で取得’で取得したノードの親要素を取得する例を以下に示す。

//ID名で取得
var id = document.getElementById('ID名');

//親要素の取得
var parent = id.parentNode;

使用例

> var id = document.getElementById('main')
< undefined
> var parent = id.parentNode
< undefined
> console.log(parent)
[Log] <body>
<h1>見出し1</h1>
<div id="main">
<p>Hello!</p>
<p>World!</p>
</div>
</body>

< undefined

子要素の取得 #

子要素を取得する方法はいくつかある。

子要素のうち最初の要素を取得するにはfirstChild、最後の要素はlastChild、子要素を全て配列として取得するにはchildNodesを利用する。

//例、ID名で取得
var id = document.getElementById('ID名');

//子要素のうち最初の要素を取得
var first = id.firstChild;

//子要素のうち最後の要素を取得
var last = id.lastChild;

//子要素を全て配列として取得
var child = id.childNodes;

使用例

> var id = document.getElementById('main');
< undefined
> var first = id.firstChild;
< undefined
> console.log(first)
[Log] #text "
        "
< undefined
> var last = id.lastChild;
< undefined
> console.log(last);
[Log] #text "
    "
< undefined
> var child = id.childNodes;
< undefined
> console.log(child)
[Log] NodeList (5)
0 #text " "
1 
<p>Hello!</p>
2 #text " "
3 
<p>World!</p>
4 #text " "

< undefined

要素の情報の取得 #

例で示したHTMLにおいて、取得した要素の内部の情報は、innerTextを使うことで取得できる。

var target = document.getElementById('main').firstElementChild;

//要素の内部の情報(テキスト)を取得
var text = target.innerText;
console.log(text);

フォームの取得 #

HTMLのフォームを取得するには、formsを利用する。

document.formsとする事で、HTML文書内のフォームを全て取得できる。フォームが複数あった場合は、配列として取得できる。

//フォームを全て取得
var forms = document.forms;

その他の要素を取得するプロパティ #

その他、DOMの特定の要素を取得するプロパティは以下の通り。

プロパティ名	意味
previousSibling	同じ階層で前にある要素
nextSibling	同じ階層で後にある要素
attributes	ノードの属性リスト
className	クラス名
clientWidth	要素の幅
clientHeight	要素の高さ
clientLeft	要素の左ボーダーの幅
clientTop	要素の上ボーダーの幅
dir	テキストの方向
innerHTML	ノード内のHTML要素
innerText,textContent	ノード内のプレーンテキスト
lang	言語
namespaceURI	名前空間のURI
nodeName	ノードの名前
nodeType	ノードの型
nodeValue	ノードの値
prefix	名前空間の識別子
style	要素のstyle属性の宣言オブジェクト
tagName	要素名
tabIndex	要素のタブインデックス番号
title	タイトル属性

DOMの操作方法 #

DOMで取得した要素の操作方法について述べる。

要素の情報の変更 #

取得した要素の内部の情報を変更するのも、innerTextを使うことで行える。

var target = document.getElementById('main').firstElementChild;

//要素の内部の情報(テキスト)を変更する
target.innerText = 'テキストを変更しました';

使用例

> var target = document.getElementById('main').firstElementChild;
< undefined
> target.innerText = 'テキストが変更されました'
< "テキストが変更されました"

適用後の画面(スクショ)

要素の削除 #

取得した要素を削除したいときは**removeChild()**メソッドを利用する。

ただし、removeChild()メソッドは、その名の通り消したい要素の親要素で利用する。消したい要素から呼び出すのではないので注意。

親要素を呼び出したい時は、parentNodeを利用する。

var target = document.getElementById('main').firstElementChild;

//要素を削除する
target.parentNode.removeChild(target);

使用例

> var target = document.getElementById('main').firstElementChild;
< undefined
> target.parentNode.removeChild(target);
< <p>Hello!</p>

適用後の画面(スクショ)

要素の追加 #

要素を追加したい時は、要素の作成と要素の挿入の２ステップが必要になる。

要素の作成には、**createElement(‘タグ名’)**を利用する。

その後、要素を挿入するには**appendChild(子要素)**を利用する。

このメソッドは、その名の通り、呼び出した要素の子要素を追加するメソッドである。

var target = document.createElement('p');
target.innerText = '追加された要素';

//要素を挿入する
var main = document.getElementById('main');
main.appendChild(target);

使用例

> var target = document.createElement('p');
< undefined
> target.innerText = '追加された要素';
< "追加された要素"
> var main = document.getElementById('main');
< undefined
> main.appendChild(target);
< <p>追加された要素</p>

適用後の画面(スクショ)

セレクタAPI #

セレクタAPIと言うメソッドを使って要素を取得する方法がある。

例としては、**querySelector()メソッドやquerySelectorAll()**メソッドを使う。querySelectorメソッドを使うと、該当する要素のうち最初の要素のみを取得し、qurySelectorAllメソッドは該当する要素を全て取得する。

var target = document.querySelectorAll('p');

//要素を変更する
for(var i=0,l=target.length;i<l;i++){
    target[i].style.color='red';
}

使用例

> var target = document.querySelectorAll('p');
< undefined
> for(var i=0,l=target.length;i<l;i++){
    target[i].style.color='red';
}
< "red"

適用後の画面(スクショ)

その他のDOMを操作するメソッド #

その他、DOMを操作するメソッドは以下の通り。

メソッド名	意味
createAttribute()	属性のノードを作成
createTextNode()	テキストのノードを作成
createComment()	HTMLのコメントのノードを作成
createEntryReference()	実態を参照するノードを作成
createProcessingInstruction()	処理命令のノードを作成
insertBefore()	指定したノードの直前に追加
setAttributeNode()	指定された属性ノードを追加
hasAttribute()	指定された属性の有無を返す
removeAttribute()	指定された属性の削除