javascript基础----attributes属性的操作

HTML元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。

 

<a id="test" href="http://www.example.com">

  链接

</a>

上面代码中，a元素包括两个属性：id属性和href属性。

 

 

Element.attributes属性

HTML元素对象有一个attributes属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上

 

document.body.attributes[0]

document.body.attributes.bgcolor

document.body.attributes['ONLOAD']

注意，上面代码中，第一行attributes[0]返回的是属性节点对象，后两行都返回属性

 

属性节点对象有name和value属性，对应该属性的属性名和属性值，等同于nodeName属性和nodeValue属性。

 

// HTML代码为

// <div id="mydiv">

var n = document.getElementById('mydiv');

 

n.attributes[0].name // "id"

n.attributes[0].nodeName // "id"

 

n.attributes[0].value // "mydiv"

n.attributes[0].nodeValue // "mydiv"

 

 

元素节点对象的属性

这样修改HTML属性，常常用于添加表单的属性。

 

var f = document.forms[0];

f.action = 'submit.php';

f.method = 'POST';

上面代码为表单添加提交网址和提交方法。

 

属性操作的标准方法

 

getAttribute()

setAttribute()

hasAttribute()

removeAttribute()

 

Element.getAttribute()

Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。

 

// HTML代码为

// <div id="div1" align="left">

var div = document.getElementById('div1');

div.getAttribute('align') // "left"

 

Element.setAttribute()

Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。

 

var d = document.getElementById('d1');

d.setAttribute('align', 'center');

 

 

Element.hasAttribute()

Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性。

 

var d = document.getElementById('div1');

 

if (d.hasAttribute('align')) {

  d.setAttribute('align', 'center');

}

上面代码检查div节点是否含有align属性。如果有，则设置为“居中对齐”。

Element.removeAttribute()

Element.removeAttribute方法用于从当前元素节点移除属性。

 

// HTML代码为

// <div id="div1" align="left" width="200px">

document.getElementById('div1').removeAttribute('align');

// 现在的HTML代码为

// <div id="div1" width="200px">

 

 

dataset属性

有时，需要在HTML元素上附加数据，供JavaScript脚本使用。一种解决方法是自定义属性。

这种方法虽然可以达到目的，但是会使得HTML元素的属性不符合标准，导致网页的HTML代码通不过校验。

 

更好的解决方法是，使用标准提供的data-*属性。

 

<div id="mydiv" data-foo="bar">

然后，使用元素节点对象的dataset属性，它指向一个对象，可以用来操作HTML元素标签的data-*属性。

 

var n = document.getElementById('mydiv');

n.dataset.foo // bar

n.dataset.foo = 'baz'

上面代码中，通过dataset.foo读写data-foo属性。

 

删除一个data-*属性，可以直接使用delete命令。

 

delete document.getElementById('myDiv').dataset.foo;

除了dataset属性，也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*属性。