新的 dom 操作方法
1.获取 dom 元素方法
获取单个元素，参数可以是任意选择器
document.querySelector("选择器");
<body>
<div id="wrap1" class="wrap"></div>
<div id="wrap2" class="wrap"></div>
<script>
let oDiv = document.querySelector('#wrap1');
console.log(oDiv); // 打印台输出 <div id="wrap1" class="wrap"></div>
let cDiv = document.querySelector('.wrap');
console.log(cDiv); // 打印台输出 <div id="wrap1" class="wrap"></div>
</script>
</body>
由上面代码可以看出，document.querySelector() 可以获取到任意选择器的dom元素，当有两个相同的class标签时，则取到第一个class标签的dom元素。
获取多个 dom 元素的方法
document.querySelectorAll('选择器');
<div id="wrap1" class="wrap"></div>
<div id="wrap2" class="wrap"></div>
<script>
let oDiv = document.querySelectorAll('.wrap');
console.log(oDiv); // 打印台输出 [div#wrap1.wrap, div#wrap2.wrap]
oDiv.forEach((ele, index) => {
console.log(ele); // 输出 <div id="wrap1" class="wrap"></div> <div id="wrap2" class="wrap"></div>
})
</script>
</body>
由上面代码可知，当我们使用 document.querySelectorAll() 获取dom 元素时，我们获取到的是一个数组，我们可以利用数组的方法，比如 forEach 循环出所有的 dom 元素。
2. 类的操作
classList 操作类
添加class类
oDiv.classList.add('类名');
删除class类
oDiv.classList.remove('类名');
检测是否含有这个类
oDiv.classList.contains('类名');
切换class类
oDiv.classList.toggle('类名'); // 有这个类时删除这个类，没有则添加这个类
3. data-* 自定义属性
通过 data-自定义属性名，给元素添加自定义属性名。添加之后就可以通过 JS 或者或者设置属性。
代码演示演示一下：
<body>
<div class="box" data-name="list"></div>
<script>
let oDiv = document.querySelector('.box');
oDiv.dataset.name = 'list1';
console.log(oDiv); // <div class="box" data-name="list1"></div>
oDiv.dataset.age = '18';
console.log(oDiv); // <div class="box" data-name="list1" data-age="18"></div>
</script>
</body>
由上面的代码得出，
当我们自定义属性名
oDiv.dataset.name = '新的属性值';
设置自定义属性
oDiv.dateset.自定义属性名 = '自定义属性值';
说了那么多，那么 data-* 到底有什么用呢，我们来自定义一个切换选项卡功能，来欣赏 data-* 独特的魅力：
<body>
<button class="btn" data-btn="list1">切换1</button>
<button class="btn" data-btn="list2">切换2</button>
<button class="btn" data-btn="list3">切换3</button>
<div class="list1">1</div>
<div class="list2">2</div>
<div class="list3">3</div>
<script>
let oBtn = document.querySelectorAll('.btn');
oBtn.forEach(ele => {
ele.onclick = function () {
let oDiv = document.querySelectorAll('div');
oDiv.forEach(ele => {
ele.style.display = 'none';
})
document.querySelector(`.${ele.dataset.btn}`).style.display = 'block';
}
})
</script>
</body>
具体效果可自己复制代码去运行查看。
文件读取
文件上传是通过 input type类型的 file 表单控件实现的，读取是通过 FileReader 构造函数实现的。
上传
通过表单控件实现
<input type="file" name="" />
读取
读取是通过 FileReader 构造函数实现的。
FileReader 常用方法
- readAsBinaryString：将文件读取为二进制编码
- readAsDataURL：将文件读取为DataURL
- readAsText：将文件读取为文本
FileReader 提供的事件
- onabort：读取文件中断时触发
- onerror：读取文件出错时触发
- onload：读取文件完成时触发，只在读取成功后触发
- onloadend：读取文件完成时触发，无论读取成功或者失败都会触发
- onloadstart：读取文件开始时触发
- onprogress：正在读取文件
下面来举一个案例：
<body>
<input type="file" />
<script>
// 获取 dom 元素
let fileInp = document.querySelector('input');
fileInp.onchange = function() {
// 获取文件
let file = this.files[0];
// 创建读取器
let reader = new FileReader();
// 开始读取
reader.readAsText(file);
// 监听文件读取状态
reader.onload = function() {
console.log(reader.result);
}
}
</script>
</body>
本地存储
HTML5 的 web 存储方式，是一个比 cookie 更好的存储方式，传统方式采用 document.cookie 来进行存储，但是由于它存储大小只有 4kb 左右，解析也复杂，所以 HTML5 给我们带来了 localStorage 和 sessionStorage 两种本地存储方式。
localStorage
特点：
- 永久存储
- 多窗口共享
- 容量大约 20MB
常用方法：
<script>
window.localStorage.setItem(key, value); // 设置存储内容
window.localStorage.getItem(key); // 获取存储内容
window.localStorage.removeItem(key); // 删除存储内容
window.localStorage.clear(); // 清空内容
</script>
sessionStorage
特点：
- 生命周期为关闭当前浏览器窗口，关闭当前窗口存储的数据就会消失
- 可以在同一窗口下访问，不会多窗口共享
- 数据大约为 5 MB
常用方法：
<script>
window.sessionStorage.setItem(key, value); // 设置存储内容
window.sessionStorage.getItem(key); // 获取存储内容
window.sessionStorage.removeItem(key); // 删除存储内容
window.sessionStorage.clear(); // 清空内容
</script>
注意：以上两种方法使用的 key 和 value 都必须是字符串。
两种存储方式的使用方法都是几乎相同的。
