getElementById：mx-Lab：SSブログ

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

JavaScrip のクラスの多重継承（..｜getElementsByTagName ブログトップ

getElementById　[JavaScript] [編集]

◆document.getElementById メソッド

element = document.getElementById(id)

指定された DOM(Document Object Model) 形式のドキュメント document から、id プロパティが引数（文字列）id であるエレメントに対する Element クラス（またはそのサブクラス）のインスタンス参照 element を返します。

該当するエレメントが存在しない場合、null を返します。

HTML では、その document 内にある複数のエレメントが、それぞれ個別に持つ id プロパティは、必ずユニーク（＝一意、つまり同じ値を持つ複数の要素の共存は許されない、という意味）でなければならないので、id が決まると、特定できるエレメントは、必ずひとつか、もしくは存在しません（該当する id プロパティを持つエレメントがない場合）。

なので、document.getElementById が返してくるエレメントのインスタンス参照は、必ずひとつか、存在しない場合は null か、このいずれかになります。

最近の JavaScript では、なんつったって、こいつがいないと、困っちゃいますね。

幸いなことに、こいつにブラウザ依存の異なる挙動はないようです。

あんしん、あんしん。

戻ってくるインスタンスのクラスは、しらみつぶしに調べたわけではないんですが、素直に Element クラスのインスタンスが返ってくることはないじゃないかなーと思ってます。

例えば、input タグを探しに行くと、たいていどのブラウザでも object HTMLInputElement を返してきますし。

全部調べてはいないので、「たぶん」と言わざるを得ませんが、「たぶん」それぞれのエレメントに適した Element サブクラスがあって、document.getElementById は、それらの Element サブクラスインスタンスを返してくるんじゃないかと思います。

例えば、Button と Select が同じクラスで賄えるという状況は、ちょっと考えづらいですからねｗ。

･･････「W3C のページ見ろ」って？？？

だって、ブラウザによって動きが違うんだもん、基準見たってしょうがないじゃん；；；。

と、いうわけで。

今回のサンプルソースは、「ブラウザごとのイベント発生要素取得の違いを吸収する」のエントリーのものを、そのまま流用させて頂きます。

ただ、前回とは異なり、今回は document.getElementById 関連のソースを、赤字にしておきました。

<!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>getTarget</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;

        // イベント発生元の要素を取得する getTarget
        function getTarget() { return this.srcElement || this.target; }
        Event.prototype.getTarget = getTarget;

        // ボタンのクリック
        function onButtonClick(evt) {
            document.getElementById('Text1').value = evt.srcElement;
            document.getElementById('Text2').value = evt.target;
            document.getElementById('Text3').value = evt.getTarget();
        }

        // ウィンドウロードでボタンクリックイベントを追加
        addEvent('load',
            function (evt) {
                var elm = document.getElementById('Button1');
                elm.addEvent('click', onButtonClick, false);
                document.getElementById('Text4').value = evt.srcElement;
                document.getElementById('Text5').value = evt.target;
                document.getElementById('Text6').value = evt.getTarget();
            },
            true
        );

        //]]
    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" /><br/>
    <input id="Text1" type="text" /><span>srcElement</span><br/>
    <input id="Text2" type="text" /><span>target</span><br />
    <input id="Text3" type="text" /><span>getTarget</span><br />
    <input id="Text4" type="text" /><span>srcElement(window)</span><br/>
    <input id="Text5" type="text" /><span>target(window)</span><br />
    <input id="Text6" type="text" /><span>getTarget(window)</span><br />
</body>
</html>