DOM《属性(Attr)的操作》

概述

• 属性本身是一个对象(Attr对象)，但是实际上这个对象极少使用。一般都是通过元素节点对象来操作属性。元素节点有一个attributes属性，返回一个类数组。成员是该元素的所有属性节点对象。属性的实时变化都会反映在这个节点对象上。

<div style="width: 20px;" id="box"></div>

let div = document.getElementById('box');
div.attributes  // NamedNodeMap {0: style, 1: id, style: style, id: id, length: 2}

标准属性

• HTML元素的标准属性（即在标准中定义的属性）会自动成为元素节点对象的属性。这些属性都是可读写的，但是无法通过delete删除属性。

<a href="http://www.baidu.com">百度一下</a>

document.getElementsByTagName('a')[0].href // http://www.baidu.com/

操作属性

getAttribute()

• 返回当前元素节点的指定属性，如果指定属性不存在则返回null。

<a href="http://www.baidu.com">百度一下</a>

document.getElementsByTagName('a')[0].getAttribute('href') // http://www.baidu.com

getAttributeNames()

• 返回一个数组，成员是当前元素的所有属性的名字。如果没有任何属性则返回一个空数组。使用元素.attributes属性也能拿到同样的结果，区别是它返回的是一个类数组。

<a href="http://www.baidu.com" id="baiduLink">百度一下</a>

document.getElementsByTagName('a')[0].getAttributeNames() //  ['href', 'id']

setAttribute()

• 为当前元素节点新增属性。如果同名属性已存在，相当于编辑。

<a href="http://www.baidu.com" id="baiduLink">百度一下</a>

document.getElementsByTagName('a')[0].setAttribute('id', 'baiduHref')
// 结果：
<a href="http://www.baidu.com" id="baiduHref">百度一下</a>

hasAttribute()

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

<a href="http://www.baidu.com" id="baiduLink">百度一下</a>

document.getElementsByTagName('a')[0].hasAttribute('id') // true

hasAttributes()

• 返回一个布尔值，表示当前元素是否有属性，如果没有任何属性则返回false，否则返回true。

removeAttribute()

• 移除指定属性，没有返回值。

<a href="http://www.baidu.com" id="baiduLink">百度一下</a>

document.getElementsByTagName('a')[0].removeAttribute('id');
// 结果：
<a href="http://www.baidu.com">百度一下</a>

dataset属性

• 在HTML元素上附加数据，使用dataset属性自定义。

<a href="http://www.baidu.com" id="baiduLink" data-url="baidu">百度一下</a>

let a = document.getElementsByTagName('a')[0];
// 获取dataset属性
a.dataset     // DOMStringMap {url: 'baidu'}
a.dataset.url // 'baidu'

// 写
a.dataset.url = 'kugou' // 'baidu'
// 结果
<a href="http://www.baidu.com" id="baiduLink" data-url="kugou">百度一下</a>

// 删
delete a.dataset.url
// 结果
<a href="http://www.baidu.com" id="baiduLink">百度一下</a>

• 除了dataset属性，也可以用操作属性的六个方法操作data-*属性。
• data-后面的属性名有限制，只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_)。而且，属性名不应该使用A到Z的大写字母，比如不能有data-helloWorld这样的属性名，而要写成data-hello-world。