要素を取得するJavaScriptメソッド

要素を取得する Javascript メソッド: 1. getElementById を通じて id 属性を持つノード オブジェクトを取得します; 2. getElementsByTagName を通じてオブジェクト配列を取得します; 3. getElementsByClassName を通じて指定されたクラス名の要素を取得します。

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

要素を取得するには、要素 ID を使用する、タグ名を使用する、クラス名を使用するという 3 つの一般的な方法があります。

getElementById

DOM には、id 属性に対応するノード オブジェクトを返す getElementById というメソッドが用意されています。使用する際は大文字と小文字の区別に注意してください。

これはドキュメント オブジェクト固有の関数であり、このメソッドはドキュメント オブジェクトを通じてのみ呼び出すことができます。使用されるメソッドは次のとおりです:

コードは次のとおりです:

document.getElementById('demo') //demo是元素对应的ID

このメソッドは、IE6 を含む主流のブラウザと互換性があり、大胆に使用できます。

getElementsByTagName

このメソッドはオブジェクトの配列を返します (正確には HTMLCollection コレクションですが、本当の意味での配列ではありません)。各オブジェクトはオブジェクトに対応します。ドキュメント内の指定されたタグを持つ要素。 getElementById と同様に、このメソッドはパラメーターを 1 つだけ提供し、そのパラメーターは指定されたタグの名前です。サンプル コードは次のとおりです:

コードは次のとおりです:

document.getElementsByTagname('li')  //li是标签的名字

このメソッドは、ドキュメント オブジェクトによって呼び出されるほかに、通常の要素からも呼び出すことができることに注意してください。例は次のとおりです。

コードは次のとおりです。

var demo = document.getElementById('demo');
var lis = demo.getElementsByTagname('li');

同様に、このメソッドは、IE6 を含む主流のブラウザと互換性があり、大胆に使用できます。

getElementsByClassName

DOM には、タグを指定して要素を取得するだけでなく、指定したクラス名の要素を取得する getElementsByClassName メソッドも用意されています。ただし、この方法は比較的新しいため、IE6 などの古いブラウザではまだサポートされていません。ただし、ハックを使用して古いブラウザの欠点を補うことはできます。このメソッドを呼び出す方法は次のとおりです:

コードは次のとおりです:

document.getElementsByClassName('demo')    //demo为元素指定的class名

getElementsByTagname と同様に、このメソッドはドキュメント オブジェクトによって呼び出されるほかに、次のこともできます。通常の要素によって呼び出されます。

IE6 や 7 などの古いブラウザの場合、次のハック方法で実装できます:

コードは次のとおりです:

function getElementsByClassName(node,classname){
        if(node.getElementsByClassName) {
            return node.getElementsByClassName(classname);
        }else {
            var results = [];
            var elems = node.getElementsByTagName("*");
            for(var i = 0; i < elems.length; i++){
                if(elems[i].className.indexOf(classname) != -1){
                    results[results.length] = elems[i];
                }
            }
            return results;
        }
    }

Extension

上記の要素選択メソッドだけでなく、JQuery などのセレクターを介して要素を取得したい場合は、実装方法は上記の getElementsByClassName と同様です。興味がある場合は、セレクターのセットを自分で実装できます。ただし、上記の 3 つの方法とイベントバブリングを組み合わせるだけでも十分だと思いますし、結局のところ、この 3 つの方法はパフォーマンスの点で優れていると考えられます。

推奨学習: 「JavaScript 上級チュートリアル #」

以上が要素を取得するJavaScriptメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。