AJAXでXML解析にDOMを使うが、よく忘れてしまい、結構手間取る。
参はに以下のあたりを覚えておけば、とりあえず問題ない。
SAMPLE
・解説
<script language="javascript" type="text/javascript">
//I.E.にはNodeクラス定数がないので、firefoxと同じように作成する。
if (!Node ){
var Node = {
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
CDATA_SECTION_NODE:4,
ENTITY_REFERENCE_NODE:5,
ENTITY_NODE:6,
PROCESSING_INSTRUCTION_NODE:7,
COMMENT_NODE: 8,
DOCUMENT_NODE: 9,
DOCUMENT_TYPE_NODE:10,
DOCUMENT_FRAGMENT_NODE: 11,
NOTATION_NODE:12
};
}
/**
* DOM解析サンプル
*/
function getH4Value(){
//今回の場合getElementsByTagName('H4')[0]の方が手っ取り早いがサンプルにならないので、遠まわしに実装してます。
var divElement = document.getElementsByTagName('div')[0];
//divElement.childNodes.item(i).length ←この書き方の場合、値がおかしくなる。特にI.E.
if(!divElement.hasChildNodes()){
return;
}
for(var i=0; i<divElement.childNodes.length;i++){
var curNode = divElement.childNodes.item(i);
//var curNode = divElement.childNodes[i];
if(curNode.nodeType == Node.ELEMENT_NODE){
alert(curNode.firstChild.nodeValue);
//外部から取得したXMLだと以下が成功するが、内部HTML解析時にはうまくいかない。
//alert(curNode.text);
}
}
}
/**
* DOM。属性値の取得サンプル
*/
function getDivAttribute(){
var divElement = document.getElementsByTagName('div')[0];
alert(divElement.getAttribute('name'));
}
</script>
基本的には以下を覚えておけば大丈夫かと。
●階層関係なく要素を抽出するメソッド
・getElementsByTagName(tagname)
タグ名を引数に要素を抽出。配列で返ってくる。
・getElementsByName(name)
要素にname属性を付与したとき、そのネーミングで要素を抽出することができる。配列で返ってくる。
name属性はid属性と異なり同一名をつけることができる。
・getElementById(name)
要素にIDを付与したとき、そのネーミングで要素を抽出することができる。単一オブジェクトが返ってくる。
ID属性はname属性と異なり、１つのドキュメント内で同一名の存在はNG。
●子要素の抽出
・childNodes
直下の子要素を配列で返す。
・firstChild
一番最初に出現する子要素を返す。
注意）要素と子要素の間にスペースや改行がある場合、テキストノードとみなすか否かはブラウザにより異なる(I.E.の場合は無視する。)。そのため、要素内のテキストノードを抽出する場合以外には、あまり使わないほうがよい。
以下のような要素構成のでテキスト内容を抽出したい場合に多用する。
<div id="test1">Hello</div> ・・・・・ document.getElementById('test1').firstChild.nodeValue;
●ノードのプロパティ
・nodeType
そのノードの種類を返す。子要素を判別するときに多用する。定数値は以下の通り
|
ELEMENT_NODE |
1 |
|
ATTRIBUTE_NODE |
2 |
|
TEXT_NODE |
3 |
|
CDATA_SECTION_NODE |
4 |
|
ENTITY_REFERENCE_NODE |
5 |
|
ENTITY_NODE |
6 |
|
PROCESSING_INSTRUCTION_NODE |
7 |
|
COMMENT_NODE |
8 |
|
DOCUMENT_NODE |
9 |
|
DOCUMENT_TYPE_NODE |
10 |
|
DOCUMENT_FRAGMENT_NODE |
11 |
|
NOTATION_NODE |
12 |
firefoxなど一部のブラウザには定数化されているが、I.E.には存在しないので、SAMPLEのようにあらかじめ、プロトタイプで実装するのがのぞましいと考える。
・tagName
要素の場合、タグ名が返ってくる。
document内をDOM解析時は、HTML要素が大文字になって返ってくるから注意。nodeNameもあるが、こちらはより抽象的。いろんあノードで様々な値を返すので少しわかりにくい。
・nodeValue
テキストノードの場合、テキスト内容を返す。属性ノードの場合、属性値を返す。
注意) nodeValueとは別にinnerHTMLがある。javascript独特な言語だけど、とても使いやすいです。
・hasChildNodes()
対象ノードに対し、子要素を持っているか否かを判定する。
注意）前述通り、テキストノードに対してブラウザ間で解釈が異なるので、エラー回避程度で使うのが良いと思う。
・親要素取得
・parentNode
親ノードを取得します。
・属性の取得
・getAttribute(name)
要素ノードに対して、属性名を指定して実行すると値が返ってくる。
・hasAttribute(name) I.E.7では未サポートなので削除
要素ノードに対して、属性が存在するかチェックする。
他にも対象ノードを元に親要素や兄弟要素を抽出するメソッド、プロパティはW3Cの規格にある。
本投稿が基本編なので、ここらへんでおしまいにしたいと思います。m(_ _)m
まぁ、残りのメソッドやプロパティはほとんど使わない。汎用的な共通モジュール作るとかなら別かもしれないけど。
PR
