JavaScript判斷物件類型及節點類型、節點名稱和節點值

標籤：val   comm   complex   cti   struct   區別   javascrip   document   gpo   

一、JavaScript判斷物件類型       1、可以使用typeof函數判斷物件類型

1 function checkObject1(){2     var str="str";3     console.log(typeof(str))//輸出"string";4     console.log(typeof(str)=="string")//輸出true;5 }?

 　　2、使用對象的建構函式屬性(constructor)，來判斷對象的類型：

1 function checkObject2(){2  var str ="str";3  console.log(str.construtor=="string")//輸出4 }

 　　3、兩者的區別

                typeof函數判斷的物件類型只能是：

                        （1）boolean

                        （2）function

                        （3）number

                        （4）object

                        （5）string

                        （6）undefined

               construtor屬性的用法可以判斷一個複雜的類型。比如

 1 //複雜類型的對象，判斷其類型 2 function User(name , age){ 3     this.name=name; 4     this.age=age; 5 } 6 function checkComplexObj(){ 7     var s=‘a string‘; 8     var arr=[]; 9     var obj=new Object();10     var usr=new User();//自訂對象11     console.log( ‘s.constructor==String  :‘+ (s.constructor==String));//輸出true12     console.log( ‘arr.constructor==Array  :‘+ (arr.constructor==Array));//輸出true13     console.log( ‘obj.constructor==Object  :‘+ (obj.constructor==Object));//輸出true14     console.log( ‘usr.constructor.name==User  :‘+ (usr.constructor.name==User));//輸出true15 }

 

二、使用JavaScript判斷節點類型、節點名稱和節點值        1、節點類型的分類 

 

節點類型	說明	值
元素節點	每一個HTML標籤都是一個元素節點，如 <div> 、 <p>、<ul>等	1
屬性節點	元素節點（HTML標籤）的屬性，如 id 、class 、name 等。	2
文本節點	元素節點或屬性節點中的常值內容。	3
注釋節點	表示文檔注釋，形式為<!-- comment text -->。	8
文檔節點	表示整個文檔（DOM 樹的根節點，即 document ）	9

 　　2、使用JavaScript判斷節點類型，節點名稱和節點值

 1 <!--使用javascript判斷節點類型--> 2 <div id="oneDiv">一段文本</div><!--注釋文本--> 3 <script type="text/javascript"> 4     var div = document.getElementById("oneDiv"); 5     console.log(div.nodeType); //輸出1，元素節點 6     var divText = div.firstChild; 7     console.log(divText.nodeType) //輸出3，文本節點 8     var divAttr = div.getAttributeNode("id"); 9     console.log(divAttr.nodeType) //輸出2，屬性節點10     var comment = div.nextSibling;11     console.log(comment.nodeType) //輸出8，注釋節點12 </script>

 1 <!--使用javascript判斷節點名稱--> 2 <div id="oneDiv">一段文本</div><!--注釋文本--> 3 <script type="text/javascript"> 4     var div = document.getElementById("oneDiv"); 5     console.log(div.nodeName); //輸出DIV，元素節點為標籤大寫 6     var divText = div.firstChild; 7     console.log(divText.nodeName) //輸出#text，文本節點使用nodeName時永遠為#text 8     var divAttr = div.getAttributeNode("id"); 9     console.log(divAttr.nodeName) //輸出id，屬性節點為屬性名稱10     var comment = div.nextSibling;11     console.log(comment.nodeName) //輸出#comment，注釋節點使用nodeName時永遠為#comment12 </script>    

 1 <!--使用javascript判斷節點值--> 2 <div id="oneDiv">一段文本</div><!--注釋文本--> 3 <script type="text/javascript"> 4     var div = document.getElementById("oneDiv"); 5     console.log(div.nodeValue); //輸出null，元素節點對於nodeValue不支援 6     var divText = div.firstChild; 7     console.log(divText.nodeValue) //輸出一段文本，文本節點輸出文本值 8     var divAttr = div.getAttributeNode("id"); 9     console.log(divAttr.nodeValue) //輸出oneDiv，屬性節點輸出屬性值10     var comment = div.nextSibling;11     console.log(comment.nodeValue) //輸出注釋文本，注釋節點輸出注釋內容12 </script>   

JavaScript判斷物件類型及節點類型、節點名稱和節點值