HTML5中的DOM扩展（二）
theme: channing-cyan
这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战
往期回顾：HTML5中的DOM扩展（一） 今天我们说一下HTMLDocument扩展及自定义数据属性
HTMLDocument扩展
HTML5标准扩展了HTMLDocument类型，添加了一些功能，我们这里简单介绍一下三个常用的功能。
readyState属性
readyState属性有俩个值：
loading，表示文档正在加载，
complete，表示文档加载完成。
if(document.readyState == 'loading'){
console.log('hi Jackson') //hi jackson
}这个在实际开发中很有用，我们可以把它当成一个指示器，判断当前文档是否加载完毕，如果加载完毕后进行什么操作。
compatMode属性
这个属性就是指示当前浏览器处于什么渲染模式，一般渲染模式分为标准和混杂模式。
document.compateMode的值是CSS1Compat就是标准模式
document.compateMode的值是BackCompat就是混杂模式
我们也可以用分支if判断来进行操作。
head属性
HTMl5增加了document.head属性，它指向了文档的head元素，可以直接取得head元素。
let head = document.head;
console.log(head); //<head>...</head>字符集属性
简单说一下这个，用到的地方不多，document新增了characterSet属性来获取我们解析字符集的语言。
console.log(document.characterSet);// UTF-8自定义数据属性
我们在写小程序的时候比如写个点击事件，通过这个点击来判断点击的内容是什么，可以使用data-xxx = {{xxx}}来操作，这个方法就来自这里，自定义属性对命名没有限制，data-后面的内容是什么都可以。
我们获取值的话可以使用dataset属性来访问，我这里写一下
<p id="username" data-name="jackson">我是Jackson</p>
const name = document.querySelector('#username');
console.log(name.dataset);
这样直接获取到了值了，非常的简便。自定义数据属性非常适合需要给元素附加某些数据的场景。真的非常好用，尤其是在点击后跳转页面发送当前点击的id。
scrollIntoVIew()
之前我们说过关于窗口的话题，详情看这个BOM核心——window对象之窗口 (juejin.cn)。DOM规范之前没有涉及到的一个问题是如何滚动页面中的某一个区域，scrollIntoView就是干这个使的。
scrollIntoVIew()方法接受二个参数
一、alignToTop 它是一个布尔值
true：滚动窗口和顶部视口对
false：滚动窗口和底部视口对齐二、scrollIntoViewOptions 一个选项对象
- behavior 定义过度动画，可以取值为smooth和auto
- block 定义垂直方向的对齐，有四个值 start center end nearest
- inline 定义水平方向的对齐，和上面四个值一样。 不传参的话相当于alignToTop等于true
这个方法可以用来我们设置打开页面自动滚动到某某地方，很像我们的锚点工具，但是它这个是滚动，能给用户带来更好体验。