js关于为DOM对象添加自定义属性的方式和区别

DOM对象的三种在添加自定义属性的方式

一是 通过 “.”+“属性名”     

二是 setAttribute()（getAttribute()获取）

三是 直接在元素标签上加属性  如：<div  name="" id="te"  class=""   content=""></div>

 

 

三者的区别主要是在获取属性值方面：

  

1.var e = document.getElementById("te");   
2.//获取属性   
3.//用 . 来引用，必须是内置的(IE 可以访问自定义属性)，而且引用的时候，区分大小写。   
4.alert(e.id);//"test"   
5.alert(e.className);//"cls"   
6.alert(e.ss);//undefined(IE下为 "ss");   
7.  
8.//用getAttribute 来引用，可以访问自定义属性，不区分大小写。   
9.alert(e.getAttribute("id"));//"test"   
10.alert(e.getAttribute("ID"));//"test"   
11.//注意浏览器差异   
12.alert(e.getAttribute("class"));//"cls"(Firefox)   
13.alert(e.getAttribute("className"));//"cls"(IE)   
14.  
15.alert(e.getAttribute("ss"));//"ss"   
16.  
17.//设置属性   
18./*使用 . 运算符和 setAttribute都可以。但是对于自定义属性，使用.运算符的设置的属性无法通过getAttribute获取，反之亦然。*/  
19.e.setAttribute("abc2","abc2");   
20.e.abc3 = "abc3";   
21.  
22.e.title1 = "abc";   
23.alert(e.getAttribute("title1"));//null  
var e = document.getElementById("test");
//获取属性
//用 . 来引用，必须是内置的(IE 可以访问自定义属性)，而且引用的时候，区分大小写。
alert(e.id);//"test"
alert(e.className);//"cls"
alert(e.ss);//undefined(IE下为 "ss");

//用getAttribute 来引用，可以访问自定义属性，不区分大小写。
alert(e.getAttribute("id"));//"test"
alert(e.getAttribute("ID"));//"test"

 

//注意浏览器差异
alert(e.getAttribute("class"));//"cls"(Firefox)
alert(e.getAttribute("className"));//"cls"(IE)

alert(e.getAttribute("ss"));//"ss"

 

因此  对于style,className的设置，通常是使用" . "运算符来实现