setAttribute()方法和 getAttribute() 方法

一、setAttribute() 方法

setAttribute() 方法为一个或一组元素添加指定的属性，并且为其赋指定的值。（主要针对自定义属性）

如果这个属性已经存在，仅仅设置或是修改属性值。

浏览器兼容性：所有主流浏览器都兼容

语法：

element.setAttribute(attributename,attributevalue)

参数：

attributename：添加的属性名。必需

attributevalue：添加的属性值。必需

返回值：无返回值

注意：

1、在HTML文档中的HTML元素调用 setAttribute() 方法时，该方法会将其属性名称（attribute name）参数小写。

2、如果指定的属性已经存在，就修改或是传递属性值。如果不存在，就创建指定的属性。（该方法只能通过元素节点调用）

3、不存在的属性，getAttribute() 返回 null。还是应该使用 removeAttribute() 代替 setAttribute('属性名',null)来删除属性。

实例：

setAttribute用于设置在 li元素上的属性。

HTML

<li>歌单</li>
<li>主播电台</li>
<li>排行榜</li>

JavaScript

var lis = tab_list.querySelectorAll('li');
for(var i=0;i < lis.length;i++){
         lis[i].setAttribute('index',i);
}

getAttribute() 方法返回元素上一个指定的属性值。

如果指定的属性值不存在，就返回 null 或是 ""（空字符串）。

浏览器兼容：所有主流浏览器均支持 getAttribute() 方法。

语法：

element.getAttribute(attributename)

参数：

attributename：需要获得属性值的属性名称。必需

返回值：

返回指定属性的值（string类型）

注意：

1、当在HTML文档中的HTML元素中调用此方法时，getAttribute() 方法会先将参数转换为小写形式。

2、当被指定的属性不存在于元素之上是，所有浏览器都会返回 null。

3、当在被标记为 HTML 文档中的一个 HTML 元素上调用此方法时，getAttribute() 会先将其参数转换为小写形式。

4、因此，如果一个属性可能不存在于指定的元素上，在调用 getAttribute() 之前，你应该使用 element.hasAttribute() 来检测该属性是否存在。

实例：

JavaScript

function myFunction()
{
var a=document.getElementsByTagName("a")[0];
document.getElementById("demo").innerHTML=a.getAttribute("target");
}