getElementsByName：mx-Lab：SSブログ

	ブログをはじめるログイン

getElementsByName　[JavaScript] [編集]

◆document.getElementsByName メソッド

collection = document.getElementsByName(name);
nodelist = document.getElementsByName(name);

指定された DOM(Document Object Model) 形式のドキュメント document から、name プロパティが引数（文字列）name であるエレメントに対する Element クラス（またはそのサブクラス）のコレクション collection、またはノードリスト nodelist を返します。

該当するインスタンスが存在しない場合、null ではなく、空のコレクション collection、または空のノードリスト nodelist を返します。

HTML では、ボタンやテキストボックスといったコントロールは、そのエレメントごとに name プロパティで「名前」を付けることができますが、name プロパティはひとつのドキュメント内でユニークである必要はありません。ひとつのドキュメント内で、複数のエレメントで name プロパティが重複しても、大丈夫なわけです。

従って、document.getElementsByName(name) メソッドは、指定された name プロパティを持つコントロール群を、一度に返せるような戻り値を返します。

だから、ユニークな id プロパティでエレメントを探すメソッドが geｔElementById（単数形）なのに対して、name プロパティでエレメントを探すこのメソッドの名前は geｔElementsByName（複数形）なんですね。

問題の戻り値のインスタンスなんですが、ブラウザ依存です（またかよ･･････）。

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 プロパティを使います。

ここで、該当する name プロパティを持つエレメントが見つからなかった場合は、collection.length または nodelist.length プロパティにゼロが入っています。

エレメントが見つからない場合でも、getElementsByName メソッド自体は 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.getElementByName</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) {

            // 名前 name_input タグを探す
            alert(document.getElementsByName('input'));
            // 結果：-> ie,ff:HTMLCollection op,sa,gc:NodeList

            // 名前 name_input タグを探す
            alert(document.getElementsByName('name_input').length);
            // 結果：-> 2（２つ見つかる）

            // 名前 name_input １つめのエレメントの id プロパティ
            alert(document.getElementsByName('name_input')[0].id);
            // 結果：-> 'id_btn1'

            // 名前 name_input ２つめのエレメントの id プロパティ
            alert(document.getElementsByName('name_input')[1].id);
            // 結果：-> 'id_btn2'

            // 名前 name_radio タグを探す
            alert(document.getElementsByName('name_radio').length);
            // 結果：-> 3（３つ見つかる）

            // 存在しない 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_input" value="Button1" />
    <input type="button" id="id_btn2" name="name_input" value="Button2" />
    <br/>

    
    <input type="radio" id="id_radio1" name="name_radio" value="Radio Button 1" /><br/>
    <input type="radio" id="id_radio2" name="name_radio" value="Radio Button 2" /><br/>
    <input type="radio" id="id_radio3" name="name_radio" value="Radio Button 3" /><br/>
</body>
</html>