JavaScript 属性的操作
目录
HTML元素包括标签名和若干个键值对,这个键值对就称为“属性”(attribute)。
<a id="test" href="http://www.example.com">
链接
</a>
上面代码中,a
元素包括两个属性:id
属性和href
属性。
在DOM中,属性本身是一个对象(Attr
对象),但是实际上,这个对象极少使用。一般都是通过元素节点对象(HTMlElement
对象)来操作属性。本节介绍如何操作这些属性。
Element.attributes属性
HTML元素对象有一个attributes
属性,返回一个类似数组的动态对象,成员是该元素标签的所有属性节点对象,属性的实时变化都会反映在这个节点对象上。其他类型的节点对象,虽然也有attributes
属性,但是返回的都是null
,因此可以把这个属性视为元素对象独有的。
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"
下面代码可以遍历一个元素节点的所有属性。
var para = document.getElementsByTagName('p')[0];
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.value = output;
} else {
result.value = 'No attributes to show';
}
元素节点对象的属性
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
属性,即会显示另外一张图片。
这样修改HTML属性,常常用于添加表单的属性。
var f = document.forms[0];
f.action = 'submit.php';
f.method = 'POST';
上面代码为表单添加提交网址和提交方法。
注意,这种用法虽然可以读写HTML属性,但是无法删除属性,delete
运算符在这里不会生效。
HTML元素的属性名是大小写不敏感的,但是JavaScript对象的属性名是大小写敏感的。转换规则是,转为JavaScript属性名时,一律采用小写。如果属性名包括多个单词,则采用骆驼拼写法,即从第二个单词开始,每个单词的首字母采用大写,比如onClick
。
有些HTML属性名是JavaScript的保留字,转为JavaScript属性时,必须改名。主要是以下两个。
for
属性改为htmlFor
class
属性改为className
另外,HTML属性值一般都是字符串,但是JavaScript属性会自动转换类型。比如,将字符串true
转为布尔值,将onClick
的值转为一个函数,将style
属性的值转为一个CSSStyleDeclaration
对象。
属性操作的标准方法
概述
元素节点提供四个方法,用来操作属性。
getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
其中,前两个读写属性的方法,与前一部分HTML标签对象的属性读写,有三点差异。
(1)适用性
getAttribute()
和setAttribute()
对所有属性(包括用户自定义的属性)都适用;HTML标签对象的属性,只适用于标准属性。
(2)返回值
getAttribute()
只返回字符串,不会返回其他类型的值。HTML标签对象的属性会返回各种类型的值,包括字符串、数值、布尔值或对象。
(3)属性名
这些方法只接受属性的标准名称,不用改写保留字,比如for
和class
都可以直接使用。另外,这些方法对于属性名是大小写不敏感的。
var image = document.images[0];
image.setAttribute('class', 'myImage');
上面代码中,setAttribute
方法直接使用class
作为属性名,不用写成className
。
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');
下面是对img
元素的src
属性赋值的例子。
var myImage = document.querySelector('img');
myImage.setAttribute('src', 'path/to/example.png');
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脚本使用。一种解决方法是自定义属性。
<div id="mydiv" foo="bar">
上面代码为div
元素自定义了foo
属性,然后可以用getAttribute()
和setAttribute()
读写这个属性。
var n = document.getElementById('mydiv');
n.getAttribute('foo') // bar
n.setAttribute('foo', 'baz')
这种方法虽然可以达到目的,但是会使得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-*
属性。
注意,data-
后面的属性名有限制,只能包含字母、数字、连词线(-
)、点(.
)、冒号(:
)和下划线(_
)。而且,属性名不应该使用A
到Z
的大写字母,比如不能有data-helloWorld
这样的属性名,而要写成data-hello-world
。
转成dataset
的键名时,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。反过来,dataset
的键名转成属性名时,所有大写字母都会被转成连词线+该字母的小写形式,其他字符不变。比如,dataset.helloWorld
会转成data-hello-world
。
更多建议: