Webアプリケーション、特にWeb2.0プログラムの開発では、ページ内の要素を取得して、要素のスタイル、コンテンツなどを更新する必要があることがよくあります。要素を更新する方法は、解決する最初の問題です。 JavaScriptを使用してノードを取得するには多くの方法があることを嬉しく思います。簡単な要約を次に示します(次の方法はIE7およびFirefox 2.0.0.11でテストされました):
1.トップレベルのドキュメントノードを通過します。
(1)document.getElementByID(ElementID):この方法は、ノードIDを介して必要な要素を正確に取得できます。これは比較的シンプルで高速な方法です。ページに同じIDを持つ複数のノードが含まれている場合、最初のノードのみが返されます。
現在、プロトタイプやMootoolsなどの複数のJavaScriptライブラリが表示されており、これはより簡単な方法を提供します:$(ID)、パラメーターはまだノードのIDです。この方法は、と見なすことができます
document.getElementById()を書く別の方法ですが、$()の関数はより強力です。特定の使用については、それぞれのAPIドキュメントを参照してください。
(2)document.getElementsByname(elementName):このメソッドは、ノードの名前を介してノードを取得します。名前から、このメソッドはノード要素ではなく、同じ名前のノードの配列を返すことがわかります。次に、ノードの属性をループしてループを取得して、それが必要なノードであるかどうかを判断できます。
たとえば、HTMLでは、チェックボックスとラジオの両方が同じ名前属性値を使用して、グループ内の要素を識別します。選択した要素を今すぐ取得したい場合は、最初にシャッフル要素を取得し、次にループを取得して、ノードのチェックされた属性値が真であるかどうかを判断します。
(3)document.getElementsByTagname(Tagname):このメソッドは、ノードのタグを介してノードを取得し、メソッドも配列を返します。たとえば
document.getElementsByTagname( 'A')は、ページ上のすべてのハイパーリンクノードを返します。ノードを取得する前に、通常、ノードの種類を知っているため、この方法を使用することは比較的簡単です。しかし、欠点も明らかです。つまり、返された配列は非常に大きく、多くの時間を無駄にします。それで、この方法は役に立たないのですか?もちろん違います。この方法は、上記の2つとは異なります。ドキュメントノードの独自の方法ではありません。以下に説明するように、他のノードも適用できます。
2。親ノードを通過します:
(1)parentobj.firstchild:ノードが既知のノード(parentobj)の最初の子である場合、この方法を使用できます。このプロパティは再帰的に使用できます。つまり、サポートされています
darentobj.firstchild.firstchild.firstchild ...、より深いノードを取得できます。
(2)derperobj.lastchild:明らかに、このプロパティは既知のノード(parentobj)の最後の子ノードです。 FirstChildのように、再帰的に使用できます。
使用中に、2つを組み合わせると、よりエキサイティングな効果が得られます。
(3)parentobj.childnodes:既知のノードの子ノード配列を取得すると、ループまたはインデックスを介して必要なノードを見つけることができます。
注:テスト後、直接子ノードの配列はIE7で取得され、子ノードの配列はFirefox2.0.0.11で得られることがわかりました。
(4)Parentobj.Children:既知のノードの直接の子ノード配列を取得します。
注:テスト後、IE7では、効果はチャイルドノードと同じですが、Firefox 2.0.0.11はサポートしていません。これが、他の方法とは異なるスタイルを使用したい理由でもあります。したがって、使用することはお勧めしません。
(5)parentobj.getElementsByTagname(tagname):使用法は繰り返されず、既知のノードのすべての子ノードの間に指定された値を持つ既知のノードの子ノードの配列を返します。例えば:
parentobj.getElementsByTagname( 'a')既知の子ノードのすべてのハイパーリンクを返します。
3。隣接するノードを介して取得します。
(1)neightbornode.previoussibling:既知のノード(neighbournode)の前のノードを取得します。このプロパティは、前の人とラストチャイルドのように、再帰的に使用されているようです。
(2)neightbornode.nextsibling:再帰をサポートする既知のノード(neighbournode)の次のノードを取得します。
4。子ノードを介して取得:
(1)ChildNode.ParentNode:既知のノードの親ノードを取得します。
上記の方法は、いくつかの基本的な方法です。プロトタイプなどのJavaScriptライブラリを使用する場合、ノードを介したクラスの取得など、他の異なる方法を取得することもできます。ただし、上記の方法を柔軟に使用できる場合は、ほとんどの手順に対処できるはずだと思います。