JavaScriptでDOM要素を取得する方法

取得方法: 1. ID 値から「document.getElementById(value)」を取得; 2. name 属性から「document.getElementsByName(value)」を取得; 3. 「親ノードのオブジェクト。 firstChild」は親ノードの取得などで取得されます。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

HTML DOM ノード要素を取得するための JavaScript メソッドの概要

Web アプリケーション、特に Web2.0 プログラムの開発では、多くの場合、ページ内の要素を取得し、要素のスタイル、コンテンツなどを更新するために必要です。更新する要素をどのように取得するかが最初に解決すべき問題です。幸いなことに、JavaScript を使用してノードを取得する方法は数多くあります。簡単にまとめます (次の方法は IE7 および Firefox2.0.0.11 でテストされました):

1. トップレベルのドキュメントを通じてノードの取得

(1) document.getElementById(elementId): このメソッドは、ノードの ID を通じて必要な要素を正確に取得でき、比較的単純で高速なメソッドです。 。ページに同じ ID を持つ複数のノードが含まれている場合は、最初のノードのみが返されます。

現在、プロトタイプや Mootools などの多くの JavaScript ライブラリが登場していますが、これらはより単純なメソッド $(id) を提供しており、パラメーターは依然としてノードの ID です。このメソッドは document.getElementById() の別の書き方とも言えますが、$() の機能の方が強力なので、具体的な使用方法については、それぞれの API ドキュメントを参照してください。

(2)document.getElementsByName(elementName): このメソッドは、ノードの名前を通じてノードを取得します。名前からわかるように、このメソッドはノード要素を返しません。ですが、ノード要素です。同じ名前を持つノードの配列です。次に、ノードの特定の属性をループして、それが必要なノードであるかどうかを判断します。

例: HTML では、チェックボックスとラジオは同じ name 属性値を使用してグループ内の要素を識別します。選択した要素を今すぐ取得したい場合は、まずシャッフルされた要素を取得し、次にループしてノードのチェックされた属性値が true かどうかを判断します。

(3)document.getElementsByTagName(tagName): このメソッドは、タグを通じてノードを取得します。このメソッドは、配列も返します。例: document.getElementsByTagName('A') Allページ上のハイパーリンク ノードが返されます。ノードを取得する前に、ノードのタイプは一般にわかっているため、この方法を使用するのは比較的簡単です。しかし、欠点も明らかです。それは、返される配列が非常に大きくなる可能性があり、多くの時間を無駄にすることです。では、この方法は無駄なのでしょうか？このメソッドは上記の 2 つとは異なり、ドキュメント ノード独自のメソッドではなく、後述する他のノードにも適用できます。

2. 親ノード経由で

を取得します (1) parentObj.firstChild: ノードが既知のノード (parentObj) の最初である場合) このメソッドは子ノードに使用できます。この属性は再帰的に使用できます。つまり、parentObj.firstChild.firstChild.firstChild... の形式をサポートしているため、より深いノードを取得できます。

(2)parentObj.lastChild: 明らかに、この属性は既知のノード (parentObj) の最後の子ノードを取得するためのものです。 firstChild と同様に、再帰的に使用することもできます。
使用時に、この 2 つを組み合わせると、より刺激的な効果が得られます。つまり、parentObj.firstChild.lastChild.lastChild...

(3)parentObj.childNodes : 既知のノードの子ノード配列を取得し、ループまたはインデックス作成を通じて必要なノードを見つけます。

注: テストの結果、IE7 では直接の子ノードの配列が取得されるのに対し、Firefox2.0.0.11 では、次の子ノードを含むすべての子ノードが取得されることがわかりました。子ノード。

(4)parentObj.children: 既知のノードの直接の子ノード配列を取得します。

注: テスト後、IE7 では効果は childNodes と同じですが、Firefox2.0.0.11 ではサポートされていません。これが、私が他の方法とは異なるスタイルを使用する理由です。したがって、その使用はお勧めできません。

(5)parentObj.getElementsByTagName(tagName): 使用方法は詳しく説明しませんが、既知のすべての子ノードの中から指定された値の子ノードの配列を返します。ノード。例:parentObj.getElementsByTagName('A') は、既知の子ノード内のすべてのハイパーリンクを返します。

3. 隣接ノードから

を取得 (1) neighbourNode.previousSibling: 既知のノード (neighbourNode) の前のノードを取得します。先ほどのfirstChild、lastChildプロパティと同様に再帰的に利用できるようです。

(2)neighbourNode.nextSibling: 既知のノード (neighbourNode) の次のノードを取得します。再帰もサポートされています。

4. 子ノードから

を取得する (1) childNode.parentNode: 既知のノードの親ノードを取得します。

上記のメソッドは基本的なメソッドの一部であり、Prototype などの JavaScript ライブラリを使用する場合は、ノードのクラスから取得するなど、他のメソッドも取得できる場合があります。しかし、上記の方法を柔軟に使い分けることができれば、ほとんどのプログラムには対応できると思います。

[推奨学習: JavaScript 上級チュートリアル]

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