【JavaScript】ノード要素取得方法あれこれ

フロントエンドエンジニアという立ち位置において、JavaScriptの理解は必須要件となってます。そこで、読み込む書籍を探していたわけですが、以下の書籍に絞りこみました。

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

JavaScript 第6版

パーフェクトJavaScript (PERFECT SERIES 4)

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

Amazonやブクログ、ジュンク堂での立ち読みを経て購入したのが下記2冊です。サイ本は時期尚早と見て見送りました。この2冊読破してからかなと。

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

 こちらは、入門書だけどもしっかりとクロージャーやらオブジェクトやらの話にも言及している本で、他の言語を知っている人のJavaScriptへの取っ掛かりとしては最適だと判断して購入しました。実際読み進めていくと実践は少ないのでザ・座学といった感じですが、JavaScriptとは何たるか、が理解できてきているように感じます。

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

 こちらは、オライリーから出版されているフクロウ本？（っていうのかな）です。この本も実践編というわけではないのですが、オブジェクトやクロージャ、prototypeに対してまさしく開眼！させてくれる本のようです。

まだ読み進めて間もないので詳しい書評は書けませんが、上記2冊を通して実用に耐えうる言語仕様理解を進めていきたいと考えています。

以下は、JavaScript本格入門のメモです。

絶対位置でのノード要素取得方法

getElementByIdメソッド

documentオブジェクトの、getElementByIdメソッド。IDを取得する。

document.getElementById('result').innerHTML = 結果が入る

<div id="result">★ここに入る★</div>

getElementsByTagNameメソッド

同じくdocumentオブジェクトのメソッドであり、タグの要素名を指定する。IDをキーとするgetElementByIdとは異なり、タグは複数の要素が合致する場合があるため、要素の集合（NodeListオブジェクト）をリターンする。

注意点としては、ElementではなくElementsである点。

WordPressで目次リストを作成するプラグインに「Table of Contents Plus」があるが、目次に関しては、このメソッドを使うことでhタグを取得し一覧表示させることができれば容易に実装が可能であるため、プラグインに頼らずとも実装可能となる。

window.onload = function() {

  var result = ;

  var list = document.getElementsByTagName('a');

  

  for (var i = 0; i < list.length; i++) {

    result.push(list.item(i).href);

  }

 

  window.alert(result.join('¥n'));

}

引用：JavaScript本格入門（259ページ）

NodeListオブジェクトから利用できるメンバはlength, item(i)の2種類。 

getElementsByClassNameメソッド

こちらは、class属性をキーにノードを取得するメソッド。ただし、TagNameと同様にクラスは複数存在ｓるため、戻り値はNodeListオブジェクトとして返却される。

具体的な使い方はgetElementsByTagNameと同じであるため割愛する。NodeListオブジェクトも同じ。

相対位置でのノード要素取得方法

getElementById、getElementsByTagName、getElementsByClassNameメソッドはどれも特定の要素ノードを取得するためのメソッドであるが、相対的にDOMでノードを取得することもできる。

カレントノードに対して以下のプロパティがある。名前は直感的なのですぐ覚えられるはず。childNodesプロパティはNodeListオブジェクトが返却される。

• parentNode（親ノード）
• previousSibling（兄ノード）
• nextSibling（弟ノード）
• childNodes（すべての子ノード）
• firstChild（最初の子ノード）
• lastChild（最後の子ノード）

childNodesプロパティを使う場合の注意点として、空白はテキストノードして扱われる場合がある（ブラウザ依存）。
そこで、optionタグなど、特定要素のみを取り出したい場合は、nodeTypeプロパティを使って要素ノードを取得する必要がある。

属性値の取得

getAttribute/setAttributeメソッド

要素取得には、前述のclassName（DOM）等があるが、実際のHTMLではclassと名前が異なる。そこで、本メソッドを使うことで同名でのアクセスが可能となる。

不特定の属性取得

attributesプロパティを使用することで、特定の要素ノードに属するすべての属性を取得できるようになる。attributesプロパティの戻り値は、NamedNodeMapオブジェクトとなる。NodeListオブジェクトにも似ている。
名前、インデックス番号、両方でアクセスが可能。
lengthとitem(i)、それからノード取得のためのnodeName, nodeValueプロパティがある。

※IEでattributesプロパティを使うと、未定義の全属性が出力されてしまうため、よほどのことがない限りはgetAttributeメソッドを使ったほうが良さそう。

window.onload = function() {

  var logo = document.getElementById('logo');

  var attrs = logo.attribute;

  var result = ;

 

  for(var i = 0; i < attrs.length; i++) {

    var attr = attrs.item(i);

    if(attr.nodeValue) {

      result.push(attr.nodeName + ':' + attr.nodeValue);

    }

  }

  window.alert(result.join('¥r¥n');

}

 

引用：JavaScript本格入門（265ページ）

ノードの追加

innerHTMLプロパティ

innerHTMLは、プロパティ。
DOM標準で決められたプロパティではないが、主要ブラウザに対応している。

document.writeではレンダリングブロックが発生するため、innerHTMLを使うこと。document.writeを使う場合はasyncで非同期読み込みすること。

まとめ

こんな感じで、少しずつ気になったフレーズや、実際に使えそうなパーツを抜粋していこうと思っています。少しでも参考になれば幸いです。