クライアントサイドJavaScript(DOM)の基本知識まとめ(1)

知識が曖昧なクライアントサイドJavaScriptを自分のためにまとめ。

##・DOMとは
クライアントからの情報を受け取り、HTMLなどで書かれたドキュメントにアクセスするときに登場してくるのが*DOM(Document Object Model)*と呼ばれるしくみ。
DOMはドキュメントを文書ツリーとして扱う。ドキュメントに含まれる要素や属性、テキストをそれぞれオブジェクトとみなして、そのオブジェクトが集合したものをドキュメントであるという扱いをする。
このツリー構造がDOMをいじっていく上で重要っぽい。
これらのオブジェクト（ノード）へのアクセスを可能にする「API」をDOMと呼ぶ。
DOMを利用することで、HTMLの検索・書き換え、スタイルの変更などのユーザーが操作した時の処理をプログラムすることができる。

##・クライアントサイドJavaScript(DOM)での開発の基礎知識
まず文書ツリーから要素（ノード）を取得してくる必要がある。以下に要素を取得してくる主なメソッドについてまとめる。

###・メソッドまとめ
####(1) id値をもとに要素を取得してくる(getElementByIdメソッド)

指定されたidを持つ要素をElementオブジェクトとして返す。

   document.getElementById(id)  
   //id:取得してきたい要素のid値

（例）

element_by_id.html

   <ul>
     <li id="x">お腹が</li>
     <li id="y">とても</li>
     <li id="z">空きました。</li>
   </ul>

element_by_id.js

   var result = document.getElementId('y');

これでElementオブジェクトが取得できる。中身が欲しい場合はinnerHTMLなどを使えばOK。

####(2) Tag名をもとに要素を取得してくる(getElementsByTagNameメソッド)

   document.getElementsByTagName(name);  
   //name:取得してきたい要素のタグ名

id値からの取得とは異なり複数の要素が合致する可能性があり、getElementsByTagNameの戻り値は要素の集合となる。戻り値はHTMLCollectionであり配列ではないため、Array.from(document.getElementsByTagName(name))などで配列ライクに変換する必要がある。

####(3) name属性をもとに要素を取得してくる(getElementsByNameメソッド)

   document.getElementsByName(name);  
   //name:取得してきたい要素のname属性の値

####(4) class属性をもとに要素を取得してくる(getElementsByClassNameメソッド)

   document.getElementsByClassName(clazz);  
   //clazz:取得してきたいclass属性の値

メソッドの引数に空白区切りで複数のクラス名を指定することもできる。

####(5) セレクター式に合致した要素を取得してくる(querySelector/querySelectorAllメソッド)

   document.querySelector(selector);  
   //selector:セレクター式

セレクター式を利用することで複雑なコードを書くことなく要素を取得してくることができる。使ってみた感じだと、細かい設定を楽に書けるので、getXxxxxより便利そうだったけど、queryXxxxxメソッドはgetXxxxxメソッドに比べて低速らしいので、複雑な検索条件で検索してきたい場合以外はgetXxxxxメソッドを使った方が良いっぽい。

###・ノードウォーキング
上にあげたメソッドを利用すれば要素を取得してくることができるが、一回一回取得してくるのは無駄が多いし面倒。そこで、取得してきた要素を基点にして、どの位置にあるかで要素を取得してくるノードウォーキングという方法を利用する。
基本的にはgetXxxxxやqueryXxxxxメソッドで要素を取得し、位置関係が近いものに関してはノードウォーキングを利用して取得してくるというのが一般的な方法。

・parentNode 親ノード
・previousSibling/nextSibling 兄/弟ノード
・previousElementSibling/nextElementSibling 兄/弟要素
・childNodes すべての子ノード
・firstChild/lastChild 最初/最後の子ノード
・firstElementChild/lastElementChild 最初/最後の子要素

リストに含まれる子ノードが要素のみでない点に注意。取り出したノードが要素であるかの判定にはnodeTypeプロパティを利用する。
戻り値が1であれば要素ノードである。

nodewalking.html

   <ul id="ippai">
     <li>もう</li>
     <li>これ以上</li>
     <li>食べられません。</li>
   </ul>

nodewalking.js

   //<ul id="ippai">を取得
   var list = document.getElementById('ippai');
   //<ul>配下のすべての子ノードを取得（NodeListオブジェクト）
   var opts = list.childNodes;
   for (var i = 0; len = opts.length; i<len; i++){
     var opt = opts.item(i);
     //子ノードが要素ノードであるか判定
     if(opt.nodeType === 1){
       console.log(opt.innerHTML);
     }
   }

###参照
JavaScript本格入門　山田祥寛　著