セレクタのDOM要素セレクタ

DOMセレクタ要素

　　1、セレクタ要素ノード; 2、他のノードセレクタDOM要素セレクタでは、2つのカテゴリに分けることができます。JSページでの動作を実現するために、セレクタで選択されたHTML要素を操作するには。

　　まず、ノードセレクタ要素

　　1.IDセレクター：のdocument.getElementById（）

　　名前の選択によって、IDタグは、単一の値、HTML内で一意のIDを返します。

　　2.classセレクター：document.getElementsByClassName（）

VAR aEle = document.getElementsByClassName（「MyClassのは」）は、すべてのクラスのMyClassの名前のドキュメント要素を選択し、//配列を返します。

　　我々は、単一の操作が必要な場合、クラス名タグの選択及び配列の復帰により、操作は、単一の配列要素を選択するために利用することができる;配列であるとして、IDセレクタは異なることに留意すべきです要素はそう、Sがあることに注意され、キーワードがあるのでES6クラスは、ここでは重複を避けるために、クラス名です。

　　3.タグセレクタ：document.getElementsByTagName（）

　　タグ名により選択し、以下のドキュメント内のすべてのspanタグを選択します。

VaRのaspan = document.getElementsByTagName（ "スパン"）タグは、配列を返すすべてのDOMドキュメントを選択し、<スパン> </ span>を//。

　　4.nameの选の器：document.getElementsByName（）

　　構文は次のとおりです。

VaRのAUSER = document.getElementsByName（ "ユーザー"）;

　　一般的にname属性を含むラベルを形成するために使用する名前を選択し、同様に、配列を返します。

　　5.高度なセレクタ：ES5新しいセレクタ

　　querySelectorAll和querySelector（）（）

　　①querySelector（）は、単一のオブジェクトを返します

　　構文は次のとおりです。

VaRのELE = document.querySelector（ "＃ボックス"）; 
VAR ele1 = document.querySelector（ "クラス"）; 
VAR ele2 = document.querySelector（ "スパン"）; 
VaRのele3 = document.querySelector（」MSG H2" 。）; 
VAR ele4 = document.querySelector（」。MSG> H2" ）;

　　私たちは、あなたの想像を超えて、上記のコードから強力にこのセレクタを参照してください、とさえCSSのすべてのセレクタをサポートすることができます。

　　②querySelectorAll（）は、オブジェクトの配列を返します

　　querySelector付き構文（）;

　　6.関係セレクタ

　　I三つのカテゴリーによ関係セレクター：①父②選択したサブサブメニューの父③ブラザー

　　①父の選挙息子

document.querySelector OMSG = VAR（ "MSG。"）; 
     omsg.children //すべてのサブ要素; 
     omsg.firstElementChild //最初のサブ要素; 
     omsg.lastElementChild //最後の子要素。

　　②選挙親子

document.querySelector ASpanは、VAR（ "スパン"）=; 
        span.parentNode; //選択された親要素のスパン。

　　③兄弟セレクタ

document.querySelector ASpanは、VAR（「スパン」）=; 
        aspan.previousElementSibling兄弟に//選択されたスパン
        aspan.nextElementSibling //は兄弟の次のスパンを選択します

ヒント：アレイを戻すために上記セレクタを使用して、アレイは、擬似配列であり、単一の要素上で動作するために必要な場合、アレイインデックスを付けることができ、トラバーサルは、アレイが非実用的ことに留意すべきです方法！

セレクタのDOM要素セレクタ

おすすめ