跟着 MDN 学 HTML day_40：（DOMImplementation 接口完全解析）

一、什么是 DOMImplementation

DOMImplementation 接口代表了一个特殊的对象，它提供了不依赖于任何具体 Document 的方法。这意味着可以在不创建或操作实际 DOM 文档的情况下，进行一些与文档相关的底层操作。通过 Document.implementation 属性可以获得这个对象。

DOMImplementation 的核心价值在于它能够创建全新的文档对象，包括 XML 文档、HTML 文档以及文档类型定义。这一特性在动态生成文档、处理 XML 数据或构建离线 Web 应用时非常有用。

// 获取 DOMImplementation 对象
const implementation = document.implementation;
console.log(implementation instanceof DOMImplementation); // true

// 验证 DOMImplementation 的特性
console.log(typeof implementation.createDocument);   // function
console.log(typeof implementation.createDocumentType); // function
console.log(typeof implementation.createHTMLDocument); // function
console.log(typeof implementation.hasFeature);       // function

// 检查当前环境是否支持 DOMImplementation
if (document.implementation) {
  console.log('当前环境支持 DOMImplementation 接口');
} else {
  console.log('当前环境不支持 DOMImplementation 接口');
}

// 创建一个完全不依赖现有文档的新文档
const newDoc = implementation.createDocument(null, 'root', null);
console.log(newDoc.nodeName);        // #document
console.log(newDoc.documentElement.tagName); // root

二、createDocumentType 创建文档类型

createDocumentType 方法用于创建并返回一个 DocumentType 对象。这个方法接受三个参数：qualifiedName（限定名称）、publicId（公共标识符）和 systemId（系统标识符）。DocumentType 对象代表了文档的类型声明，也就是 DOCTYPE。

// 创建各种文档类型声明

// 示例一：创建 HTML 文档类型
const htmlDoctype = document.implementation.createDocumentType(
  'html',                    // qualifiedName
  '-//W3C//DTD HTML 4.01//EN',  // publicId
  'http://www.w3.org/TR/html4/strict.dtd'  // systemId
);

console.log(htmlDoctype.name);       // html
console.log(htmlDoctype.publicId);   // -//W3C//DTD HTML 4.01//EN
console.log(htmlDoctype.systemId);   // http://www.w3.org/TR/html4/strict.dtd

// 示例二：创建 XHTML 文档类型
const xhtmlDoctype = document.implementation.createDocumentType(
  'html',
  '-//W3C//DTD XHTML 1.0 Strict//EN',
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'
);

// 示例三：创建 XML 自定义文档类型
const customDoctype = document.implementation.createDocumentType(
  'book',
  '-//MYCOMPANY//DTD Book 1.0//EN',
  'http://www.mycompany.com/dtd/book.dtd'
);

// 示例四：使用文档类型创建完整文档
function createDocumentWithDoctype(doctype) {
  const doc = document.implementation.createDocument(
    'http://www.w3.org/1999/xhtml',
    'html',
    doctype
  );
  
  console.log('文档类型已设置:', doc.doctype.name);
  return doc;
}

const docWithDoctype = createDocumentWithDoctype(htmlDoctype);
console.log(docWithDoctype.doctype === htmlDoctype); // true

// 示例五：检查现有文档的文档类型
function getDocumentTypeInfo(doc) {
  const doctype = doc.doctype;
  if (doctype) {
    return {
      name: doctype.name,
      publicId: doctype.publicId,
      systemId: doctype.systemId
    };
  }
  return '当前文档没有文档类型声明';
}

const currentDocInfo = getDocumentTypeInfo(document);
console.log(currentDocInfo);

三、createDocument 创建 XML 文档

createDocument 方法用于创建并返回一个 XMLDocument 对象。这是创建全新 XML 文档的核心方法。它接受三个参数：namespaceURI（命名空间 URI）、qualifiedName（限定名称）和 doctype（文档类型对象）。通过这个方法可以动态生成 XML 结构，适用于数据交换、配置文件处理等场景。

