DOMの勉強

14839 ワード

dom

今日はDOMを勉強しました.勉強はそんなに簡単ではないと思います.これはいい現象ではないです.自分の授業に頼るしかないです.ばらばらな知識点であり、具体的なタイプとその中の関連方法をまとめただけで、その使い方を詳しくまとめていません.時間が本を読む上に無駄になってしまいましたので、何も好きではないと思います.だからやはり私に方向を与えることができるjavascriptの本がほしいです.
一.Nodeタイプ

<body>
    <div id="outerdiv">    DIV313
        <div id="centerDiv">     DIV
            <div id="innerDiv">    div</div>
              div  
        </div>
                  
    </div>
     <script>
         var outchildnode = document.getElementById("outerdiv");//       div
         for (var i = 0; i < outchildnode.childNodes.length; i++) {
             alert(outchildnode.childNodes[i].nodeValue);       //               ，            null
         }

         alert(childnode.firstChild.nodeType);   //nodeType           ,1        ；2        ；3        
         alert(childnode.firstChild.nodeValue);         
         //  div      ，                、       ，           ， nodeVaule       
         alert(childnode.lastChild.nodeName);       //          ,nodeName        #text
     </script>
</body>

つまり、nodeタイプは、ここでは主にnodeTypeとnodeValue、nodeNameを例に挙げて説明していますが、実はこの3つの属性は覚えやすいように見えます.しかし、使うときは詳細に注意しなければなりません.nodevalueは親ノードの次のノードの値を遍歴しただけで、サブノードのサブノードとは関係がないなどです.この三つの属性を使うにはやはり注意深いのが必要です.
二.Dcumentタイプ

<body>
    <p>
        hello world p  1
    </p>
    <p>
        hello world p  2
    </p>
    <p id="p">Hello</p>
    <p>Tom</p>
    <p>Cruise</p>
    <input type="text" name="txtname" value="123 " />
    <input type="password" name="txtname" value="345" />
    <div class="div">
        Hello World div
    </div>
    <div class="div">
           Hello World div
    </div>
   <div>
          Hello World
   </div>
    <script>
        var p = document.getElementsByTagName("p");   //     getElementsByTagName            ，       p        
        alert(p.length);              //            p    
    </script>
        <script>
        var pname = document.getElementById("p");       //  id  html    
        alert(pname.innerHTML);        //          
    </script>
    <script>
        var classname = document.getElementsByName("txtname");
        for (var i = 0; i < classname.length; i++) {        //             
            alert(classname[i].value)         //   
        }
    </script>
    <script>
        var v = document.getElementsByClassName("div");//       
        for (var i = 0; i < v.length; i++) {
            alert(v[i].innerHTML);
        }
    </script>
    <script>
        var r = document.querySelector(".div");    //      
        for (var i = 0; i < r.length; i++) {
            alert(r[i].innerHTML);
        }
    </script>
</body>

<script>
        function insertP(text) {
            var str = "<p>";
            str += text;
            str += "</p>";
            document.write(str);
        }
    </script>

<body>
    <p id="ppp">p  </p>
    <script>
        alert(document.write("<p>     P  </p>")); //    write      p  ，             ，              

        for (var i = 0; i < 5; i++) {
            insertP("     P  ");    //         5 
        }
    </script>
</body>

Dockmentのタイプをまとめたいです.ここでまず要素を得る方法をまとめました.その元素の名前、idの名前などを通して、上の最後の方法で前に存在していましたが、今は使えないようです.まだ分かりません.それから、方法は分かりません.つまり、文書を書き込みます.writeの方法はそのまま出力できます.このタイプは覚えやすいです.
三.Elementタイプ

<body>
      <div id="div" class="divclass" name="divname">
       <script>
           //var div = document.getElementById("div");    //  div  
           //var divattribute = div.getAttribute("class");      //  getAttribute  div      
           //alert(divattribute);
           var setattribute = div.setAttribute("name", "divdiv");   //       ，           ，         
           alert(div.getAttribute("name"));
           var remove = div.removeAttribute("name");           //          ，            
           alert(div.getAttribute("name"));                 //   null           
       </script>
</body>

ここでは最初からずっとalertを書いています. ),そしてヒントは定義されていません.感覚はおかしいです.その時間は変数として間違えて出力すればいいと思っています.まだ甘すぎます.実はそうではないです.具体的には新しい値を設定したら元素の値を取るべきです.直接負けられないです.友達の助けで反応します.へへへへ、このような書き方は自分のものです.詳しくは分かりませんが、方法の使い方は分かりませんので、今度は注意してほしいです.ここでは、Elementのタイプについては主に元素の特性を取得し、元素の特性を取得し、さらには元素の特性を取り除くことができます.

var p = document.createElement("p");  //

<body>
    <div id="div">div  </div>
    <script>
        var p = document.createElement("p");  //     
        var doc = document.createTextNode("  text  ");//      
        p.appendChild(doc);         //     

        document.getElementById("div").appendChild(p);     // p     div   
        
    </script>
</body>

ここは新しい要素を作成します.へへへ、また、動的に要素を追加するサブノードです.前のElementの方法を使えば、ここで簡単に練習すればいいです.ここではよく分かります.
四.その他のタイプ
他にもTextタイプ、Commentタイプ、CDATASectionタイプ、DcunmentTypeタイプ、Dcunment FragmentタイプとAttrタイプなどがありますが、上の例ではテキスト要素を作成し、Textタイプに属します.今の私達は簡単にテキストノードを作成するだけでいいです.他のタイプも分かります.
へへへ、今日はここで書きます.まだたくさんの小さな知識点があります.熟練していません.今日までjavascriptを勉強したのは四日間です.感覚的に勉強したのはまだ多いです.月曜日はjavascriptの存在だけを知っていました.火曜日は基本概念です.文法、キーワード、データの種類、操作符といくつかの語句の使用です.(if、if…else.、while、do…while、for、for…inなど)水曜日は引用タイプ(http://www.cnblogs.com/dyxd/p/4204278.html)です.今日の内容はDOMです.4日間の間に勉強することが多いです.でも、一番大切なのは少しずつ消化していくことです.勉強は順序を追って進んでいく過程です.1=1の始まりと終わりです.努力はきっと違った結果があると信じています.

nodejsはCommon JSとAMDを勉強します.