HTMLタグ名や属性値からの参照をマスターしよう：DOMの基本を学ぼう（2）（1/3 ページ）

DOMでは、さまざまな要素参照方法を規定している。今回はHTML内のタグ要素の参照方法や、タグの属性値の取り出し方を押さえよう。

» 2008年03月27日 00時00分公開

旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、おもにDOM Level 1で規定されている手法を使って、JavaScriptを使ってどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説していきます。JavaScriptからHTML要素を手に取るように操れるようになります。

　ここでは、HTML内の各タグ要素の参照方法、テキストの値の取り出し方、タグの属性値の取り出し方を見ていきます。DOMでは、さまざまな要素参照方法を規定しています。それぞれの違いを見極め、シーンに応じて適切な参照方法を選択できるようになることが重要です。

本連載は、ソフトバンククリエイティブ刊行の『標準DOMスクリプティング』のうち「第2章 DOMの基本」を、同社の許可を得て転載するものです。

本書は、DOM（Document Object Model）とJavaScriptの関係を分かりやすく解説しています。さらに、JavaScriptからDOMを介して、いかにしてHTMLやXMLの操作ができるのかを紹介しています。またこれらのことを学びながら、クロスブラウザ対策の重要性も理解できるようになると思います。

なお、 Webでの連載として転載するに当たり、若干表現を変更している点があります（例えば「本書は」としている部分は「本連載は」としていることや図版などの省略など）。その点ご了承ください。

【注文ページへ】

HTMLタグ名から要素を参照する

　HTMLには多数のタグがさまざまな階層に存在しますが、この中から特定タグをJavaScriptでどのように参照するのかを見ていきましょう。参照の方法はいろいろありますが、まず、ここではHTMLタグ名から指定の要素を参照する方法を見ていきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>DOMのレベル</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>DOMのレベル</h1>
<ul>
  <li>Level2</li>
  <li>Level3</li>
</ul>
</body>
</html>

　このHTML全体は、documentオブジェクトに格H1タグ要素を参照したいときには、次のようgetElementsByTagNameメソッドを使います。

var h1ElmList = document.getElementsByTagName('h1');
var h1Elm = h1ElmList[0];

　getElementsByTagNameメソッドは、タグ名を与えることで、HTML内に存在する該当するタグの参照の一覧を返します。実際には、DOMで規定されたNodeListと呼ばれるオブジェクトとして返します。NodeList型のオブジェクトは配列のように振る舞います。

　例では、H1タグのNodeListを取り出し、変数h1ElmListに格納します。そしてリストの0番目、つまりリストの最初に格納された要素を変数h1Elmに格納したことになります。これは次のように記述するのと同じです。

var h1Elm = document.getElementsByTagName('h1')[0];

　H1タグは、例のHTMLには1つしかありませんので、NodeListには1つしか要素が格納されていないはずです。そのため、0番目の要素を抜き出せばよいことは明らかです。

　では、LIタグ要素を抜き出す方法を見てみましょう。

var liElmList = document.getElementsByTagName('li');

　LIタグ要素は全部で3つあります。したがって、liElmListには合計3つの要素が格納されるはずです。liElmList[0]は"Level1"、liElmList[1]は"Level2"、liElmList[2]は"Level3"が記述されたLIタグ要素のオブジェクトになります。

　HTMLにおいて、getElementsByTagNameメソッドは、引数に与えるタグ名の大文字・小文字を区別しません。もしHTML内でタグがすべて大文字で書かれており、getElementsByTagNameメソッドで小文字のタグ名を引数として与えたとしても、正しく動作します（XHTMLの場合は、大文字でタグを記述するのは規定に反しますので注意してください）。その逆も然りです。

要素ノードオブジェクト

　これまでの例では、ただ単に要素ノードオブジェクトを取り出したにすぎません。もちろん、これだけでは役に立ちません。では、この要素ノードオブジェクトとはなんでしょうか。

　要素ノードオブジェクトは、他の文献やWebページで「参照」と呼ばれることがあります。「参照」とは、この言葉が意味する通り、該当のHTML要素を参照していることを表したものです。JavaScript言語から見れば、これは単なるオブジェクトにすぎません。オブジェクトであれば、プロパティやメソッドを組み込むことができるはずです。DOMでは、どんな要素ノードオブジェクト（参照）に対して、どんなプロパティやメソッドが使えるのかを規定しているのです。そしてブラウザは、DOMの規定に従って、プロパティやメソッドを持った要素ノードオブジェクトを自動的に作ってくれるのです。自動的に作られたノードオブジェクトのプロパティやメソッドを通して、情報を得たり、内容を書き換えたりするのです。

　getElementsByTagNameメソッドを含め、これから解説していくDOMメソッドやプロパティは、JavaScript言語で規定されたものではありません。例えば、getElementsByTagNameメソッドは、JavaScript関数ではありません。JavaScriptという言語で規定されたオブジェクトという枠組みに、DOMの仕様を当てはめたものと考えてください。DOMの仕様に沿うよう、ブラウザが要素ノードオブジェクトを作り出しているのです。そして私たちは、ブラウザがDOMの仕様通りに作り出したオブジェクトを取り出し、それに割り当てられたメソッドやプロパティを使うのです。

　ノードオブジェクトは、目に見えるものではなく概念的でわかりにくいでしょうが、しっかりと理解してください。

要素ノードオブジェクトの使い方

　　　　　　 1|2|3 次のページへ

SpecialPR