// 创建基本的 XML 文档

// 示例一：创建最简单的 XML 文档
const xmlDoc = document.implementation.createDocument(null, 'root', null);
console.log(xmlDoc.nodeType);          // 9 (DOCUMENT_NODE)
console.log(xmlDoc.documentElement.tagName); // root

// 示例二：创建带命名空间的 XML 文档
const svgNS = 'http://www.w3.org/2000/svg';
const svgDoc = document.implementation.createDocument(svgNS, 'svg', null);
const svgRoot = svgDoc.documentElement;
svgRoot.setAttribute('width', '100');
svgRoot.setAttribute('height', '100');

// 添加子元素
const circle = svgDoc.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
circle.setAttribute('fill', 'red');
svgRoot.appendChild(circle);

console.log(svgDoc.documentElement.outerHTML);

// 示例三：创建带文档类型的 XML 文档
const bookDoctype = document.implementation.createDocumentType(
  'catalog',
  '-//BOOKS//DTD Catalog 1.0//EN',
  'catalog.dtd'
);

const bookDoc = document.implementation.createDocument(
  'http://www.example.com/books',
  'catalog',
  bookDoctype
);

// 构建复杂的 XML 结构
function buildBookXML(doc) {
  const catalog = doc.documentElement;
  
  const book = doc.createElementNS('http://www.example.com/books', 'book');
  book.setAttribute('id', '001');
  
  const title = doc.createElementNS('http://www.example.com/books', 'title');
  title.textContent = 'JavaScript 高级程序设计';
  
  const author = doc.createElementNS('http://www.example.com/books', 'author');
  author.textContent = 'Nicholas C. Zakas';
  
  const price = doc.createElementNS('http://www.example.com/books', 'price');
  price.textContent = '99.00';
  
  book.appendChild(title);
  book.appendChild(author);
  book.appendChild(price);
  catalog.appendChild(book);
  
  return doc;
}

const completedBookDoc = buildBookXML(bookDoc);
console.log(new XMLSerializer().serializeToString(completedBookDoc));

// 示例四：XML 文档序列化和解析
function xmlDocumentToString(xmlDoc) {
  const serializer = new XMLSerializer();
  return serializer.serializeToString(xmlDoc);
}

function stringToXMLDocument(xmlString) {
  const parser = new DOMParser();
  return parser.parseFromString(xmlString, 'application/xml');
}

// 使用示例
const xmlString = xmlDocumentToString(xmlDoc);
console.log('序列化后的 XML:', xmlString);

const parsedDoc = stringToXMLDocument(xmlString);
console.log('解析后的根元素:', parsedDoc.documentElement.tagName);

四、createHTMLDocument 创建 HTML 文档

createHTMLDocument 方法用于创建并返回一个 HTML Document 对象。这个方法可以接受一个可选的 title 参数，用于设置新文档的标题。创建的 HTML 文档是一个完整的文档对象，包含 html、head、body 等标准结构，可以像操作普通网页一样操作它。

// 创建各种 HTML 文档

// 示例一：创建最基本的 HTML 文档
const htmlDoc = document.implementation.createHTMLDocument();
console.log(htmlDoc.title);              // 空字符串
console.log(htmlDoc.documentElement.tagName); // HTML
console.log(htmlDoc.head);               // HTMLHeadElement
console.log(htmlDoc.body);               // HTMLBodyElement

// 示例二：创建带标题的 HTML 文档
const titledDoc = document.implementation.createHTMLDocument('我的新文档');
console.log(titledDoc.title);  // 我的新文档

