JS GET HTML DOM要素法

JSの要素を取得するための多くの方法がありますが、実際に応じて適切な方法を選択することができます

A、JS取得要素法

　　　　 1 ）ラベル要素がIDを取得
             するvar DIV1 =のdocument.getElementById（ "DIV1を" ）;

         2 ）タグ名によりタグリストを取得
                するvarのdiv = document.getElementsByTagName（ "DIV" ）
        
        。3 ）タグリストは、クラス名を取得
             するvar DIV0 =ドキュメント。 getElementsByClassName（ "DIV0" ）; 
        はconsole.log（DIV0）

         4 ）idはgetElementByIdを呼び出す文書化する必要があり得る
             VAR歌姫=のdocument.getElementById（ "歌姫" ）;
             VAR DIV1 = diva.getElementById（ "DIV1"）// エラーの書き込みを、
             
        5すべてのHTMLCollection HTML、getElementByTagNamesが文書を処理するため、この方法を使用することができ、それはとも呼ばれる場合要素を使用し、要素を呼び出すために使用することができ、現在のラベルのこの要素の子要素を参照するのリストを取得するには）次の二つの方法のdivの名前で
           、VAR =のdocument.getElementByIdディーバ（ "歌姫" ）;
           VARのdiv = diva.getElementsByTagName（ "DIV" ）;
           VARのdiv = document.getElementsByTagName（ "DIV"）; // このマルチ上記以外
          にconsole.log（のdiv）

         6。 ）であってもよいです取得された素子によれば、すべての要素のDIV0のクラスの子要素である文書全体がdocument.getElementsByClassNameクラスを取得する場合に使用することができるDIV0ある
             VAR歌姫=のdocument.getElementById（「歌姫」）;
             VAR DIV0 = diva.getElementsByClassName（「DIV0」）; 
            にconsole.log（DIV0）

        。7）のNodeListノードリストによれば、ノード名のリストを取得し、getElementByNameは親要素によって取得されていない
             VARをForm1 =のdocument.getElementById（ "Form1の" ）;
             VARのセックス= document.getElementsByName（ "セックス" ）; 
            はconsole.log（セックス）

以下の方法は、以下のIE8に適しています

        8）を求める第1のセレクタの要素に応じて得られた
             VAR）DIV = document.querySelector（ "DIV"; //は、セレクタのすべてのDIVを取得
            するvar DIV1 = document.querySelector（ "＃1 DIV1" ）;
             VARの DIV0 document.querySelector =（ "DIV0。" ）;
             VAR DIV0 = document.querySelector（ "＃歌姫> .div0" ）;
             VAR PS = document.querySelector（ "[名=パスワード]" ）
            はconsole.log（PS）

第二に、取得サブ要素と子ノード

      9）サブノードおよび子要素
         VAR歌姫= document.querySelector（ "＃歌姫" ）; 
        はconsole.log（diva.childNodes）; // 子ノードテキストノード、コメントノード、等を含む、のNodeListで 
        はconsole.log（DIVAを。子供）; // サブ要素は、要素のみを含む、HTMLCollectionある
 
      10 ）との親要素の親ノード
        はconsole.log（diva.parentNodeを）; // ノードの親 
        にconsole.log（diva.parentElement）// 親要素
     
      11 ）第一子ノードとの最初の子要素
        にconsole.log（diva.firstChild）; // ノードの最初の子 
        にconsole.log（diva.firstElementChild）; // 最初の子
 
      12がある）と子の最後に最後の子要素
        console.log（diva.lastChild）; //最後の子 
        にconsole.log（diva.lastElementChild）; // 最後の子要素
 
      13 ）次の兄弟ノードと次の兄弟
        にconsole.log（diva.nextSibling）; // 次の兄弟ノード 
        はconsole.log（歌姫）.nextElementSibling; // 次の兄弟要素
 
      14 ）上の兄弟上の兄弟ノード
        にconsole.log（diva.previousSibling）; // 兄弟 
        はconsole.log（diva.previousElementSiblingを）; // 前の兄弟要素

おすすめ