ノードを取得する - JavaScript Ajax プログラミング

PROGRAM

JavaScript の DOM (Document Object Model) を利用して、HTML や XML のタグ名や ID 名から、それを示すノードを取得することができます。

たとえば、Web ページを構成する HTML データのノード document から、そこに含まれる id="the_node" を持つタグを取得したい場合には、次のようにします。

pNode.= document.getElementById('the_node');

このようにすることで、id="the_node" が設定されているタグをノードとして取得することができました。

タグ名からノードを取得したい場合、例えば <div> タグを取得したい場合は、次のようになります。

pNodes.= document.getElementsByTagName('div');

注意点としては、タグ名の場合は同じタグ名が複数存在する場合があるので、ノードも存在する数だけ配列で取得されます。取得で使用する関数名も getElements... というように、Element が複数形になっているところにも注意です。

取得したノードは、次のようにして要素を順次処理することができます。

// div タグを検出します。

pNodes = document.getElementsByTagName('div');

// 取得できたノードの数だけ、繰り返し処理を行います。

for (var i =0; i < pNodes.length; i++)

{

// ここで、タグ毎の処理を行います。

}

pNodes.length が 0 であれば、指定したタグが見つからなかったということになります。

なお、取得したタグの中から、さらにそれが持つタグや ID を検出することも可能です。

例えば pNode に取得したタグの中から、その入れ子となっている a タグを取得するような場合は、次のような感じで取得します。

pTagA = pNode->getElementsByTagName('a');

このほかにも、タグの "class" 属性に設定された名前を使って取得する方法もあるようでしたが、ブラウザーによっては動かないこともありそうだったので、そちらはクラス名からノードを取得するの方で改めて記してみたいと思います。