点击切换帐号登陆
帐号密码登陆

如何访问HTML元素的非标准属性?

# 访问HTML非标准属性

## 1. HTML非标准属性

* 非标准属性是指在`HTMLElement`以子类型中非内置的属性
* 非标签属性需要使用特定`DOM方法`来访问

------------------------------------------------

## 2. 访问方法

* `getAttribute('name')`: 获取属性
* `setAttribute('name','value')`: 设置或添加属性
* `hasAttribute('name')`: 检测属性是否存在
* `removeAttribute('name')`: 移除属性

------------------------------------------------

## 3. 属性访问与方法访问的区别

> 对于HTML元素的属性,提供了属性访问和方法访问二种方式,有何区别呢?

* **属性名称不同**
* 属性访问时, 对于保留字会做一些转换,如`htmlFor`,`className`
* 方法访问时, 属性名必须放在引号中以字符串方式提供,不需要转换

* **返回值类型不同**
* 属性访问时, 会返回字符串, 数值, 布尔,对象等
* 方法访问时, 只会返回字符串类型

------------------------------------------------

## 4. 示例源码

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>访问HTML非标准属性</title>
</head>
<body>
<ul>
<li index="1" id="first" class="green">item1</li>
<li index="2">item2</li>
<li index="3" disabled>item3</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul').item(0);

var items = ul.children;

console.log(items[0].index);

console.log(items[0].getAttribute('index'));
// 访问与保留字名称冲突的属性名,如class,因为放在了引号号,所以不用转成'className'
console.log(items[0].getAttribute('class'));

// getAttribute也可获取标准属性
console.log(items[0].getAttribute('id'));

// 设置非标准属性,该方法可以更新原属性,如该属性不存在就添加
// 通过查看元素检查
items[1].setAttribute('show', 'true');
items[1].setAttribute('index', '4');

// 有些属性非常重要,如果存在,将会影响到对它的相关操作,例如disabled
// 所以在使用该元素之前, 查询是否存在该属性很有必要
console.log(items[2].hasAttribute('disabled'));
console.log(items[2].getAttribute('disabled'));

// 虽然返回true,但不是布尔类型,而string,这与属性访问是不同的
console.log(typeof items[2].getAttribute('disabled'));

// 移除属性
items[2].removeAttribute('disabled');
// 也可移除标准的html属性,例如id
items[0].removeAttribute('id');
</script>
</body>
</html>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号