解 説

DOMとは

そもそもDOMはドキュメントをオブジェクトとして扱い、ドキュメントツリーを作成するものです。
DOMを操作する上で覚えておきたい用語は次のものです。

  • Node(ノード):要素や属性、テキストなどの総称
  • Element(要素) :pやh1などのタグ
  • Attribute(属性):hrefやsrcなどの属性
  • text(テキスト):テキスト

DOMの世界ではノードがタグとテキストを含む要素全体を指し、要素はタグのことを言います。

つまり、特定のノードの要素や属性、テキストを抽出したり追加、置換、削除するための手段となります。
それは言い換えると「特定の場所にタグや属性やテキストを新しく作ったり、書きかえたり、消したりできる!」ということです。

DOMのレベル

  • レベル1  1998/01 ノードの参照、追加、置換、削除
  • レベル2  2000/11 スタイル操作、イベントモデル、ノードの範囲
  • レベル3  2004/04 XPath、妥当性の検証、読み込み、保存

DOM0はDOMレベル1ができる前の標準化以前のブラウザオブジェクトのことです。

DOMの操作

特定ノードの取得

ピンポイントでアクセスする方法と相対的にアクセスする方法と2種類の方法があります。

  • ダイレクトアクセス:ID値やタグ名、クラス名で直接要素を取得する方法
  • ノードウォーキング:ある要素を起点に相対的な位置関係で要素を取得する方法

idでノードを取得

idでノードを取得するにはgetElementById(id名)を使用します。
引数のid名の要素ノードを返します。
idの特性から返される値はユニークな要素ひとつだけです。

var result = document.getElementById(id名);

idでノードを取得サンプル

タグ名でノードを取得

タグ名でノードを取得するにはgetElementsByTagName(‘タグ名’)を使用します。
引数のタグ名の要素の集合(ノードリストオブジェクト)を返します。

var result = document. getElementsByTagName(‘タグ名’);

  • length:返された要素の数がわかる
  • item(i):i番目のノードを取得

タグ名でノードを取得サンプル

classでノードを取得

タグ名でノードを取得するにはgetElementsByClassName(‘class名’)
引数のクラス名の要素の集合(ノードリストオブジェクト)を返します。

var result = document. getElementsByClassName(‘class名’);

  • length:返された要素の数がわかる
  • item(i):i番目のノードを取得

classでノードを取得サンプル

相対的なノード取得

起点になるノードをdocument.getElementById(‘id’)で取得後childNodesプロパティで取得した起点の要素直下の子ノードをNodeListオブジェクトで返します。
注意:取得されるノードは要素だけではなくブラウザによっては空白や改行も含まれます。
相対的なノード取得サンプル1
相対的なノード取得サンプル2

属性の取得と設定

要素ノードにアクセスできると属性値はそのプロパティで取得できます。
属性値の取得getAttribute(属性名)
属性値の設定setAttribute(属性名,属性値)
ゲッター、セッターで取得と設定を行います。
ゲッターサンプル
セッターサンプル

ノードの追加、置換、削除

新たなノードの作成はそれぞれ次のメソッドを使用します。

  • document.createElement(‘要素名’);
  • document.createTextNode(‘テキスト’);
  • document.createAttribute(‘属性’);

作成したノードの追加するには配置しなければなりません。指定要素の直下に配置するには次のメソッドを使用します。

要素ノード.appendChaild(‘追加ノード’)

属性ノードの追加

  • setAttribute(属性名,属性値)
  • createAttribute(‘属性名’)

ノード追加サンプル

既存ノードの置換と削除

置換
ノード.replaceChild(‘置換後のノード’,’置換対象ノード’)

削除
ノード.removeChild(‘削除するノード’)
ノード削除サンプル

インラインスタイルシートの変更

インラインスタイルの変更:styleプロパティ 要素ノード.style.color:’red’
ハイフン付きのプロパティはハイフンなしで2単語目は頭文字を大文字(ex59.html)
background-color  → backgroundColor
ノード置換サンプル

外部スタイルシートの変更

外部スタイルシートを変更:classNameプロパティ要素ノード.className
あらかじめcssの設定をしておいたクラス名に変更することで変更する。
インラインcss変更サンプル
css変更サンプル