// 示例三：动态构建完整的 HTML 内容
function createRichHTMLDocument(title, content) {
  const doc = document.implementation.createHTMLDocument(title);
  
  // 添加样式
  const style = doc.createElement('style');
  style.textContent = `
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .header {
      background-color: #333;
      color: white;
      padding: 20px;
      border-radius: 5px;
    }
    .content {
      background-color: white;
      padding: 20px;
      margin-top: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
  `;
  doc.head.appendChild(style);
  
  // 构建页面结构
  const header = doc.createElement('div');
  header.className = 'header';
  const h1 = doc.createElement('h1');
  h1.textContent = title;
  header.appendChild(h1);
  
  const contentDiv = doc.createElement('div');
  contentDiv.className = 'content';
  
  if (typeof content === 'string') {
    contentDiv.innerHTML = content;
  } else if (content instanceof HTMLElement) {
    contentDiv.appendChild(content);
  }
  
  doc.body.appendChild(header);
  doc.body.appendChild(contentDiv);
  
  return doc;
}

const richDoc = createRichHTMLDocument(
  '我的应用',
  '<p>这是一个动态创建的 HTML 文档</p><ul><li>功能一</li><li>功能二</li></ul>'
);
console.log(richDoc.title);
console.log(richDoc.body.innerHTML);

// 示例四：在新窗口或 iframe 中使用创建的文档
function openDocumentInNewWindow(doc) {
  const serializer = new XMLSerializer();
  const htmlString = serializer.serializeToString(doc);
  const newWindow = window.open();
  newWindow.document.write(htmlString);
  newWindow.document.close();
  return newWindow;
}

// 示例五：复制当前文档结构
function cloneCurrentDocument() {
  const clonedDoc = document.implementation.createHTMLDocument('克隆文档');
  const currentContent = document.documentElement.cloneNode(true);
  clonedDoc.replaceChild(
    clonedDoc.importNode(currentContent, true),
    clonedDoc.documentElement
  );
  return clonedDoc;
}

const cloned = cloneCurrentDocument();
console.log('克隆文档标题:', cloned.title);

五、hasFeature 特性检测方法

hasFeature 方法用于返回一个布尔值，表示是否支持给定的特性。需要注意的是，这个方法在现代浏览器中已经不可靠，主要用于兼容性目的。除了 SVG 相关的查询外，它几乎总是返回 true。旧版浏览器的行为非常不一致，因此不推荐依赖这个方法进行精确的特性检测。

// hasFeature 方法的使用和局限性

// 示例一：测试各种特性
const features = [
  ['HTML', '1.0'],
  ['HTML', '2.0'],
  ['HTML', '3.0'],
  ['HTML', '4.0'],
  ['HTML', '5.0'],
  ['XML', '1.0'],
  ['Core', '2.0'],
  ['Views', '2.0'],
  ['StyleSheets', '2.0'],
  ['CSS', '2.0'],
  ['SVG', '1.0'],
  ['SVG', '1.1']
];

console.log('=== DOMImplementation.hasFeature 检测结果 ===');
features.forEach(([feature, version]) => {
  const supported = document.implementation.hasFeature(feature, version);
  console.log(`${feature} ${version}: ${supported}`);
});

// 示例二：现代浏览器中 hasFeature 的局限性
function demonstrateHasFeatureLimitations() {
  // 几乎所有特性都会返回 true
  const alwaysTrue = document.implementation.hasFeature('NonExistentFeature', '1.0');
  console.log('不存在的特性也返回:', alwaysTrue); // 通常为 true
  
  // 这与实际支持情况不符
  const fakeFeature = document.implementation.hasFeature('FakeFeature', '99.0');
  console.log('虚假特性检测结果:', fakeFeature);
}

demonstrateHasFeatureLimitations();

// 示例三：推荐的现代特性检测方法
function modernFeatureDetection() {
  const features = {
    // 检测 DOM 操作支持
    querySelector: typeof document.querySelector === 'function',
    
    // 检测 localStorage 支持
    localStorage: (() => {
      try {
        localStorage.setItem('test', 'test');
        localStorage.removeItem('test');
        return true;
      } catch {
        return false;
      }
    })(),
    
    // 检测 Canvas 支持
    canvas: (() => {
      const canvas = document.createElement('canvas');
      return !!(canvas.getContext && canvas.getContext('2d'));
    })(),
    
    // 检测 Web Worker 支持
    worker: typeof Worker !== 'undefined',
    
    // 检测 WebSocket 支持
    websocket: typeof WebSocket !== 'undefined',
    
    // 检测 Service Worker 支持
    serviceWorker: 'serviceWorker' in navigator,
    
    // 检测 Geolocation 支持
    geolocation: 'geolocation' in navigator
  };
  
  console.table(features);
  return features;
}

