HTML5 扩展了 HTMLDocument 类型

HTMLDocument 扩展

​ HTML5 扩展了 HTMLDocument 类型,增加了更多功能。与其他 HTML5 定义的 DOM 扩展一样, 这些变化同样基于所有浏览器事实上都已经支持的专有扩展。为此,即使这些扩展的标准化相对较晚, 很多浏览器也早就实现了相应的功能。

readyState 属性

​ readyState 是 IE4 最早添加到 document 对象上的属性,后来其他浏览器也都依葫芦画瓢地支持这个属性。最终,HTML5 将这个属性写进了标准。document.readyState 属性有两个可能的值:

  • loading,表示文档正在加载;
  • complete,表示文档加载完成。

​ 实际开发中,最好是把 document.readState 当成一个指示器,以判断文档是否加载完毕。在这个属性得到广泛支持以前,通常要依赖 onload 事件处理程序设置一个标记,表示文档加载完了。这个属性的基本用法如下:

js 复制代码
if (document.readyState == "complete"){ 
    // 执行操作
} 

compatMode 属性

​ 自从 IE6 提供了以标准或混杂模式渲染页面的能力之后,检测页面渲染模式 成为一个必要的需求。 IE 为 document 添加了 compatMode 属性,这个属性唯一的任务是指示浏览器当前处于什么渲染模式。 如下面的例子所示,标准模式下 document.compatMode 的值是"CSS1Compat",而在混杂模式下, document.compatMode 的值是"BackCompat":

js 复制代码
if (document.compatMode == "CSS1Compat"){ 
    console.log("Standards mode"); // 标准模式
} else {
    console.log("Quirks mode");  // 混杂模式
} 

​ HTML5 最终也把 compatMode 属性的实现标准化了。

head 属性

​ 作为对 document.body(指向文档的元素)的补充,HTML5 增加了 document.head 属性,指向文档的元素。可以像下面这样直接取得元素:

js 复制代码
let head = document.head;
相关推荐
酉鬼女又兒18 小时前
零基础入门前端弹性布局(Flexbox)实战:结合 Class 与 ID 选择器(可用于备赛蓝桥杯Web开发应用)
前端·css·蓝桥杯·html·html5
张3蜂1 天前
HTML5语义化标签:现代网页的骨架与灵魂
前端·html·html5
我命由我123451 天前
JS 开发问题:url.includes is not a function
开发语言·前端·javascript·html·ecmascript·html5·js
kyriewen112 天前
Sass:让 CSS 从手工作坊迈入工业时代
前端·javascript·css·html·css3·sass·html5
kyriewen112 天前
Sass 进阶:当 CSS 学会了编程,变量函数循环全都安排上
前端·javascript·css·less·css3·sass·html5
我命由我123454 天前
Element Plus - 在 el-select 的每个选项右侧添加按钮
前端·javascript·vue.js·前端框架·ecmascript·html5·js
酉鬼女又兒4 天前
HTML基础实例样式详解零基础快速入门Web开发(可备赛蓝桥杯Web应用开发赛道) 助力快速拿奖
前端·javascript·职场和发展·蓝桥杯·html·html5·web
我命由我123455 天前
Element Plus - Cascader 观察记录(基本使用、动态加载、动态加载下的异常环境)
开发语言·前端·javascript·vue.js·typescript·html5·js
我命由我123455 天前
Element Plus - Form 的 resetField 方法观察记录
开发语言·前端·javascript·vue.js·html·html5·js
狂奔蜗牛飙车5 天前
Day3:HTML5 基础标签:h1-h6、p、hr、br、a、img
前端·html·html5·html常用标签的使用方法