Javascriptで要素を取得する方法

JavaScriptで要素を取得する方法のメモ


・DOM
idから検索 document.getElementById()
タグから検索 document.getElementsByTagName()
CSSのクラスから検索 document.getElementsByClassName() - IE等では使えない

取得した中身は配列として扱う
ただし入り組んだデータを取得するのは結構めんどい

・XPath
idから検索 document.evaluate('id("...")')
タグから検索 document.evaluate('.//div')
CSSのクラスから検索 document.evaluate('.//div[@class="..."]')

var xpathResult = document.evaluate(xpathExpression, contextNode, 
            namespaceResolver, resultType, result );

引数は下記の5つ
xpathExpression：XPath
contextNode：(HTMLなら基本documentで。)
namespaceResolver：基本null
resultType：戻り値の型の指定
result：基本null

resultType（戻り値の型）指定は次の通り
0 ANY_TYPE
1 NUMBER_TYPE - 倍精度浮動小数点数 (double)
2 STRING_TYPE - 文字列
3 BOOLEAN_TYPE - 真偽値
4 UNORDERED_NODE_ITERATOR_TYPE
5 ORDERED_NODE_ITERATOR_TYPE
6 UNORDERED_NODE_SNAPSHOT_TYPE
7 ORDERED_NODE_SNAPSHOT_TYPE
8 ANY_UNORDERED_NODE_TYPE
9 FIRST_ORDERED_NODE_TYPE


6～7で取得した中身にはsnapshotプロパティでアクセスする

・DOM
idから検索 document.getElementById()
タグから検索 document.getElementsByTagName()
CSSのクラスから検索 document.getElementsByClassName() - IE等では使えない

取得した中身は配列として扱う
ただし入り組んだデータを取得するのは結構めんどい

・XPath
idから検索 document.evaluate('id("...")')
タグから検索 document.evaluate('.//div')
CSSのクラスから検索 document.evaluate('.//div[@class="..."]')

var xpathResult = document.evaluate(xpathExpression, contextNode,
            namespaceResolver, resultType, result );

引数は下記の5つ
xpathExpression：XPath
contextNode：(HTMLなら基本documentで。)
namespaceResolver：基本null
resultType：戻り値の型の指定
result：基本null

resultType（戻り値の型）指定は次の通り
0 ANY_TYPE
1 NUMBER_TYPE - 倍精度浮動小数点数 (double)
2 STRING_TYPE - 文字列
3 BOOLEAN_TYPE - 真偽値
4 UNORDERED_NODE_ITERATOR_TYPE
5 ORDERED_NODE_ITERATOR_TYPE
6 UNORDERED_NODE_SNAPSHOT_TYPE
7 ORDERED_NODE_SNAPSHOT_TYPE
8 ANY_UNORDERED_NODE_TYPE
9 FIRST_ORDERED_NODE_TYPE


6～7で取得した中身にはsnapshotプロパティでアクセスする