JavaScript DOM学習ノート2――DOMの基本使用

8235 ワード

JavaScript 職場 dom レジャー

1.HTMLのDOM
W 3 CはXML DOMを再開発するとともに、XHTMLやHTMLに対してDOMを開発しました.このDOMはこのような実現の基礎としてHTMLDocumentとHTMlementを定義している.各HTML要素は、対応するHTMLELE mentタイプによって表される.例えばHTMLDivElementは＜div＞ラベルを表します.
2.関連ノードへのアクセス
documentオブジェクトはBOMの一部であり、DOMの一部でもある.したがって、DOMの処理は多くの場合、documentオブジェクトで開始されます.コードを直接見てください.ちょっと変わったものは全部注釈で説明しました.


  
  
  
  
   
   
   
   <html> 
   
   
   
       <head> 
   
   
   
           <title>DOM Example</title> 
   
   
   
           <script type="text/javascript"> 
   
   
   
               function domTest() { 
   
   
   
                   var oHtml = document.documentElement;//  HTML <html>        
   
   
   
                   var oHead = oHtml.firstChild; 
   
   
   
                   var oBody = oHtml.lastChild; 
   
   
   
                   //var oHead = oHtml.childNodes[0]; 
   
   
   
                   //var oHead = oHtml.childNodes.item(0); 
   
   
   
                   //var oBody = oHtml.childNodes[1]; 
   
   
   
                   //var oBody = oHtml.childNodes.item(1); 
   
   
   
                   //HTML DOM     body      <body>   
   
   
   
                   //var oBody = document.body; 
   
   
   
                   alert(oHtml.childNodes.length); 
   
   
   
                    
   
   
   
                   alert(oHead.parentNode == oHtml); 
   
   
   
                   alert(oBody.parentNode == oHtml); 
   
   
   
                   alert(oBody.previousSibling == oHead); 
   
   
   
                   alert(oHead.nextSibling == oBody); 
   
   
   
                   alert(oHead.ownerDocument == document);//ownerDocument          
   
   
   
    
   
   
   
               } 
   
   
   
           </script> 
   
   
   
       </head> 
   
   
   
       <body onload="domTest()"> 
   
   
   
           <p>Hello,World!</p> 
   
   
   
           <p>Isn't thhis exciting?</p> 
   
   
   
           <p>You are learing to use DOM!</p> 
   
   
   
       </body> 
   
   
   
   </html>

3.DOMノードタイプを検出する
ノードのタイプは、nodeType属性により検出することができる.前のブログでは、12のノードタイプについて言及し、例を挙げて説明しました.ここでは改めて言及しない.
検出方法1:Nodeインターフェースで定義されたノードタイプ定数が表す数字を返します.


  
  
  
  
   
   
   
   alert(document.nodeType);//  9 
   
   
   
   alert(document.documentElement.nodeType);//  1

検出方法2:Nodeの定数マッチを使用して、ノードタイプを検出する.


  
  
  
  
   
   
   
   alert(document.nodeType == Node.DOCUMENT_NODE); //  true 
   
   
   
   alert(document.documentElement.nodeType == Node.ELEMENT_NODE);//  true

しかし、上記の第二の方法はIE以外のブラウザではほとんど大丈夫です.IEはだめです.私はテストをしました.IE 8を使っても間違えます.この問題を解決するために、ノードタイプの定数をカスタマイズすることができます.コードを参照:


  
  
  
  
   
   
   
   if(typeof Node == "undefined") { 
   
   
   
       var Node = { 
   
   
   
           ELEMENT_NODE:1, 
   
   
   
           ATTRIBUTE_NODE:2, 
   
   
   
           TEXT_NODE:3, 
   
   
   
           CDATA_SECTION_NODE:4, 
   
   
   
           ENTITY_REFERENCE_NODE:5, 
   
   
   
           ENTITY_NODE:6, 
   
   
   
           PROCESSING_INSTRUCTION_NODE:7, 
   
   
   
           COMMENT_NODE:8, 
   
   
   
           DOCUMENT_NODE:9, 
   
   
   
           DOCUMENT_TYPE_NODE:10, 
   
   
   
           DOCUMENT_FRAGMENT_NODE:11, 
   
   
   
           NOTATION_NODE:12 
   
   
   
       }; 
   
   
   
   }

参考図書目録:
『JavaScript高級プログラミング』Nicolas C.Zakas著、曹力張欣等訳.

JSON基礎使用詳細