一、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对象，这个是需要注意的。

好啦，今天的心得分享就到这里啦，感谢各位的支持！