一、JavaScript获取DOM元素常用的5种方法。
现有如下DOM元素结构:
<ul id="box"> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> <li class="item">item6</li></ul>
1.返回匹配的元素集合中的第一个。
const li = document.querySelector('.item');
2.返回匹配的元素集合所有成员。
const list = document.querySelectorAll('.item');
3.根据标签(tag)获取元素。
const ul = document.getElementsByTagName('ul');
4.根据id选择器获取元素。
const id = document.getElementById('box');
5.根据class选择器获取元素
const classNames = document.getElementsByClassName('item');
以上就是JS获取DOM元素的5种常用方法,
二、classList对象与dataset对象的应该场景
- classList应用场景:
<style>.red { color: red;}.blue { color: blue;}.bg { background-color: #ff00ff;}</style><p class="red" id="hello">Hello World</p>
如果我们想获取元素的class属性值,可以使用className来获取:
console.log(p.className); // red
获取元素的id属性值,可以使用id来获取:
console.log(p.id); // hello
还可以通过className给元素添加属性:
p.className = 'blue';
p.className = 'blue bg';
如果一次添加一个属性使用className还行,但是如果要多次添加属性,那么每次都得把之前的属性再重写一遍这样的话就有点繁琐了,因此可以使用classList来专门操作类:
p.classList.add('red', 'bg');
移除一个类:
p.classList.remove('bg');
- dataset应用场景: 访问非自定义标签属性
案例:现有如下一个DIV元素:
<div class="user" data-email="admin@php.cn" data-my-gender="male">个人简介</div>
现在如果我想给user属性添加一个id值,并打印出来可以这样操作:
const user = document.querySelector('.user');user.id = '1';console.log(user.id); // 1
但是, 如果dom结构上有用户自定义的属性,比如:data-email=”admin@php.cn”, 可以使用dataset对象访问自定义的标签属性。
console.log(user.dataset.email); // admin@php.cn
如果用户自定义属性是data-my-gender这种格式的,那么在获取的时候应该采用驼峰式的写法: myGender:
console.log(user.dataset.myGender); // male
但是,在自定义属性的时候不能写成data-myGender = “male”,这样会报undefined:
<!-- 错误写法 --><div class="user" data-email="admin@php.cn" data-myGender="male">个人简介</div>
以上就是我今天学习的JS操作DOM的相关知识,其中,如何获取元素的5种方法我还是需要牢记掌握,这个对于以后的学习应该是非常重要的,还有就是JS访问用户的自定义属性,这个需要用dataset对象,这个是需要注意的。
好啦,今天的心得分享就到这里啦,感谢各位的支持!