堀北真希うさぎ
主な作品
制作者作成のイラストと動画(サンプル)

ページ案内▼

getElementsByTagName()メソッド。

DOMに於いて、指定された要素名の下位要素の配列を与えるgetElementsByTagName()メソッドの解説です。

getElementsByTagName()メソッド・目次。

getElementsByTagName()メソッドとは。

getElementsByTagName()メソッドとは、指定された要素名の子孫要素の配列を与えるメソッドです。

但し、直下の子要素のみならず、孫以下の下位要素も集めてきますので注意してください(後述)。

getElementsByTagName()メソッドを実装するインタフェイス。

getElementsByTagName()メソッドは

に依って実装されます。

従って、文書ノードまたは要素ノードに対してのみgetElementsByTagName()メソッドを用いる事が出来ます。

getElementsByTagName()メソッドの引数と返し値。

getElementsByTagName()メソッドは以下の一つの引数を取ります。

  1. 要素名…XML文書の文書ノード上では大文字小文字を区別しますが、在来HTML文書の文書ノードでは大文字小文字が区別されません。また、*を指定した場合は、全ての要素となります。

getElementsByTagName()メソッドの返し値は、該当する要素ノードが文書内に於ける順番に従って並べられたノードの配列です。

getElementsByTagName()メソッドのJAVAスクリプトでの使用例。

ある要素ノード e 内に於いて、href属性値が http:// で始まる全ての<a>要素の末尾に、<img>要素ノード im を追加する例です。

im=document.createElement('img');
im.setAttribute('src', '/image/icons/extenalSite.GIF');
im.setAttribute('alt', '(※外部サイト)');
im.setAttribute('width', '16');
im.setAttribute('heigth', '16');

var e1=e.getElementsByTagName('a');
var i=e1.length;
while (--i>=0) {
    if (e1[i].getAttribute('href').indexOf('http://')!=0) continue;
    e1[i].appendChild(im.cloneNode(true));
    }

getElementsByTagName()メソッドに於ける注意事項。

getElementsByTagName()メソッドで与えられるのは子孫要素です。

つまり、「直下の○○要素だけ抽出したい」と言う場合には使えません。

このような場合には、childNodesプロパティで直下のノードを集めて、nodeTypeプロパティとnodeNameプロパティまたはtagNameプロパティを用いて一つずつ希望の要素名のものだけを抽出するようにします。

関連事項

文書ノードとDocumentインタフェイス
文書ノードと文書ノードに実装されているDocumentインタフェイスについて
要素ノードとElementインタフェイス
要素ノードと要素ノードに実装されているElementインタフェイスについて
nodeTypeプロパティ
当該ノードの種類
nodeNameプロパティ
当該ノードに付けられた"名称"
tagNameプロパティ
要素ノードの要素名
childNodesプロパティ
当該ノードの子ノードの配列
insertBefore()メソッド
指定された子ノードの直前に別のノードを挿入するメソッド
replaceChild()メソッド
指定された子ノードを別のノードに置換えるメソッド
removeChild()メソッド
指定された子ノードを除去するメソッド
appendChild()メソッド
指定されたノードを子ノードとして末尾に追加するメソッド

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com