HTML5中的DOM扩展（二）

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

往期回顾：HTML5中的DOM扩展（一）今天我们说一下HTMLDocument扩展及自定义数据属性

HTML5标准扩展了HTMLDocument类型，添加了一些功能，我们这里简单介绍一下三个常用的功能。

readyState属性有俩个值：

loading，表示文档正在加载，

complete，表示文档加载完成。

代码语言：javascript复制

    if(document.readyState == 'loading'){
        console.log('hi Jackson') //hi jackson
    }

这个在实际开发中很有用，我们可以把它当成一个指示器，判断当前文档是否加载完毕，如果加载完毕后进行什么操作。

这个属性就是指示当前浏览器处于什么渲染模式，一般渲染模式分为标准和混杂模式。

document.compateMode的值是CSS1Compat就是标准模式

document.compateMode的值是BackCompat就是混杂模式

我们也可以用分支if判断来进行操作。

HTMl5增加了document.head属性，它指向了文档的head元素，可以直接取得head元素。

代码语言：javascript复制

    let head = document.head;
    console.log(head); //<head>...</head>

简单说一下这个，用到的地方不多，document新增了characterSet属性来获取我们解析字符集的语言。

代码语言：javascript复制

    console.log(document.characterSet);// UTF-8

我们在写小程序的时候比如写个点击事件，通过这个点击来判断点击的内容是什么，可以使用data-xxx = {{xxx}}来操作，这个方法就来自这里，自定义属性对命名没有限制，data-后面的内容是什么都可以。

我们获取值的话可以使用dataset属性来访问，我这里写一下

代码语言：javascript复制

 <p id="username" data-name="jackson">我是Jackson</p>
    const name = document.querySelector('#username');
    console.log(name.dataset);

这样直接获取到了值了，非常的简便。自定义数据属性非常适合需要给元素附加某些数据的场景。真的非常好用，尤其是在点击后跳转页面发送当前点击的id。

之前我们说过关于窗口的话题，详情看这个BOM核心——window对象之窗口 (juejin.cn)。DOM规范之前没有涉及到的一个问题是如何滚动页面中的某一个区域，scrollIntoView就是干这个使的。

scrollIntoVIew()方法接受二个参数

一、alignToTop 它是一个布尔值

代码语言：javascript复制

true：滚动窗口和顶部视口对
false：滚动窗口和底部视口对齐

二、scrollIntoViewOptions 一个选项对象

这个方法可以用来我们设置打开页面自动滚动到某某地方，很像我们的锚点工具，但是它这个是滚动，能给用户带来更好体验。

0 人点赞