一、文档类型定义 doctype

通过 document.doctype 可以获取文档关联的文档类型定义。

返回的对象实现了 DocumentType 接口的DocumentType 对象

const doc = document.doctype;

属性：

entities: 返回包含有在 DTD 中所声明的实体的 NamedNodeMap。

internalSubset: 以字符串形式返回内部 DTD。

name: 返回 DTD 的名称。

notations: 返回包含 DTD 声明的符号的 NamedNodeMap。

systemId: 返回外部 DTD 的系统标识符。

创建一个 DocumentType 类型的对象

使用 DOMImplementation.createDocumentType() 方法可以创建一个 DocumentType 类型的对象。

语法：

var doctype = document.implementation.createDocumentType(qualifiedNameStr, publicId, systemId);

参数：

qualifiedNameStr: DOMString 类型的值，包含一个合规的名称，如 svg:svg。publicId:DOMString 类型的值，包含 PUBLIC 标识符。systemId:DOMString 类型的值，包含 SYSTEM 标识符。

示例：

var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');

var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt);

alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN

二、文档字符集 characterSet

获取渲染当前文档的字符集

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

三、文档标题 title

获取当前文档的标题

// 设置文档标题

document.title = 'Hello world!';

四、文档加载状态 raedyState

document.readyState 描述文档的加载状态，当该状态属性值发生变化时，会在 document 对象上触发 readystatechange 事件。

可取值：loading / 正在加载：文档仍在加载interactive / 可交互：文档已被解析，正在加载状态结束，但是诸如图像、样式表和框架之类的子资源仍在加载complete / 完成：文档和所有子资源已完成加载，表示 load 状态的事件即将被触发

示例：根据不同的加载状态处理不同逻辑

switch (document.readyState) {

// 表示文档还在加载中，即处于“正在加载”状态

case 'loading':

break;

// 文档已经结束了“正在加载”状态，DOM元素可以被访问

// 但是图像、样式表和框架等资源依然还在加载

case 'interactive':

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 是由根元素的所有子节点组成的一个 NodeList

for (let i = 0; i < firstTier.length; i++) {

// 使用根节点的每个子节点

// 如 firstTier[i]

}

当前文档主体节点 body

// 通过 document.body 获取当前文档中的 元素或者 元素。

const body = document.body;

console.log(body.nodeName);// 'BODY'

当前文档头部节点 head

// 通过 document.head 获取当前文档中的 元素。如果有多个 元素，则返回第一个。

const head = document.head;

console.log(head.nodeName);// 'HEAD'

当前页面焦点元素 activeElement

// 通过 document.activeElment 指向当前页面获得焦点的元素。

const activeElement = document.activeElement.tagName;

console.log(activeElement.nodeName);// 焦点元素节点名

文档加载完成后：document.activeElement 指向 document.body

文档加载期间：document.activeElement 指向 null

❗️使用该属性可以巧妙地判断文档是否加载完成。

⚠️注意： 该属性是只读的。

❗️提示： 为元素设置焦点，可以使用 element.focus() 方法。

❗️提示：可以使用 document.hasFocus() 方法来查看当前元素是否获取焦点。

六、文档元素集合

当前页面所有标签列表 all

const all = document.all;

解释：

all 集合返回对文档中所有HTML元素的引用。

all[]是一个多功能的类似数组的对象，它提供了对文档中所有HTML元素的访问。

all[]已经被Document接口的标准的getElementById()方法和getElementsByTagName()方法以及Document对象的- getElemenstByName()方法所取代，尽管如此，这个all[]数组在已有的代码中仍然使用。

all[]包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接就从数组中提取它们，然而更为常见的是使用all[]数组，根据它们的HTML属性name 或 id 来访问元素。如果多个元素拥有指定的name，将得到共享同一名称的元素数组。

用法：

h1

段落

console.log（）打印输出：

1）通过 index 获取元素：document.all[index]（index为要取的下标）

2）通过 id 属性获取元素：document.all.id

id不可以重复

如果id相同：

3）通过 name 属性来获取元素：document.all.name[index]（name可以重复）

当前页面超链接元素列表 links

获取当前文档的所有 元素

// 返回文档的链接数

document.links.length;

// 返回文档第一个链接

document.links[0];

提示： links 集合计算 标签和 标签。

当前页面样式表列表 styleSheets

document.styleSheets可以返回由网页中所用到的样式表组成的数组，但是不包括直接嵌在元素里的style。

const styleSheets = document.styleSheets;

当前页面脚本标签列表 scripts

返回页面中的