DOMについての復習

DOMはHTMLとほとんど同型のツリー構造をとるが、HTMLにおける要素ノード以外にも、いくつか種類がある。下記にDOMノードの種類を示す。

要素ノード

HTMLの要素に対応するノード。複数の属性を持ち、さらに子ノードを持つ。
具体的にはelement.getElementsByTagName()やdocument.getElementById()で取得できる。

ルートノード

HTMLではhtml要素が全ての要素のルートとなっているが、DOMではさらに上位にdocumentというルートノードが存在する。

テキストノード

文字列を格納するノード。子ノードを持たない。

 

上記のノードを取得・変更・追加・削除するためのAPIの規定がDOMである。
次にDOMを操作・取得するための関数を下記に示す。

DOMの関数

指定したid属性の値を持つ要素ノードを取得するメソッド

document.getElementById(id)

呼び出し元のノードの子孫要素の中で、指定した要素の名前を持つ要素ノードをリストとして取得するメソッド

element.getElementsByTagName(name)

呼び出し元のノードの子孫ノードの中から、指定したクラス属性の値を持つ要素ノードをリストとして取得するメソッド

element.getElementsByClassName(name)

呼び出し元のノードの指定した属性の値を取得するメソッド(ただし、ほとんどの属性には同名のプロパティが用意されている)

element.getAttribute(name)

呼び出し元のノードの直下のすべてのノード(テキストノード含む)のリストを取得するプロパティ

element.childNodes

呼び出し元のノードの直下の最初のノードを取得するプロパティ(element.childNodes[0]と同じ)
※ちなみにelement.firstElementChildとすると、最初の要素ノードの取得になる

element.firstChild

(例)子要素すべてを削除

let $el = document.getElementById('hoge');
while ( $el.firstChild ) {
    $el.removeChild($el);
}

指定した要素名の要素ノードを生成(生成後はappendChild()やinsertBefore()を使って、任意の場所に挿入)

document.createElement(name)

指定した文字を格納したテキストノードを生成(生成後はappendChild()やinsertBefore()を使って、任意の場所に挿入)

document.createTextNode(text)

呼び出し元のノードの子ノードの一番最後に指定したノードを追加

element.appendChild(node)

呼び出し元のノードの指定した子ノードを削除

element.removeChild(node)

指定したノードの直前にノードを挿入

insertBefore(node, ref)

 

より簡単にノードを取得できるAPIとしてSelectors APIがある。
今はこちらの方が主流。
上記の「element.getElementsByClassName(name)」「element.getElementsByTagName(name)」また「document.forms」などのDOM APIとSelectors APIの大きな違いとしては、上記の場合はLive NodeList(単純にNodeListと呼ばれることもある)を取得するのに対してSelectors APIはStatic NodeList(HTMLCollectionと呼ばれることもある)を取得する。

両者の違いは、別の概念で言い換えると、要素のコピーを取得するかポインタを取得するかの違いだと筆者は思っている。
それぞれ使用できるメソッドの違いがもちろんあり、混合することでよく発生するエラーは、下記のような感じ。

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Selectors APIはjQueryライクにかけるので、まだjQuery使っている人でも簡単に導入できると思う。

Selectors API

呼び出し元のノードの子ノードの中から、指定したセレクタで一番最初の要素ノードを取得

document.querySelector(selector)

呼び出し元のノードの子ノードの中から、指定したセレクタのすべての要素ノードを取得

document.querySelectorAll(selector)

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA