Dom Api之操作标签属性
程序员文章站
2022-04-10 19:25:11
标签元素的属性有两类:1.标签自带属性.2.自定义属性.一、获取属性.获取属性有两种方法:1.element.属性名.2.element.getAttribute(属性名).下面用代码看一下他们的区别:
标签元素的属性有两类:1.标签自带属性.2.自定义属性.
一、获取属性.
获取属性有两种方法:1.element.属性名.2.element.getAttribute(属性名).下面用代码看一下他们的区别:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>dom api</title>
</head>
<body>
<header>dom api</header>
<button>button</button>
<div id='count' name='div'>0</div>
</body>
<script>
//获取button标签
let buttonEle = document.querySelector('button');
//获取div标签
let divEle = document.querySelector('#count');
//为button的onclick绑定事件
buttonEle.onclick = function() {
console.log('divEle.id: ' + divEle.id);
console.log('divEle.name: ' + divEle.name);
console.log('getAttribute-id: ' + divEle.getAttribute('id'));
console.log('getAttribute-name: ' + divEle.getAttribute('name'));
}
</script>
</html>
可以看到,通过element.属性值来获取的只能是标签的自带系统属性,我们自定义的属性通过这种方式是获取不到的;而element.getAttribute(属性名)则可以获取以上两种属性.
二、设置属性.
设置属性也有两种方式,与获取类似:1.element.属性名.2.element.getAttribute(属性名).通过代码看一下他们的区别:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>dom api</title>
</head>
<body>
<header>dom api</header>
<button>button</button>
<div id='count'>0</div>
</body>
<script>
//获取button标签
let buttonEle = document.querySelector('button');
//获取div标签
let divEle = document.querySelector('#count');
//为button的onclick绑定事件
buttonEle.onclick = function() {
divEle.name = '233';
divEle.id = 'countEle';
console.log('divEle.name: ' + divEle.getAttribute('name'));
console.log('divEle.id: ' + divEle.id);
divEle.setAttribute('name', '233');
divEle.setAttribute('id', 'countNewId');
console.log('divEle.setAttribute-name: ' + divEle.getAttribute('name'));
console.log('divEle.setAttribute-id: ' + divEle.id);
divEle.removeAttribute('id');
divEle.removeAttribute('name');
}
</script>
</html>
当点击按钮后:
阔以看到,当我们通过element.属性名设置属性时,只对自带属性有效.而element.setAttribute可以设置任何类型的属性.removeAttribute会移除任何类型的属性.
三、dataset.
dataset是h5新增的属性,它提倡我们以data-属性名的格式命名自定义属性,这么做,1是方便区分自定义属性和自带属性.2是在js中可以使用dataset来获取和设置自定义属性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>dom api</title>
</head>
<body>
<header>dom api</header>
<button>button</button>
<div id='count'>0</div>
</body>
<script>
//获取button标签
let buttonEle = document.querySelector('button');
//获取div标签
let divEle = document.querySelector('#count');
//为button的onclick绑定事件
buttonEle.onclick = function() {
divEle.dataset['name'] = 'countDiv';
console.log(divEle);
}
</script>
</html>
可以看到,当我们使用dataset来设置自定义属性时,它会自动在属性名前添加'data-'前缀.
同理,我们获取的时候,也只是通过data-后面的名字来操作的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>dom api</title>
</head>
<body>
<header>dom api</header>
<button>button</button>
<div id='count'>0</div>
</body>
<script>
//获取button标签
let buttonEle = document.querySelector('button');
//获取div标签
let divEle = document.querySelector('#count');
//为button的onclick绑定事件
buttonEle.onclick = function() {
divEle.dataset['countName'] = 'countDiv';
console.log(divEle);
console.log("divEle.dataset['countName']: " + divEle.dataset['countName']);
console.log("divEle.dataset.countName: " + divEle.dataset.countName);
}
</script>
</html>
需要注意的是,当自定义属性的名字段数比较多时,如上面的data-count-name,我们需要通过驼峰命名发来获取和设置dataset中的属性值.
本文地址：https://blog.csdn.net/Wenliuyong/article/details/107320890
下一篇： Web Worker 跨域访问