Document 属性文档类型定义 doctype通过 document.doctype 可以获取文档关联的文档类型定义。
返回的对象实现了 DocumentType 接口,使用 DOMImplementation.createDocumentType() 方法可以创建一个 DocumentType 类型的对象。
const doc = document.doctype;
console.log(doc.name);// html文档字符集 characterSet获取渲染当前文档的字符集
console.log(document.characterSet);// "UTF-8"文档标题 title获取当前文档的标题
// 设置文档标题document.title = 'Hello world!';文档加载状态 raedyStatedocument.readyState 描述文档的加载状态,当该状态属性值发生变化时,会在 document 对象上触发 readystatechange 事件。
可取值:
loading / 正在加载:文档仍在加载interactive / 可交互:文档已被解析,正在加载状态结束,但是诸如图像、样式表和框架之类的子资源仍在加载complete / 完成:文档和所有子资源已完成加载,表示 load 状态的事件即将被触发🌰 示例:
根据不同的加载状态处理不同逻辑
switch (document.readyState) { case 'loading': // 表示文档还在加载中,即处于“正在加载”状态 break; case 'interactive': // 文档已经结束了“正在加载”状态,DOM元素可以被访问 // 但是图像、样式表和框架等资源依然还在加载 const span = document.createElement('span'); span.textContent = 'A element'; document.body.appendChild(span); break; case 'complete': // 页面所有内容都已被完全加载 const cssRule = document.styleSheets[0].cssRules[0].cssText; console.log(`The first CSS rule is:${cssRule}`); break;}模拟 DOMContentLoaded / jQuery ready
document.onreadystatechange = function() { if (document.readyState === 'interactive') { initApplication(); }};模拟 load 事件
document.onreadystatechange = function() { if (document.readyState === 'complete') { initApplication(); }};标识节点指针当前文档直接子节点 documentElement通过 document.documentElement 获取当前文档的直接子节点。对于 HTML 文档,HTMLHtmlElement 对象一般代表该文档的 元素。
const rootElement = document.documentElement;const firstTier = rootElement.childNodes;
// firstTier 是由根元素的所有子节点组成的一个 NodeListfor (let i = 0; i < firstTier.length; i++) { // 使用根节点的每个子节点 // 如 firstTier[i]}使用这个只读属性能很方便的获取到任意文档的根元素。
当前文档主体节点 body通过 document.body 获取当前文档中的
元素或者