HTML
JavaScript
HTML5
js
dom

[JS初心者]#2 DOM編 JavaScriptを学ぶ

More than 1 year has passed since last update.

[JS初心者]#2 DOM編 JavaScriptを学ぶ

DOMとは?

マークアップ言語をオブジェクトの集合として操作するためのモデル(Document Object Model)で、JavaScriptにはDOMを操作するAPIが実装されている。

ノード

タグで囲まれたテキスト等のオブジェクトをノードと言います。

<div id='hoge' class='piyo'>
  fugafuga
</div>

これでいうと、divタグでくくられたものをノードと言って、
divは要素ノード
divの属性である、id='hoge'やclass='piyo'は属性ノード
divタグの中にあるfugafugaはテキストノード
と言います。

  • 要素ノード
  • 属性ノード
  • テキストノード

DOMによる操作(取得)

操作(取得、削除、追加)をするために、要素を取得する必要があります。

  • 要素リストの取得
  • タグ名やID値などをキーとして指定
  • 階層構造における相対位置を指定

のようにして、DOMを取得して操作することができます。

要素リストの取得

要素を直接指定してIDを取得してみる

<form id='hoge1'></form>
<form id='hoge2'></form>
<form id='hoge3'></form>
  <script>
  window.onload = function() {
    alert(document.forms[0].id);                                                                                              
    alert(document.forms[1].id);
    alert(document.forms[2].id);
  }
  </script>

これで、alertにより、hoge1-3まで順番に表示されることで、要素が全部取得できていることがわかった。

タグ名やID値などをキーとして指定

指定するときのメソッド一覧

メソッド名 意味
getElementById() ID値をキーに要素を取得
getElementsByTagName() タグ名をキーに要素のリストを取得
getElementsByClassName() class名をキーに要素のリストを取得

※ ID以外は複数形(リスト)になっていることに注意

  • getElementById()
<div id='hoge1'></div>
<div id='hoge2'></div>
<div id='hoge3'></div>
<script>
window.onload = function() {
  alert(document.getElementById('hoge1').id);                                                                                 
}
</script>

これでhoge1が表示される

  • getElementsByTagName()
<div id='hoge1'></div>
<div id='hoge2'></div>
<div id='hoge3'></div>
<script>
window.onload = function() {
  alert(document.getElementsByTagName('div')[0].id);
  alert(document.getElementsByTagName('div')[1].id);
  alert(document.getElementsByTagName('div')[2].id);                                                                          
}
</script>

これでhoge1-3が表示される

  • getElementsByClassName()
<div id='hoge1' class='fuga'></div>
<div id='hoge2' class='fuga'></div>
<div id='hoge3' class='fuga'></div>
<script>
window.onload = function() {
  alert(document.getElementsByClassName('fuga')[0].id);
  alert(document.getElementsByClassName('fuga')[1].id);
  alert(document.getElementsByClassName('fuga')[2].id);                                                                       
}                                       
</script>   

これでhoge1-3が表示される

階層構造における相対位置を指定

プロパティ名 意味
parentNode 一段上(親)の要素
previousSibling 同じレベル(兄弟姉妹)で前にある要素
nextSibling 同じレベル(兄弟姉妹)で次にある要素
firstChild 一段下(子)で最初の要素
lastChild 一段下(子)で最後の要素
<div id='hoge1'>
  <div id='hoge2' class='fuga'>hoge2</div>
  <div id='hoge3' class='fuga'>hoge3</div>
</div>
<script>
window.onload = function() {
  alert(document.getElementsByClassName('fuga')[0].nextSibling.nextSibling.id);
}                                                                                                                             
</script>

これで、hoge3が取得できる

DOMによる操作(生成)

ノードを生成するメソッド

メソッド名 意味
createElement() 要素のノードを生成
createAttribute() 属性のノードを生成
createTextNode() テキストのノードを生成
createCDATASection() CDATAセクションのノードを生成
createComment HTML/XMLのコメントのノードを生成
createEntityReference() 実体を参照するノードの生成
createProccessingInstrction() 処理命令のノードを生成
createDocumentFragment() ドキュメントのフラグメントのノードを生成

DOMによる操作(追加)

ノードを追加するメソッド

メソッド名 意味
appendChild() 最後の子として追加
insertBefore() 第2パラメータで指定したノードの直前に挿入

DOMによる操作(削除)

ノードを削除するメソッド

メソッド名 意味
removeChild() 指定した要素の削除

属性の追加・削除・取得

メソッド名 意味
createAttribute() 属性ノードの生成
setAttributeNode() パラメータに指定された属性ノードを追加
hasAttribute() パラメータに指定された属性の有無を返却
removeAttribute() パラメータに指定された属性の削除

これまでのページ