当前位置：首页 > news >正文

DOMDocumentType接口详解

news 2026/6/12 15:41:03

DOM DocumentType 概述

DocumentType 是 DOM（文档对象模型）中的一个接口，表示文档的文档类型声明（DOCTYPE）。它包含了与文档类型相关的信息，例如名称、公共标识符和系统标识符。DocumentType 对象通常作为文档的子节点存在，可以通过document.doctype访问。

DocumentType 的属性

DocumentType 接口提供了以下主要属性：

name：返回文档类型的名称。
publicId：返回文档类型的公共标识符。
systemId：返回文档类型的系统标识符。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

const doctype = document.doctype; console.log(doctype.name); // "html" console.log(doctype.publicId); // "-//W3C//DTD XHTML 1.0 Transitional//EN" console.log(doctype.systemId); // "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

检查文档类型是否存在

在 HTML5 中，DOCTYPE 声明简化为<!DOCTYPE html>，此时publicId和systemId为空字符串。

if (document.doctype) { console.log("DOCTYPE exists:", document.doctype.name); } else { console.log("No DOCTYPE found."); }

动态创建 DocumentType

可以通过document.implementation.createDocumentType()方法动态创建 DocumentType 对象，然后将其插入到文档中。

const newDoctype = document.implementation.createDocumentType( "html", "-//W3C//DTD XHTML 1.0 Strict//EN", "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" ); // 替换现有文档类型 document.replaceChild(newDoctype, document.doctype); console.log(document.doctype.name); // "html" console.log(document.doctype.publicId); // "-//W3C//DTD XHTML 1.0 Strict//EN"

操作 DocumentType 的注意事项

DocumentType 节点是只读的，无法直接修改其属性。如果需要更改文档类型，必须创建一个新的 DocumentType 并替换现有的。

// 以下操作会抛出错误 document.doctype.name = "xhtml"; // TypeError: Cannot set property name of [object DocumentType]

使用 DocumentType 进行文档验证

在某些场景下，可以通过检查 DocumentType 来验证文档是否符合特定标准。

function isHTML5Document() { return ( document.doctype && document.doctype.name === "html" && document.doctype.publicId === "" && document.doctype.systemId === "" ); } console.log(isHTML5Document()); // true for HTML5 documents

移除 DocumentType

如果需要移除文档的 DOCTYPE 声明，可以直接删除 DocumentType 节点。

if (document.doctype) { document.removeChild(document.doctype); console.log("DOCTYPE removed."); }

实际应用示例

以下是一个完整的示例，演示如何动态修改文档的 DOCTYPE 声明。

<!DOCTYPE html> <html> <head> <title>DocumentType Example</title> </head> <body> <script> // 检查当前文档类型 console.log("Current DOCTYPE:", document.doctype); // 创建新的 DocumentType const strictDoctype = document.implementation.createDocumentType( "html", "-//W3C//DTD XHTML 1.0 Strict//EN", "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" ); // 替换现有 DocumentType document.replaceChild(strictDoctype, document.doctype); console.log("New DOCTYPE:", document.doctype); </script> </body> </html>