const detectionResult = modernFeatureDetection();

// 示例四：针对特定功能的降级处理
function safeUseModernAPI(featureName, fallback) {
  const support = modernFeatureDetection()[featureName];
  
  if (support) {
    console.log(`${featureName} 支持，使用现代 API`);
    return true;
  }
  
  console.warn(`${featureName} 不支持，使用降级方案`);
  if (typeof fallback === 'function') {
    fallback();
  }
  return false;
}

// 使用示例
safeUseModernAPI('localStorage', () => {
  console.log('使用内存存储代替 localStorage');
});

// 示例五：对比 hasFeature 与现代检测
function compareDetectionMethods() {
  // hasFeature 的方式
  const hasSVGFromFeature = document.implementation.hasFeature('SVG', '1.1');
  
  // 现代检测方式
  const hasSVGModern = (() => {
    const svg = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'svg'
    );
    return svg instanceof SVGElement;
  })();
  
  console.log('hasFeature 检测 SVG:', hasSVGFromFeature);
  console.log('现代方法检测 SVG:', hasSVGModern);
  console.log('结论: hasFeature 在现代浏览器中不可靠');
}

compareDetectionMethods();

六、综合应用实战示例

将 DOMImplementation 的各种方法结合起来，可以完成许多实用的功能。以下是一些综合应用示例，展示了如何在实际项目中灵活运用这些方法。

// 综合示例一：动态创建完整的 HTML 应用模板
function createApplicationTemplate(appName, version) {
  // 创建文档类型
  const doctype = document.implementation.createDocumentType(
    'html',
    '',
    ''
  );
  
  // 创建 HTML 文档
  const doc = document.implementation.createDocument(
    'http://www.w3.org/1999/xhtml',
    'html',
    doctype
  );
  
  // 添加语言属性
  const html = doc.documentElement;
  html.setAttribute('lang', 'zh-CN');
  
  // 创建 head 和 body
  const head = doc.createElement('head');
  const body = doc.createElement('body');
  html.appendChild(head);
  html.appendChild(body);
  
  // 设置 meta 和标题
  const meta = doc.createElement('meta');
  meta.setAttribute('charset', 'UTF-8');
  head.appendChild(meta);
  
  const title = doc.createElement('title');
  title.textContent = `${appName} v${version}`;
  head.appendChild(title);
  
  // 添加视图窗口设置
  const viewport = doc.createElement('meta');
  viewport.setAttribute('name', 'viewport');
  viewport.setAttribute('content', 'width=device-width, initial-scale=1.0');
  head.appendChild(viewport);
  
  // 添加应用容器
  const appContainer = doc.createElement('div');
  appContainer.id = 'app';
  body.appendChild(appContainer);
  
  return doc;
}

const appTemplate = createApplicationTemplate('我的应用', '1.0.0');
console.log('应用模板创建成功');

// 综合示例二：XML 数据处理工具
class XMLDataProcessor {
  constructor(rootTag) {
    this.doc = document.implementation.createDocument(null, rootTag, null);
  }
  
  // 添加元素
  addElement(parentTag, tagName, textContent, attributes = {}) {
    const parent = this.findOrCreatePath(parentTag);
    const element = this.doc.createElement(tagName);
    element.textContent = textContent;
    
    Object.entries(attributes).forEach(([key, value]) => {
      element.setAttribute(key, value);
    });
    
    parent.appendChild(element);
    return element;
  }
  
