前几天学习了Javascript的基础知识，算是已经入了一个小门，今天学习了JS获取DOM和操作DOM的基础知识，下面我来分享一下我的学习心得。

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

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