【JavaScript】ノード要素取得方法あれこれ
フロントエンドエンジニアという立ち位置において、JavaScriptの理解は必須要件となってます。そこで、読み込む書籍を探していたわけですが、以下の書籍に絞りこみました。
![JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで](http://ecx.images-amazon.com/images/I/512wo9i9iSL._SL160_.jpg)
JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2010/11/27
- メディア: 大型本
- 購入: 29人 クリック: 673回
- この商品を含むブログ (53件) を見る
![JavaScript 第6版 JavaScript 第6版](http://ecx.images-amazon.com/images/I/51c9uCrhHgL._SL160_.jpg)
- 作者: David Flanagan,村上列
- 出版社/メーカー: オライリージャパン
- 発売日: 2012/08/10
- メディア: 大型本
- 購入: 12人 クリック: 252回
- この商品を含むブログ (18件) を見る
![パーフェクトJavaScript (PERFECT SERIES 4) パーフェクトJavaScript (PERFECT SERIES 4)](http://ecx.images-amazon.com/images/I/51yrjFsf-2L._SL160_.jpg)
パーフェクトJavaScript (PERFECT SERIES 4)
- 作者: 井上誠一郎,土江拓郎,浜辺将太
- 出版社/メーカー: 技術評論社
- 発売日: 2011/09/23
- メディア: 大型本
- 購入: 24人 クリック: 588回
- この商品を含むブログ (12件) を見る
![開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質](http://ecx.images-amazon.com/images/I/51jMq3%2BDklL._SL160_.jpg)
開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
- 作者: Cody Lindley,和田祐一郎
- 出版社/メーカー: オライリージャパン
- 発売日: 2013/06/19
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
Amazonやブクログ、ジュンク堂での立ち読みを経て購入したのが下記2冊です。サイ本は時期尚早と見て見送りました。この2冊読破してからかなと。
![JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで](http://ecx.images-amazon.com/images/I/512wo9i9iSL._SL160_.jpg)
JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2010/11/27
- メディア: 大型本
- 購入: 29人 クリック: 673回
- この商品を含むブログ (53件) を見る
こちらは、入門書だけどもしっかりとクロージャーやらオブジェクトやらの話にも言及している本で、他の言語を知っている人のJavaScriptへの取っ掛かりとしては最適だと判断して購入しました。実際読み進めていくと実践は少ないのでザ・座学といった感じですが、JavaScriptとは何たるか、が理解できてきているように感じます。
![開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質](http://ecx.images-amazon.com/images/I/51jMq3%2BDklL._SL160_.jpg)
開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
- 作者: Cody Lindley,和田祐一郎
- 出版社/メーカー: オライリージャパン
- 発売日: 2013/06/19
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
こちらは、オライリーから出版されているフクロウ本?(っていうのかな)です。この本も実践編というわけではないのですが、オブジェクトやクロージャ、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タグを取得し一覧表示させることができれば容易に実装が可能であるため、プラグインに頼らずとも実装可能となる。
NodeListオブジェクトから利用できるメンバはlength, item(i)の2種類。
getElementsByClassNameメソッド
こちらは、class属性をキーにノードを取得するメソッド。ただし、TagNameと同様にクラスは複数存在sるため、戻り値は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メソッドを使ったほうが良さそう。
引用:JavaScript本格入門(265ページ)
ノードの追加
innerHTMLプロパティ
innerHTMLは、プロパティ。
DOM標準で決められたプロパティではないが、主要ブラウザに対応している。
document.writeではレンダリングブロックが発生するため、innerHTMLを使うこと。document.writeを使う場合はasyncで非同期読み込みすること。
まとめ
こんな感じで、少しずつ気になったフレーズや、実際に使えそうなパーツを抜粋していこうと思っています。少しでも参考になれば幸いです。