  // 查找或创建路径
  findOrCreatePath(path) {
    const parts = path.split('/');
    let current = this.doc.documentElement;
    
    for (let i = 1; i < parts.length; i++) {
      let child = Array.from(current.children).find(
        c => c.tagName === parts[i]
      );
      
      if (!child) {
        child = this.doc.createElement(parts[i]);
        current.appendChild(child);
      }
      
      current = child;
    }
    
    return current;
  }
  
  // 导出 XML 字符串
  exportToString() {
    const serializer = new XMLSerializer();
    return serializer.serializeToString(this.doc);
  }
  
  // 查询数据
  query(selector) {
    return Array.from(this.doc.querySelectorAll(selector));
  }
}

// 使用示例
const processor = new XMLDataProcessor('database');
processor.addElement('database/users', 'user', '张三', { id: '001', role: 'admin' });
processor.addElement('database/users', 'user', '李四', { id: '002', role: 'editor' });
processor.addElement('database/settings', 'theme', 'dark');

console.log(processor.exportToString());
const users = processor.query('user');
console.log(`找到 ${users.length} 个用户`);

// 综合示例三：HTML 文档生成器
class HTMLDocumentGenerator {
  constructor(title, styles = '') {
    this.doc = document.implementation.createHTMLDocument(title);
    if (styles) {
      const styleElem = this.doc.createElement('style');
      styleElem.textContent = styles;
      this.doc.head.appendChild(styleElem);
    }
  }
  
  addStyles(styles) {
    const styleElem = this.doc.createElement('style');
    styleElem.textContent = styles;
    this.doc.head.appendChild(styleElem);
  }
  
  addScript(scriptContent) {
    const script = this.doc.createElement('script');
    script.textContent = scriptContent;
    this.doc.body.appendChild(script);
  }
  
  setContent(element, content) {
    const target = this.doc.querySelector(element);
    if (target) {
      target.innerHTML = content;
    }
  }
  
  getHTMLString() {
    const serializer = new XMLSerializer();
    return serializer.serializeToString(this.doc);
  }
  
  openInNewTab() {
    const htmlString = this.getHTMLString();
    const newWindow = window.open();
    newWindow.document.write(htmlString);
    newWindow.document.close();
    return newWindow;
  }
}

// 使用生成器创建报告页面
const reportGenerator = new HTMLDocumentGenerator(
  '数据报告',
  `
    body { font-family: Arial; margin: 20px; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #4CAF50; color: white; }
  `
);

const body = reportGenerator.doc.body;
const h1 = reportGenerator.doc.createElement('h1');
h1.textContent = '销售数据报告';
body.appendChild(h1);

const table = reportGenerator.doc.createElement('table');
const thead = reportGenerator.doc.createElement('thead');
thead.innerHTML = '<tr><th>产品</th><th>销量</th><th>金额</th></tr>';
table.appendChild(thead);

const tbody = reportGenerator.doc.createElement('tbody');
const data = [
  ['产品 A', '150', '¥15,000'],
  ['产品 B', '230', '¥23,000'],
  ['产品 C', '98', '¥9,800']
];

data.forEach(row => {
  const tr = reportGenerator.doc.createElement('tr');
  row.forEach(cell => {
    const td = reportGenerator.doc.createElement('td');
    td.textContent = cell;
    tr.appendChild(td);
  });
  tbody.appendChild(tr);
});

table.appendChild(tbody);
body.appendChild(table);

console.log('报告已生成');
console.log(reportGenerator.getHTMLString().substring(0, 500) + '...');

DOMImplementation 接口提供了强大的文档创建能力，使得动态生成 XML 和 HTML 文档变得简单高效。虽然 hasFeature 方法已不推荐使用，但 createDocument、createDocumentType 和 createHTMLDocument 依然是处理文档生成需求的核心工具。掌握这些方法，可以更灵活地处理各种需要动态创建文档的场景。

---

想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗？
持续关注，后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容，带你从新手快速进阶，轻松搞定前端开发！