更新する要素をどのように取得するかが最初に解決すべき問題です。幸いなことに、JavaScript を使用してノードを取得する方法は数多くあります。簡単にまとめます (以下の方法は IE7 および Firefox2.0.0.11 でテストされています):
1. 最上位のドキュメント ノードから取得します。 :
(1) document.getElementById(elementId): このメソッドは、ノードの ID を通じて必要な要素を正確に取得できます。これは比較です。簡単で迅速な方法です。ページに同じ ID を持つ複数のノードが含まれている場合は、最初のノードのみが返されます。
現在、プロトタイプや Mootools など、より単純なメソッド $(id) を提供する JavaScript ライブラリが多数あり、パラメーターは依然としてノードの ID です。このメソッドは document.getElementById() の別の記述方法と見なすこともできますが、$() の方がより強力です。具体的な使用方法については、それぞれの API ドキュメントを参照してください。
(2) document.getElementsByName(elementName): このメソッドは、名前からわかるように、ノードの名前を通じてノードを取得します。 、このメソッドが返すのはノード要素ではなく、同じ名前を持つノードの配列です。次に、ノードの特定の属性をループして、それが必要なノードであるかどうかを判断します。
例: HTML では、チェックボックスとラジオはどちらも同じ name 属性値を使用して、グループ内の要素を識別します。選択した要素を今すぐ取得したい場合は、まずシャッフルされた要素を取得し、次にループしてノードのチェックされた属性値が true かどうかを判断します。
(3) document.getElementsByTagName(tagName): このメソッドは、ノードのタグを通じてノードを取得します (例: document)。 getElementsByTagName('A') は、ページ上のすべてのハイパーリンク ノードを返します。ノードを取得する前に、ノードのタイプは一般にわかっているため、この方法を使用するのは比較的簡単です。しかし、欠点も明らかです。それは、返される配列が非常に大きくなる可能性があり、多くの時間を無駄にすることです。では、この方法は無駄なのでしょうか?もちろん、この方法は上記の 2 つとは異なります。これはドキュメント ノード独自の方法ではなく、後述する他のノードにも適用できます。
2. 親ノードを通過します:
(1) parentObj.firstChild: ノードが既知のノードの最初の場合 ( parentObj) このメソッドは子ノードに使用できます。この属性は再帰的に使用できます。つまり、parentObj.firstChild.firstChild.firstChild... の形式をサポートしているため、より深いノードを取得できます。
(2) parentObj.lastChild: 明らかに、この属性は既知のノード (parentObj) の最後の子ノードを取得するためのものです。 firstChild と同様に、再帰的に使用することもできます。
使用時に、この 2 つを組み合わせると、より刺激的な効果が得られます。つまり、parentObj.firstChild.lastChild.lastChild...
(3) parentObj.childNodes : 既知のノードの子ノード配列を取得し、ループまたはインデックス作成を通じて必要なノードを見つけます。
ノードの子ノード。 (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 ライブラリを使用する場合は、ノードのクラスを介して取得するなど、他の異なるメソッドも取得できます。しかし、上記の様々な方法を柔軟に使いこなすことができれば、ほとんどのプログラムには対応できると思います