• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
DOMから始めるJavaScriptモダン・スクリプティング

第4回 DOMスクリプティングのことはじめ(2) ~これはどんな要素?~

益子 貴寛 2007/08/22 日経デザイン

 前回では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]

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

  • 【ニュース解説】

    政府が本腰、「情報銀行」って何だ

     個人情報にひも付いた行動履歴や購買履歴などのITデータを、個人の預託に基づいて一元管理する制度、あるいは事業者のこと。政府が、個人のITデータを安心して活用できる環境を整備する目的で検討している。

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

クライアント/OA機器

ネットワーク/通信サービス

セキュリティ

もっと見る