JavaScript判断对象类型及节点类型节点名称和节点值

Posted xiaozhi-it

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript判断对象类型及节点类型节点名称和节点值相关的知识,希望对你有一定的参考价值。

一、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));//输出true
12     console.log( ‘arr.constructor==Array  :‘+ (arr.constructor==Array));//输出true
13     console.log( ‘obj.constructor==Object  :‘+ (obj.constructor==Object));//输出true
14     console.log( ‘usr.constructor.name==User  :‘+ (usr.constructor.name==User));//输出true
15 }

 

二、使用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时永远为#comment
12 </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判断对象类型及节点类型节点名称和节点值的主要内容,如果未能解决你的问题,请参考以下文章

javaScript(叁)

JavaScript HTML DOM 元素(节点)

Javascript进阶篇——(DOM—节点---属性访问节点)—笔记整理

javascript节点

js-DOM

一文吃透JavaScript中的DOM知识及用法