下面代码可以遍历一个元素节点的所有属性。

var para = document.getElementsByTagName('p')[0];var result = document.getElementById('result');if (para.hasAttributes()) {var attrs = para.attributes;var output = '';for(var i = attrs.length - 1; i >= 0; i--) {    output += attrs[i].name + '->' + attrs[i].value;  }  result.textContent = output;} else {  result.textContent = 'No attributes to show';}

2、元素的标准属性

HTML 元素的标准属性(即在标准中定义的属性)，会自动成为元素节点对象的属性。

var a = document.getElementById('test');a.id // "test"a.href // "http://www.example.com/"

上面代码中，a元素标签的属性id和href，自动成为节点对象的属性。

这些属性都是可写的。

var img = document.getElementById('myImage');img.src = 'http://www.example.com/image.jpg';

上面的写法，会立刻替换掉img对象的src属性，即会显示另外一张图片。

这种修改属性的方法，常常用于添加表单的属性。

var f = document.forms[0];f.action = 'submit.php';f.method = 'POST';

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

注意，这种用法虽然可以读写属性，但是无法删除属性，delete运算符在这里不会生效。

HTML 元素的属性名是大小写不敏感的，但是 JavaScript 对象的属性名是大小写敏感的。转换规则是，转为 JavaScript 属性名时，一律采用小写。如果属性名包括多个单词，则采用骆驼拼写法，即从第二个单词开始，每个单词的首字母采用大写，比如onClick。

有些 HTML 属性名是 JavaScript 的保留字，转为 JavaScript 属性时，必须改名。主要是以下两个。

for属性改为htmlFor

class属性改为className

另外，HTML 属性值一般都是字符串，但是 JavaScript 属性会自动转换类型。比如，将字符串true转为布尔值，将onClick的值转为一个函数，将style属性的值转为一个CSSStyleDeclaration对象。因此，可以对这些属性赋予各种类型的值。

3、属性操作的标准方法

3.1、概述

元素节点提供六个方法，用来操作属性。

getAttribute()

getAttributeNames()

setAttribute()

hasAttribute()

hasAttributes()

removeAttribute()

这有几点注意。

(1)适用性

这六个方法对所有属性(包括用户自定义的属性)都适用。

(2)返回值

getAttribute()只返回字符串，不会返回其他类型的值。

(3)属性名

这些方法只接受属性的标准名称，不用改写保留字，比如for和class都可以直接使用。另外，这些方法对于属性名是大小写不敏感的。

var image = document.images[0];image.setAttribute('class', 'myImage');

上面代码中，setAttribute方法直接使用class作为属性名，不用写成className。

3.2、Element.getAttribute()

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

// HTML 代码为// 

var mydiv = document.getElementById('mydiv');mydiv.getAttributeNames().forEach(function (key) {var value = mydiv.getAttribute(key);console.log(key, value);})

// HTML 代码为// Hello Worldvar b = document.querySelector('button');b.setAttribute('name', 'myButton');b.setAttribute('disabled', true);

var d = document.getElementById('div1');if (d.hasAttribute('align')) {  d.setAttribute('align', 'center');}

var foo = document.getElementById('foo');foo.hasAttributes() // true

// HTML 代码为// 

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

var n = document.getElementById('mydiv');n.getAttribute('foo') // barn.setAttribute('foo', 'baz')

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

var n = document.getElementById('mydiv');n.dataset.foo // barn.dataset.foo = 'baz'

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