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

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

## DOMとは？

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

### ノード

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

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

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

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

### DOMによる操作（取得）

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

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

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

#### 要素リストの取得

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

```HTML
<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()

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

これでhoge1が表示される

- getElementsByTagName()

```html
<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()

```html
<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| 一段下（子）で最後の要素| 

```html
<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()|パラメータに指定された属性の削除| 

## これまでのページ

- [[JS初心者]#1 イベント編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/d58922441764718a5446)
- [[JS初心者]#2 DOM編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/aec423775da01070e8c9)
- [[JS初心者]#3 ウィンドウオブジェクト編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/5f0f86a9db5c771e6340)
- [[JS初心者]#4 セレクタAPI編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/a26a69f97852e87c0e44)
- [[JS初心者]#5 テスト＆デバッグ編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/838e1b50c6afe5bdc9b3)