前回ではHTML内に存在する要素を参照する方法を紹介してきました。今回は,参照した要素のタグ名やテキスト,属性を調べる方法を紹介してきます。
次のサンプルHTMLを使って,それぞれの方法を見ていきましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>W3C Document Object Model</title> </head> <body> <!-- これはサンプルです。 --> <h2 original="独自の属性">Document Object Model Level 1</h2> <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html" id="dom1_core" class="dom1">Core</a> | <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html" id="dom1_html" class="dom1">HTML</a> | </body> </html> |
(注:HTML内の記述 original="独自の属性" は架空の属性です) |
タグ名を判定する
参照した要素のタグ名は,nodeNameプロパティを使います。
var h2 = document.getElementsByTagName('H2').item(0); alert( h2.nodeName ); /* H2 */ |
要素ノードオブジェクトに対してnodeNameプロパティを適用することで,該当の要素のタグ名を取り出すことができます。小文字でタグ名を記述されていたとしても,nodeNameプロパティから得られるタグ名は,すべて大文字に変換されますので,注意してください。
要素に囲まれたテキストを抜き出す
要素内のテキストは,ドキュメントツリー上では,該当の要素の子要素(テキストノード)として構成されます。そのため,テキストを参照するためには,該当の要素の子要素を参照しなければいけません。子要素を取り出したら,nodeValueプロパティを使って,テキストを取り出します。
var h2 = document.getElementsByTagName('H2').item(0); var text = h2.firstChild.nodeValue; alert( text ); /* Document Object Model Level 1 */ |
例ではH2要素のテキストを取り出しています。H2要素にはテキストしかありません。そのため,H2要素の子要素は一つに限られますので,テキストノードはfirstChildプロパティで参照できます。firstChildで参照したテキストノードに対してnodeValueプロパティを適用することで,H2要素のテキストを取り出すことができます。
ノードの種類を判定する
HTMLには要素以外にも,テキスト,コメントといった様々なタイプのノードが存在します。これまで学んできたメソッドやプロパティは,どのタイプのノードでも利用できるわけではありません。異なるタイプのノードに対してメソッドやプロパティを使うと,JavaScriptエラーになってしまいます。
もし参照しているノードの種類がはっきりしない場合は,意図せぬエラーを回避するためにも,事前にノードのタイプを判定したいところです。
ノードのタイプを判定するには,nodeTypeプロパティを使います。
<script type="text/javascript"> onload = function() { var nodes = document.body.childNodes; var len = nodes.length; var msg = ''; for(var i=0; i<len; i++) { var node = nodes.item(i); msg += node.nodeName + "\t"; msg += node.nodeType + "\t"; msg += node.nodeValue + "\n"; } alert( msg ); }; </script> |
このサンプル・コードをHEAD要素内に記述してブラウザで表示すると,次のアラート・ウィンドウが表示されます。
図●ノードタイプごとのプロパティ値 |
このサンプル・コードは,BODY要素の直下に存在するノードに対して,nodeName,nodeType,nodeValueの値を調べています。
nodeNameは,要素ノードではタグ名となりますが,コメントノードでは"#comment",テキストノードでは"#text"という文字が得られます。
nodeTypeからは,ノードの種類ごとに割り当てられた数字が得られます。要素ノードであれば1,テキストノードであれば3,コメントノードであれば8となります。
nodeValueは,テキストノードとコメントノードではテキストが得られますが,それ以外ではnullとなります。
属性値を取り出す
要素の属性の値を取り出すには,属性名と同じプロパティを使って取り出すことが多いでしょう。
alert( document.getElementById('dom1_core').href ); /* http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html */ |
このプロパティを使う方法は,W3C DOMが規定される前より,よく使われていた手法です。W3C DOMでは,この旧来のプロパティに加え,getAttributeメソッドを規定しています。
alert( document.getElementById('dom1_core').getAttribute('href') ); /* http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html */ |
getAttributeメソッドには引数に属性名を指定すると,その属性値を返します。プロパティを使った場合と結果は同じです。プロパティかgetAttributeメソッドを使うかは,あなたの好みですが,それぞれで若干の癖があります。
class属性
class属性を参照する場合は注意が必要です。class属性を参照するプロパティは,classではなく,classNameとなります。
alert( document.getElementById('dom1_core').className ); /* dom1 */ |
getAttributeメソッドは,引数に属性名をそのまま指定しますので,class属性の値を参照する場合には,引数にもclassを指定します。
alert( document.getElementById('dom1_core').getAttribute('class') ); |
本来であれば,これでどのブラウザでも"dom1"という値が得られるはずです。ところが,Internet Explorerは,この部分に関してはW3C DOMに準拠しておらず,nullが返ってきます。Internet Explorerに限っては,getAttributeメソッドに対しても"className"を引数に与えなければいけません。
alert( document.getElementById('dom1_core').getAttribute('className') ); |
このように,getAttributeメソッドを使ってclass属性の値を得たいのであれば,注意が必要です。HTMLを扱ううえでは,できる限りプロパティを使うほうが無難といえます。
独自の属性
HTMLの文法に完全に準拠するのであれば,要素ごとに使える属性が決まっています。ところが,場合によっては,HTMLの文法を無視してでも,独自の属性を使いたいことがあるでしょう。独自の属性の値を得る場合は,getAttributeメソッドを使ったほうが確実です。HTMLに規定されていない属性のプロパティを使うと,状況によって予期せぬ結果になります。
var h2 = document.getElementsByTagName('H2').item(0); alert( h2.original ); /* IE以外ではundefined */ alert( h2.getAttribute('original') ); |
H2要素には,originalというHTMLでは規定されていない属性がセットされています。このコードでは,強引にoriginalというプロパティを使って結果を表示させています。Internet Explorerでは属性値が問題なく取り出せます。しかし,これは本来の結果ではありません。Firefoxではundefinedとなります。
このように,HTMLでは規定されていない属性値を取り出したい場合は,必ずgetAttributeメソッドを使うようにしてください。
属性の値をセットする
属性の値をセットするには,属性プロパティに値をセットする方法が主流ですが,W3C DOMでは,setAttributeメソッドを用意しています。
document.getElementById('dom1_core').href = 'http://w3c.org/'; document.getElementById('dom1_core').setAttribute ('href', 'http://w3c.org/'); |
この二つのコードはどちらもA要素のhref属性を書き換え,同じ結果となります。setAttibuteメソッドの場合は,属性名と属性値を引数に与えます。
本文中4カ所で「orignal」としていましたが,すべて「original」の誤りです。お詫びして訂正します。本文は修正済みです。 [2010/04/09 14:15]