getElementsByTagName [JavaScript]
◆document.getElementsByTagName メソッド
collection = document.getElementsByTagName(tagname);
nodelist = document.getElementsByTagName(tagname);
指定された DOM(Document Object Model) 形式のドキュメント document から、tagName プロパティが引数（文字列）tagname であるエレメントに対する、Element クラス（またはそのサブクラス）のコレクション collection、またはノードリスト nodelist を返します。
タグ名ですから、getElementsByTagName('a'); とか、getElementsByTagName('body'); なんてこともできちゃいます。
該当するインスタンスが存在しない場合、null ではなく、空のコレクション collection、または空のノードリスト nodelist を返します。
HTML では、ボタンやテキストボックスといったコントロールは、その種類のエレメントごとに「HTML タグ」が決められており、同一のタグを持つコントロールは、ひとつの document 内に複数存在する可能性があります。
従って、document.getElementsByTagName(tagname) メソッドは、指定されたタグ名のコントロール群を、一度に返せるような戻り値を返します。
だから、ユニークな id プロパティでエレメントを探すメソッドが geｔElementById（単数形）なのに対して、tagName プロパティで探すこのメソッドの名前は geｔElementsByTagName（複数形）なんですね。
こいつは Ajax などで、かなりいい加減にサーバーから送信した XML でも、XMLHttpObject オブジェクト インスタンスの responseXML プロパティで受け取った DOM オブジェエクトを、きちんとフィールドごとの Element としてピックアップしてくれるので、かなり重宝します。
問題の戻り値のインスタンスなんですが、ブラウザ依存です（また出たよ･･････）。
Internet Explorer 8、Firefox 3.6.13 では、戻り値が HTMLCollection というオブジェクト インスタンスで返ってきます。
一方、Opera 11.00、Safari 5.0.3、Google Chrome 8.0.552.224 では、戻り値が NodeList というオブジェクト インスタンスで返ってきます。
HTMLCollection も NodeList もいずれエントリーにしますが、あんまり便利な代物じゃありません。
HTMLCollection と NodeList、いままで使ってきたところでは、メンバにもあまり差はないようです。
コレクションまたはリスト内の要素の数を取得するには collection.length または nodelist.length プロパティを使います。
ここで、該当する tagName プロパティを持つエレメントが見つからなかった場合は、collection.length または nodelist.length プロパティにゼロが入っています。
エレメントが見つからない場合でも、getElementsByTagName メソッド自体は null などを返さずに、この length プロパティがゼロの空の collection または nodelist を返すので、ご注意ください。
また、これらのオブジェクトは配列感覚で使え、コレクションまたはリスト内の要素が持つ Element（またはそのサブクラス）インスタンス参照を取得するには、例によって collection[index] または nodelist[index] を使います。
しかし、ブラウザ依存で何が起きるかわからないのが JavaScript ですからねえ～･･････。
ああ、怖い怖い。
というわけで。
今回のサンプル ソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>document.getElementsByTagName</title>
<script type='text/javascript'>
//<![CDATA[
// 環境エラー
function errorEnvironment() {
alert('ご使用の環境では、このスクリプトはご使用できません。');
}
// イベントを追加する addEvent
function addEvent(evt, func, cap) {
if (this.addEventListener)
this.addEventListener(evt, func, cap);
else if (this.attachEvent)
this.attachEvent('on' + evt, func);
else
errorEnvironment();
}
Object.prototype.addEvent = addEvent;
HTMLDocument.prototype.addEvent = addEvent;
Element.prototype.addEvent = addEvent;
// ウィンドウ ロード イベント onWindowLoad
function onWindowLoad(evt) {
// body タグを探す
alert(document.getElementsByTagName('body'));
// 結果：-> ie,ff:HTMLCollection op,sa,gc:NodeList
// body タグを探す
alert(document.getElementsByTagName('body')[0]);
// 結果：-> HTMLBodyElement
// input タグを探す
alert(document.getElementsByTagName('input').length);
// 結果：-> 2（ふたつ見つかる）
// input タグの１つめの id プロパティ
alert(document.getElementsByTagName('input')[0].id);
// 結果：-> 'id_btn1'
// input タグの２つめの name プロパティ
alert(document.getElementsByTagName('input')[1].name);
// 結果：-> 'name_btn2'
// 存在しない select タグを探す
alert(document.getElementsByTagName('select'));
// 結果：-> ie,ff:HTMLCollection op,sa,gc:NodeList
// 存在しない select タグを探す
alert(document.getElementsByTagName('select').length);
// 結果：-> 0（見つからない）
}
// 唯一の初期化処理
window.addEvent('load', onWindowLoad, true);
//]]
</script>
</head>
<body>
<input type='button' id='id_btn1' name='name_btn1' text='Button1' />
<input type='button' id='id_btn2' name='name_btn2' text='Button2' />
</body>
</html>
document.getElement 系には、いろいろと他のタイプのメソッドもあるので、おいおい掲載していきます。
みみちゃん さん
-
nice! 116
記事 47
テーマ パソコン・インターネット
プロフィール
ブログを紹介する
とりあえず、バックレて、中抜けでブログTopにきましたｗ
先生、上述を「英語」的に読んで解釈しようとしちゃうんですけど。。。かつての純マシン語と比べると、英語が分かる自身はアドバンテージになるかもしれない
ダブルバイトは不要だけど、シングルバイトのアルファ・ニューメリックなら雰囲気は感じられてきてる
昔取った、なんぞやらが、モチベUp ↑ してるよ
でも、あんま、コン詰めすぎないようにね、って、言っても、貴殿には無意味だね、（ネガじゃないよ）、It would be better for you to go @ your ペース。。。肯定も否定もありません、as you likeというと、投げやりに解釈されるかもしれないけど、マインドは、どうぞ貴殿のぺーすでという尊敬のネンだよｗｗｗ
うん、読み応えありすぎるから、中抜けしたブンは、自己的に冬休みに補習しときます
カリスマ、Coding-guy、仕様の軸がブレナイーGuy ｗｗｗ
by One-for-you (2010-12-28 01:31)
↑ この二人を見てるとなんだか似てるんだよね。
二人とも がんばり過ぎないでね。
私専門外だから でも文字はしっかり追ってる・・・わからないけどね。
by ゆうみ (2010-12-28 14:07)
どうもありがとうございます。
そうなんだ･･････ofy さんと俺は似てるのか；；；。
いつか OFF したいですねｗｗｗ。
お気遣い、本当にありがとうございます。
マイペースでやっていきます。
いま公開を待ってる「下書き」の記事を数えたんですが、まだ８個ありました。
この状態で「冬休み」突入。
あんしん、あんしん♪
by みみちゃん (2010-12-28 15:57)