目次

1.DOMについて知っておくべき

2.DOMノード

3.DOMクエリ

4.DOMクエリ操作一覧表(理論表現の代わりに実例)

4.1.h 2ラベル要素

を取得

4.2.すべてのh 2ラベル要素

を取得

4.3.すべてのname=genderのラベル

を取得

4.4.クエリ#osの下のすべてのinputノード

4.5.クエリ#osの下にあるすべてのサブノード

4.6.クエリ#osの下の第1のサブノード

4.7.戻り#bjの親ノード

4.8.戻る#androidの前の兄弟ノード

4.9.#androidのvalue値

を返します.

4.10.#androidのvalue値

を設定

4.11.戻り#bjのテキスト値

5.プログラム展示

5.1.Javascript部

5.2.HTML部

1.DOMについて知っておくべきこと
document object modelファイルオブジェクトモデル
htmlドキュメントへのアクセスと処理の標準的な方法を定義します.
Htmlドキュメントのすべての内容はノードです.

文書全体が文書ノード

である.

各html要素は要素ノード

である.

html要素内のテキストはテキストノード

である.

各html属性は属性ノード

である.

注釈は注釈ノード

である.
2.DOMノード
ノードはHTMLドキュメントの最も基本的なユニットを構成します.
分類:

ドキュメントノードDocument htmlドキュメント全体

要素ノードElement htmlタグ

テキストノードText htmlタグのテキスト内容

属性ノードAttribute要素属性

3.DOMクエリー

要素Idクエリ:document.getElementById(「id値」);

ラベル名に基づいてクエリー:document.getElementsByTagName(「ラベル名」);

name属性:document.getElementByName(「name値」);

4.DOMクエリー操作一覧表(理論表現の代わりに実例)
4.1.h 2ラベル要素を取得

var btn01 = document.getElementById("btn_1");
btn01.onclick = function(){
    var h2 = document.getElementById("h2");
    alert(h2.innerText);
}

4.2.すべてのh 2ラベル要素を取得

var btn02 = document.getElementById("btn_2");
btn02.onclick = function(){
    var input = document.getElementsByTagName("h5");
    alert(input.length);
}

4.3.すべてのname=genderのラベルを取得

var btn03 = document.getElementById("btn_3");
btn03.onclick = function(){
    var namegender = document.getElementsByName("gender");
    for(var i = 0;i

4.4.クエリ#osの下のすべてのinputノード

var btn04 = document.getElementById("btn_4");
btn04.onclick = function(){
    var os_input = document.getElementById("os");
    var input = os_input.getElementsByTagName("input");
    for(var i = 0;i

4.5.クエリ#osの下のすべてのサブノード

var btn05 = document.getElementById("btn_5");
btn05.onclick = function(){
    var os  = document.getElementById("os");
    var os_children = os.childNodes;
    //  ：ie  <=8，      3 ，>=9 ， 
    alert(os_children.length);
}

4.6.クエリー#osの最初のサブノード

var btn06 = document.getElementById("btn_6");
btn06.onclick = function()
{
    var osfirst = document.getElementById("os");
    var os_first_child = osfirst.firstChild;
    alert(os_first_child.value);
}

4.7.#bjの親ノードを返します

var btn07 = document.getElementById("btn_7");
btn07.onclick = function(){
    var os = document.getElementById("bj");
    var fatherN = os.parentNode;
    alert(fatherN);
}

4.8.#androidの前の兄弟ノードを返します

var btn08 = document.getElementById("btn_8");
btn08.onclick = function(){
    var android = document.getElementById("android");
    var upNode = android.previousSibling;
    alert(upNode.value);
}

4.9.#androidのvalue値を返します

var btn09 = document.getElementById("btn_9");
btn09.onclick =function(){
    var valuename = document.getElementById("android");
    alert(valuename.value);
}

4.10.#androidのvalue値の設定

var btn10 = document.getElementById("btn_10");
btn10.onclick = function(){
    var settext = document.getElementById("android");
    settext.value = "123";
    alert(settext.value);
}

4.11.#bjのテキスト値を返す

var btn11= document.getElementById("btn_11");
       btn11.onclick = function(){
           var showText = document.getElementById("sz");
           //       ：  alert(showText.innerHTML);
           //       ：   
/*
           ：
   1.           
   2.             parentEle.firstChild
   3.           parentEle.firstChild.nodeValue
*/
           var nodevalue = showText.firstChild.nodeValue;
           alert(nodevalue);

       }

一定の必要性があります.私は完全なコードをここに置きます.
5.プログラム展示
5.1.Javascriptセクション
このファイル名はdomです.js

window.onload = function(){
        var btn01 = document.getElementById("btn_1");
        btn01.onclick = function(){
            var h2 = document.getElementById("h2");
            alert(h2.innerText);
        }

        var btn02 = document.getElementById("btn_2");
        btn02.onclick = function(){
            var input = document.getElementsByTagName("h5");
            alert(input.length);
        }

        var btn03 = document.getElementById("btn_3");
        btn03.onclick = function(){
            var namegender = document.getElementsByName("gender");
            for(var i = 0;i=9 ， 
            alert(os_children.length);
        }

        var btn06 = document.getElementById("btn_6");
        btn06.onclick = function()
        {
            var osfirst = document.getElementById("os");
            var os_first_child = osfirst.firstChild;
            alert(os_first_child.value);
        }

        var btn07 = document.getElementById("btn_7");
        btn07.onclick = function(){
            var os = document.getElementById("bj");
            var fatherN = os.parentNode;
            alert(fatherN);
        }

        var btn08 = document.getElementById("btn_8");
        btn08.onclick = function(){
            var android = document.getElementById("android");
            var upNode = android.previousSibling;
            alert(upNode.value);
        }

        var btn09 = document.getElementById("btn_9");
        btn09.onclick =function(){
            var valuename = document.getElementById("android");
            alert(valuename.value);
        }
        var btn10 = document.getElementById("btn_10");
        btn10.onclick = function(){
            var settext = document.getElementById("android");
            settext.value = "123";
            alert(settext.value);
        }

        var btn11= document.getElementById("btn_11");
        btn11.onclick = function(){
            var showText = document.getElementById("sz");
            //       ：  alert(showText.innerHTML);
            //       ：   
   /*
              ：
      1.           
      2.             parentEle.firstChild
      3.           parentEle.firstChild.nodeValue
   */
            var nodevalue = showText.firstChild.nodeValue;
            alert(nodevalue);

        }

    }

}

5.2.HTMLセクション

   
       ？
   

      

         
         
         
         
      
      
         ？
      
       ！！！
      

         
         
         
         
      
      
         ？
      

         

      
      

   
                  ：   

                  ：
   
  ，  
   
  
  
   
   
   

   1.ById:         #h2


   2.ByTagName:      h5  


   3.ByName:         name=gender   

   

   4.  #os    input  


   5.  #os       


   6.  #os       


   

   7.  #bj    


   8.  #andriod       


   9.  #android value 


   10.  #android value 


   11.  #bj