DOM模型-属性操作

HTML 元素包括标签名和若干个键值对,这个键值对就称为“属性”(attribute)。“属性”本身是一个对象(Attr对象),但是实际上,这个对象极少使用。一般都是通过元素节点对象(HTMlElement对象)来操作属性。本章介绍如何操作这些属性。

一、Element.attributes 属性

元素对象有一个attributes属性,返回一个类似数组的动态对象,成员是该元素标签的所有属性节点对象,属性的实时变化都会反映在这个节点对象上。其他类型的节点对象,虽然也有attributes属性,但返回的都是null,因此可以把这个属性视为元素对象独有的。

单个属性可以通过序号引用,也可以通过属性名引用。

例如: <body bgcolor="yellow" onload="">

document.body.attributes[0]

document.body.attributes.bgcolor

document.body.attributes['ONLOAD']

注意,上面代码的三种方法,返回的都是属性节点对象,而不是属性值。

获取属性值的方法:

获取名称:属性节点对象有name属性,对应该属性的属性名,等同于nodeName属性。

获取属性值:属性节点对象value属性,对应该属性的属性值,等同于nodeValue属性。

例如:

// <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"

接下来我们写个小dome来遍历一个节点的属性:

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';
}

二、标准属性

HTML 元素的标准属性(即在标准中定义的属性),会自动成为元素节点对象的属性。可以直接获取:

例如:document.id;document.src等等

三、属性的方法

1、getAttribute()-----获取

2、setAttribute()----新增、设置

3、hasAttribute()----判断是否有属性

4、removeAttribute()----移出某个属性

 

四、dataset 属性

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

例如:<div id="mydiv" foo="bar">

div元素自定义了foo属性,然后可以用getAttribute()setAttribute()读写这个属性

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

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

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

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

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

注意:data-后面的属性名有限制。

1、只能包含字母、数字、连词线(-)、点(.)、冒号(:)和下划线(_)。

2、属性名不应该使用AZ的大写字母,比如不能有data-helloWorld这样的属性名,而要写成data-hello-world

转成dataset的键名时,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。

反过来,dataset的键名转成属性名时,所有大写字母都会被转成连词线+该字母的小写形式,其他字符不变。

例如:dataset.helloWorld会转成data-hello-world



转载于:https://www.cnblogs.com/huanghang/p/11101100.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值