您的位置:首页 > Web前端 > javascript > 正文

js中Attribute和Property区别

更多 时间:2015-2-26 类别:Web前端 浏览量:2037

js中Attribute和Property区别

js中Attribute和Property区别

一、JS中Property

属性,就像C#等高级语言可以.获取或者设置其值;

特点

1、其值可以为任意值

2、名字区分大小写

3、当调用innerHTML时不会显示出来。

 

二、JS中Attribute

特性,每一个dom元素都有一个attributes属性来存放所有的attribute节点,通过getAttribute()和setAttribute()方法来进行获取和操作。

特点

1、只能为字符串

2、名字与大小写无关,因为HTML attribute是大小写无关的。

3、当调用innerHTML时会显示出来。

4、你可以通过调用 attributes 属性对它们进行遍历。

 

三、JS中Property和Attribute的共性

常用的Attribute,例如id、class、title等,已经被作为Property附加到DOM对象上,可以和Property一样取值和赋值。但是自定义的Attribute,就不会有这样的特殊优待

例如

<li id="li1" class="liClass" title="liTitle" title1="liTitle1">100</li>

这个li里面的“title1”就不会变成Property。

即,只要是DOM标签中出现的属性(html代码),都是Attribute。然后有些常用特性(id、class、title等),会被转化为Property。

 

四、Attribute取值

用getAttribute()来操作即可。

  •  
  • 
     var id = li1.getAttribute("id");              
     var className1 = li1.getAttribute("class");
     var title = li1.getAttribute("title");
     var title1 = li1.getAttribute("title1");   //自定义特性
    
    			
  •  

    五、Attribute赋值

  •  
  • 
     li1.setAttribute('class', 'a');
     li1.setAttribute('title', 'b');
     li1.setAttribute('title1', 'c');
     li1.setAttribute('title2', 'd');
    
    		
  • 用setAttrbute()赋值,任何Attribute都可以,包括自定义的。而且,赋值的Attribute会立刻表现到DOM元素上。

    setAttribute()的两个参数,都必须是字符串。即对特性Attribute职能赋值字符串,而对属性Property就可以赋任何类型的值了。

     

    六、Property取值

    属性取值很简单。取任何属性的只,用“.”就可以:

  •  
  • 
     var id = li1.id;
     var className = li1.className;
     var childNodes = li1.childNodes;
     var attrs = li1.attributes;
    
    			
  • class特性在变成属性时,名字改成了“className”,因此li1.className和li1.getAttrbute('class')相同。

     

    七、Property赋值

    赋值和基本的js对象属性赋值一样,用“.”即可:

    li1.className = 'a';
    li1.align = 'center';

     

     

     

    标签:javascript
    您可能感兴趣