DOMとは
そもそもDOMはドキュメントをオブジェクトとして扱い、ドキュメントツリーを作成するものです。
DOMを操作する上で覚えておきたい用語は次のものです。
- Node（ノード）：要素や属性、テキストなどの総称
- Element（要素） ：pやh1などのタグ
- Attribute（属性）：hrefやsrcなどの属性
- text（テキスト）：テキスト
DOMの世界ではノードがタグとテキストを含む要素全体を指し、要素はタグのことを言います。
つまり、特定のノードの要素や属性、テキストを抽出したり追加、置換、削除するための手段となります。
それは言い換えると「特定の場所にタグや属性やテキストを新しく作ったり、書きかえたり、消したりできる！」ということです。
DOMのレベル
- レベル１ 1998/01 ノードの参照、追加、置換、削除
- レベル２ 2000/11 スタイル操作、イベントモデル、ノードの範囲
- レベル３ 2004/04 XPath、妥当性の検証、読み込み、保存
DOM0はDOMレベル1ができる前の標準化以前のブラウザオブジェクトのことです。
DOMの操作
特定ノードの取得
ピンポイントでアクセスする方法と相対的にアクセスする方法と2種類の方法があります。
- ダイレクトアクセス：ID値やタグ名、クラス名で直接要素を取得する方法
- ノードウォーキング：ある要素を起点に相対的な位置関係で要素を取得する方法
idでノードを取得
idでノードを取得するにはgetElementById(id名)を使用します。
引数のid名の要素ノードを返します。
idの特性から返される値はユニークな要素ひとつだけです。
var result = document.getElementById(id名);
タグ名でノードを取得
タグ名でノードを取得するにはgetElementsByTagName(‘タグ名’)を使用します。
引数のタグ名の要素の集合（ノードリストオブジェクト）を返します。
var result = document. getElementsByTagName(‘タグ名’);
- length:返された要素の数がわかる
- item(i):i番目のノードを取得
classでノードを取得
タグ名でノードを取得するにはgetElementsByClassName(‘class名’)
引数のクラス名の要素の集合（ノードリストオブジェクト）を返します。
var result = document. getElementsByClassName(‘class名’);
- length:返された要素の数がわかる
- item(i):i番目のノードを取得
相対的なノード取得
起点になるノードを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変更サンプル
