目录
DOM常用属性操作
获取属性值
1.获取元素固有属性(固有属性就是浏览器给默认html标签绑定的属性)
(1)元素名.固有属性
(2)元素名.getAttribute('固有属性')
2.获取用户自定义属性(自定义属性就是用户自己定义的属性)
元素名.getAttributer('固有属性')
<div id="test" class="cName" try="tryName"></div>
<script>
//获取属性值
var box = document.querySelector('div');
//获取固有属性
console.log(box.id); //test
console.log(box.getAttribute('id')); //test
//获取自定义属性
console.log(box.getAttribute('try')); //tryName
</script>
需要注意的一点是,class不是固有属性,要获取class属性值需要使用className
console.log(box.class); //undefined
console.log(box.getAttribute('class')); //cName
console.log(box.className); //cName
console.log(box.getAttribute('className')); //null
设置属性值
1.设置固有属性
(1)element.属性名='值'
(2)element.setAttribute('属性','值')
2.设置自定义属性
element.setAttribute('属性','值')
<div></div>
<script>
var box = document.querySelector('div');
//设置固有属性
box.id = "test";
box.className = "cName";
//设置自定义属性
box.setAttribute("try","tryName");
</script>
打开开发者工具可以发现属性已经成功设置到div块中
移除属性值
element.removeAttribute('属性')
该方法通用,可以移除固有和自定义属性
<div></div>
<script>
var box = document.querySelector('div');
//设置固有属性
box.id = "test";
box.className = "cName";
//设置自定义属性
box.setAttribute("try","tryName");
//移除属性值
box.removeAttribute('id');
box.removeAttribute('try');
</script>
H5中属性操作
自定义属性值
1.在html标签中定义
语法:data-属性名='值'
在这里data表示前缀,通过'-'连接自定义属性名
2.在JavaScript中定义
语法:element.dataset.属性名='值'
在上面我们有提到过,JavaScript中自定义属性值的方法有 element.setAttribute('属性','值'),故这两种都是js中自定义属性值的方法,但是element.dataset.属性名='值'这种方式只能设置“data-”开头的自定义属性
注:h5关于属性值中dataset 是一个集合,内部存放有以'data-'开头的所有自定义属性
<!-- //h5中自定义属性 -->
<!-- html中定义 -->
<div data-try="tryName">文本内容</div>
<script>
//JavaScript中定义
var box = document.querySelector('div');
box.dataset.class = 'test';
</script>
获取自定义属性值
(1)element.dataset.属性名
(2)element.dataset['属性名']
获取属性值注意点:若自定义属性名含有多个'-',在获取属性值时,需要去掉'-',采用驼峰命名法,第二个及之后的单词首字母大写,例如:
<!-- //h5中自定义属性 -->
<!-- html中定义 -->
<div data-try-it="tryName">文本内容</div>
<script>
//JavaScript中定义
var box = document.querySelector('div');
box.dataset.class = 'test';
//获取属性值
console.log(box.dataset.tryIt); //tryName
console.log(box.dataset['tryIt']); //tryName
</script>
DOM更多元素属性和方法: