JavaScript中Document对象常见的的方法分析

        Document对象的方法是JavaScript操作DOM的核心手段，它能让开发者精准获取、创建、修改页面元素，还能绑定事件、管理样式与文档结构，是实现网页动态交互、内容更新与布局调整的关键，支撑着前端页面从静态展示到动态交互的转变，是前端开发中实现丰富用户体验的基础工具。

        在现代前端开发中，Document对象的方法依然是各类框架底层交互的核心依托，即便框架封装了更上层的API，其本质仍依赖Document方法与浏览器DOM进行通信。未来随着Web标准的持续演进，它的方法会更侧重安全与语义化，比如在跨域交互、隐私保护层面的限制会更严格，同时也会进一步强化与Web组件、渐进式Web应用（PWA）的协同能力，更好地适配多端、离线等复杂场景，成为构建下一代Web应用的重要基础。

          下面，对JavaScript中Document对象常见的方法进行逐一分析讲解：

第一部分：事件处理方法（4个）

1、document.addEventListener()

• 含义：为文档添加事件监听器，当指定事件发生时执行回调函数。

• 词源：Add（添加）+ Event（事件）+ Listener（监听器）。

• 语法：document.addEventListener(type, listener, options);

• 参数及说明：

  • type：事件类型字符串，如 'click'、'keydown'、'scroll'。

  • listener：事件触发时要执行的回调函数，接收一个事件对象参数。

  • options（可选）：可以是布尔值或对象。

    • 如果是布尔值：true 表示在捕获阶段触发，false 表示在冒泡阶段触发。

    • 如果是对象，可以包含：

      • capture：布尔值，是否在捕获阶段触发。

      • once：布尔值，是否只触发一次后自动移除。

      • passive：布尔值，是否永不调用 preventDefault()。

• 例子：

  // 基本用法
  document.addEventListener('click', function(event) {
  console.log('文档被点击了', event.clientX, event.clientY);
  });

  // 只触发一次的监听器
  document.addEventListener('DOMContentLoaded', function() {
  console.log('页面加载完成，只触发一次');
  }, { once: true });

  // 使用箭头函数和捕获阶段
  document.addEventListener('scroll', () => {
  console.log('页面滚动中', window.scrollY);
  }, { capture: true });

2、document.removeEventListener()

• 含义：移除之前通过 addEventListener 添加的事件监听器。

• 词源：Remove（移除）+ Event（事件）+ Listener（监听器）。

• 语法：document.removeEventListener(type, listener, options);

• 参数及说明：

  • type：要移除的事件类型。

  • listener：要移除的回调函数（必须是同一个函数引用）。

  • options（可选）：必须与添加时的配置一致才能正确移除。

  • 重要：如果添加时使用的是匿名函数，则无法移除。

• 例子：

  // 定义命名函数才能移除
  function handleClick(event) {
  console.log('点击了文档');
  }

  // 添加监听器
  document.addEventListener('click', handleClick);

  // 后续移除监听器
  document.removeEventListener('click', handleClick);

  // 错误示范：无法移除匿名函数
  document.addEventListener('click', function() {
  console.log('这个监听器无法被移除');
  });
  // document.removeEventListener('click', …) // 无法移除上面的匿名函数

3、document.dispatchEvent()

• 含义：向文档派发一个自定义事件，触发相应的事件监听器。

• 词源：Dispatch（派遣、发送）+ Event（事件）。

• 语法：let result = document.dispatchEvent(event);

• 参数及说明：

  • event：要派发的事件对象（可以是 new Event() 创建的自定义事件，也可以是系统事件）。

  • 返回值：布尔值。如果事件没有被任何监听器调用 preventDefault() 则返回 true，否则返回 false。

• 例子：

  // 创建并派发自定义事件
  let customEvent = new Event('userLogin');

  // 监听自定义事件
  document.addEventListener('userLogin', function(e) {
  console.log('用户登录事件触发', e.type);
  document.body.style.backgroundColor = 'lightgreen';
  });

  // 派发事件
  let result = document.dispatchEvent(customEvent);
  console.log('事件派发成功？', result); // true

  // 带数据的自定义事件
  let dataEvent = new CustomEvent('dataUpdate', {
  detail: { name: '张三', age: 25 }
  });

  document.addEventListener('dataUpdate', function(e) {
  console.log('接收到的数据：', e.detail); // { name: '张三', age: 25 }
  });

  document.dispatchEvent(dataEvent);

4、document.execCommand()

• 含义：执行命令操作可编辑区域的内容（已废弃，但仍在部分浏览器中支持）。

• 词源：Exec（执行）+ Command（命令）。

• 语法：let result = document.execCommand(command, showUI, value);

• 参数及说明：

  • command：命令名称字符串。常用命令：

    • 'bold'：加粗选中文本

    • 'italic'：斜体

    • 'underline'：下划线

    • 'copy'：复制选中内容

    • 'cut'：剪切选中内容

    • 'paste'：粘贴

    • 'createLink'：创建链接

    • 'insertImage'：插入图片

    • 'undo'：撤销

    • 'redo'：重做

  • showUI：布尔值，是否显示命令的用户界面（通常设为 false）。

  • value：命令需要的参数值（如链接 URL、图片地址等）。

  • 返回值：布尔值，表示命令是否执行成功。

• 例子：

  // 需要有一个可编辑区域
  // <div contenteditable="true" id="editor">这是可编辑文本</div>

  let editor = document.getElementById('editor');
  editor.focus(); // 先让编辑器获得焦点

  // 将选中文本加粗
  let success = document.execCommand('bold', false, null);
  console.log('加粗成功？', success);

  // 创建链接
  document.execCommand('createLink', false, 'https://example.com');

  // 复制选中的内容
  document.execCommand('copy');

  // 注意：现代开发推荐使用 Clipboard API 替代
  // navigator.clipboard.writeText('要复制的文本');

第二部分：节点导入与采用方法（2个）

5、document.adoptNode()

• 含义：从其他文档中采用一个节点，使其归属于当前文档（原文档中的节点会被移除）。

• 词源：Adopt（采用、收养）+ Node（节点）。

• 语法：let node = document.adoptNode(externalNode);

• 参数及说明：

  • externalNode：来自其他文档的节点（如 iframe 中的元素）。

  • 返回值：被采用后的节点，其 ownerDocument 变为当前文档。

  • 注意：采用后，原文档中的节点会被移除。

• 例子：

  // 假设页面中有一个 iframe
  // <iframe id="myIframe" src="other.html"></iframe>

  let iframe = document.getElementById('myIframe');
  let iframeDoc = iframe.contentDocument;

  // 获取 iframe 中的一个按钮
  let iframeButton = iframeDoc.getElementById('btnFromIframe');

  // 将按钮从 iframe 文档采用到主文档
  let adoptedBtn = document.adoptNode(iframeButton);

  // 现在按钮已从 iframe 中移除，需要手动添加到主文档
  document.body.appendChild(adoptedBtn);

  console.log('按钮已移动到主文档');

6、document.importNode()

• 含义：从其他文档导入一个节点到当前文档（创建副本，原节点保留）。

• 词源：Import（导入）+ Node（节点）。

• 语法：let node = document.importNode(externalNode, deep);

• 参数及说明：

  • externalNode：来自其他文档的节点。

  • deep：布尔值。true 表示深度导入（包括所有子节点），false 只导入节点本身。

  • 返回值：导入后的节点副本，原节点不受影响。

• 例子：

  // 假设有 iframe
  let iframe = document.getElementById('myIframe');
  let iframeDoc = iframe.contentDocument;

  // 获取 iframe 中的一个复杂元素
  let iframeDiv = iframeDoc.getElementById('complexDiv');

  // 深度导入该元素及其所有子节点
  let importedDiv = document.importNode(iframeDiv, true);

  // 将导入的副本添加到主文档
  document.body.appendChild(importedDiv);

  // iframe 中的原元素仍然存在
  console.log('原节点仍在 iframe 中，副本已添加到主文档');

第三部分：节点操作方法（10个）

7、document.appendChild()

• 含义：向文档节点的子节点列表末尾添加一个节点。

• 词源：Append（追加）+ Child（孩子）。

• 语法：document.appendChild(aChild);

• 参数及说明：

  • aChild：要追加的节点对象。

  • 重要警告：通常不直接对 document 使用 appendChild，因为文档只能有一个根元素 <html>。如果尝试添加另一个根元素会出错。

• 例子：

  // 错误示范：不能给 document 直接添加子节点
  // let newDiv = document.createElement('div');
  // document.appendChild(newDiv); // 会报错

  // 正确用法：通常对 document.body 或其他元素使用
  let newDiv = document.createElement('div');
  document.body.appendChild(newDiv); // ✅ 正确

8、document.cloneNode()

• 含义：克隆文档节点本身（不是克隆整个页面内容）。

• 词源：Clone（克隆）+ Node（节点）。

• 语法：let clonedDoc = document.cloneNode(deep);

• 参数及说明：

  • deep：布尔值。true 表示深度克隆（包括所有子节点），false 只克隆文档节点本身。

  • 返回值：克隆后的文档节点副本。

• 例子：

  // 浅克隆 – 只克隆 document 对象本身，不包含子节点
  let docShallow = document.cloneNode(false);
  console.log(docShallow.nodeName); // '#document'
  console.log(docShallow.hasChildNodes()); // false（没有子节点）

  // 深克隆 – 克隆整个文档结构
  let docDeep = document.cloneNode(true);
  console.log(docDeep.childNodes.length); // 包含 doctype 和 html 等
  // 注意：克隆的文档不在页面中显示，只是一个内存中的副本

9、document.insertBefore()

• 含义：在参考节点之前插入一个节点。

• 词源：Insert（插入）+ Before（在…之前）。

• 语法：let insertedNode = parentNode.insertBefore(newNode, referenceNode);

• 参数及说明：

  • newNode：要插入的新节点。

  • referenceNode：参考节点（新节点将插入到这个节点之前）。

  • 返回值：被插入的节点。

• 例子：

  // 通常对具体元素使用，而不是 document
  let parent = document.getElementById('parentDiv');
  let firstChild = parent.firstElementChild;

  let newSpan = document.createElement('span');
  newSpan.textContent = '插入的span';

  // 在第一个子元素之前插入新span
  parent.insertBefore(newSpan, firstChild);

10、document.replaceChild()

• 含义：用新节点替换父节点中的一个子节点。

• 词源：Replace（替换）+ Child（孩子）。

• 语法：let oldChild = parentNode.replaceChild(newChild, oldChild);

• 参数及说明：

  • newChild：新节点。

  • oldChild：要被替换的旧子节点。

  • 返回值：被替换的旧节点。

• 例子：

  let parent = document.getElementById('container');
  let oldP = document.getElementById('oldParagraph');

  let newDiv = document.createElement('div');
  newDiv.textContent = '替换后的新内容';
  newDiv.className = 'new-content';

  // 用 newDiv 替换 oldP
  let removed = parent.replaceChild(newDiv, oldP);
  console.log('已移除的节点：', removed);

11、document.removeChild()

• 含义：从父节点中移除一个子节点。

• 词源：Remove（移除）+ Child（孩子）。

• 语法：let oldChild = parentNode.removeChild(child);

• 参数及说明：

  • child：要移除的子节点。

  • 返回值：被移除的节点（仍存在于内存中，可以后续添加）。

• 例子：

  let parent = document.getElementById('list');
  let lastItem = document.getElementById('lastItem');

  // 移除最后一个项目
  let removedItem = parent.removeChild(lastItem);
  console.log('已移除：', removedItem);

  // 稍后可以重新添加
  parent.appendChild(removedItem);

12、document.hasChildNodes()

• 含义：检查文档节点是否有子节点。

• 词源：Has（有）+ Child（孩子）+ Nodes（节点）。

• 语法：let hasChildren = document.hasChildNodes();

• 参数及说明：无参数。

• 返回值：布尔值，有子节点返回 true，否则返回 false。

• 例子：

  console.log(document.hasChildNodes()); // 通常返回 true（有 doctype 和 html）

  // 检查 body 是否有子节点
  console.log(document.body.hasChildNodes()); // 取决于页面内容

13、document.normalize()

• 含义：规范化文档，合并相邻的文本节点并删除空的文本节点。

• 词源：Normalize（标准化、规范化）。

• 语法：document.normalize();

• 参数及说明：无参数。清理文档树结构。

• 例子：

  let div = document.createElement('div');
  div.appendChild(document.createTextNode('Hello'));
  div.appendChild(document.createTextNode(' '));
  div.appendChild(document.createTextNode('World'));

  console.log(div.childNodes.length); // 3（三个文本节点）

  div.normalize();
  console.log(div.childNodes.length); // 1（合并成 "Hello World"）

14、document.prepend()

• 含义：在文档的第一个子节点前插入一组节点或字符串。

• 词源：Prepend（在前面附加）。

• 语法：document.prepend(…nodesOrStrings);

• 参数及说明：

  • 可以接受多个参数，可以是节点对象或字符串。

  • 字符串会自动转换为文本节点。

  • 注意：直接对 document 使用 prepend 通常不建议，因为文档只能有一个根元素。这个方法是继承自 ParentNode 接口。

• 例子：

  // 在文档最前面添加注释（不推荐直接对 document 使用）
  // 更好的用法是对具体元素使用
  let list = document.getElementById('myList');
  let firstItem = document.createElement('li');
  firstItem.textContent = '新的第一项';
  list.prepend(firstItem); // 在列表开头添加

  // 可以同时添加多个
  let p1 = document.createElement('p');
  p1.textContent = '段落1';
  let p2 = document.createElement('p');
  p2.textContent = '段落2';
  document.body.prepend(p1, p2, '文本内容'); // 在 body 开头添加

15、document.append()

• 含义：在文档的最后一个子节点后插入一组节点或字符串。

• 词源：Append（在后面附加）。

• 语法：document.append(…nodesOrStrings);

• 参数及说明：

  • 可以接受多个参数，可以是节点对象或字符串。

  • 字符串会自动转换为文本节点。

  • 与 appendChild 不同，append 可以接受多个参数和字符串。

• 例子：

  // 对 body 使用
  let footer = document.createElement('footer');
  footer.textContent = '版权信息';
  document.body.append(footer, '文档结束'); // 可以同时添加元素和文本

  // 对比 appendChild 和 append
  let div = document.getElementById('container');

  // appendChild：只能接受一个节点，不能直接加字符串
  div.appendChild(document.createTextNode('文本')); // 需要先创建文本节点

  // append：可以直接加字符串，且可以加多个
  div.append('文本1', '文本2', document.createElement('br'));

  // 返回值不同
  let result1 = div.appendChild(document.createElement('span')); // 返回添加的节点
  let result2 = div.append('文本'); // 返回 undefined

16、document.replaceChildren()

• 含义：替换文档的所有子节点（清空并添加新节点）。

• 词源：Replace（替换）+ Children（孩子们）。

• 语法：document.replaceChildren(…nodesOrStrings);

• 参数及说明：

  • 可以接受多个参数，作为新的子节点。

  • 如果不传参数，则清空所有子节点。

  • 危险操作：直接对 document 使用会清空整个文档。

• 例子：

  // 安全用法：对具体元素使用
  let container = document.getElementById('container');

  // 清空容器
  container.replaceChildren(); // 移除所有子节点

  // 替换为新内容
  let h2 = document.createElement('h2');
  h2.textContent = '新标题';
  let p = document.createElement('p');
  p.textContent = '新段落';
  container.replaceChildren(h2, p, '一些文本');

  // 对比 innerHTML = '' 和 replaceChildren()
  // 性能更好，且不会导致内存泄漏（事件监听器会被正确清理）

  // 危险示范（仅用于理解，不要执行）
  // document.replaceChildren(); // 这会清空整个页面！

第四部分：文档状态与交互方法（10个）

17、document.hasFocus()

• 含义：返回一个布尔值，表示文档是否获得焦点（即页面是否处于活动状态）。

• 词源：Has（有）+ Focus（焦点）。

• 语法：let focused = document.hasFocus();

• 参数及说明：无参数。

• 返回值：如果文档获得焦点返回 true，否则返回 false。

• 例子：

  // 实时监控页面焦点状态
  setInterval(() => {
  if (document.hasFocus()) {
  console.log('用户在浏览当前标签页');
  // 可以恢复动画、轮询等
  } else {
  console.log('用户切换到其他标签页');
  // 可以暂停动画、降低资源消耗
  }
  }, 1000);

  // 离开页面时暂停视频
  document.addEventListener('visibilitychange', function() {
  if (!document.hasFocus()) {
  let video = document.getElementById('myVideo');
  if (video && !video.paused) {
  video.pause();
  }
  }
  });

18、document.getElementById()

• 含义：通过元素的 id 属性获取对应的元素对象。

• 词源：Get（获取）+ Element（元素）+ By（通过）+ Id（标识符）。

• 语法：let element = document.getElementById(id);

• 参数及说明：

  • id：要查找的元素的 ID 字符串（区分大小写）。

  • 返回值：找到的 Element 对象，如果没有找到则返回 null。

• 例子：

  let header = document.getElementById('main-header');
  if (header) {
  header.style.backgroundColor = 'yellow';
  header.textContent = '找到了标题';
  } else {
  console.log('未找到该元素');
  }

19、document.getElementsByClassName()

• 含义：通过元素的类名获取一组元素对象的集合（实时更新）。

• 词源：Get（获取）+ Elements（元素）+ By（通过）+ Class（类）+ Name（名称）。

• 语法：let elements = document.getElementsByClassName(names);

• 参数及说明：

  • names：包含一个或多个类名的字符串（用空格分隔）。

  • 返回值：实时的 HTMLCollection 集合。

• 例子：

  // 获取所有 class="item" 的元素
  let items = document.getElementsByClassName('item');
  console.log('找到', items.length, '个项目');

  // 遍历并修改样式
  for (let item of items) {
  item.style.border = '1px solid black';
  }

  // 同时匹配多个类名
  let activeItems = document.getElementsByClassName('item active');

20、document.getElementsByName()

• 含义：通过元素的 name 属性获取一组元素对象的集合。

• 词源：Get（获取）+ Elements（元素）+ By（通过）+ Name（名称）。

• 语法：let elements = document.getElementsByName(name);

• 参数及说明：

  • name：要查找的 name 属性值。

  • 返回值：NodeList 集合（非实时，静态快照）。

• 例子：

  // 常用于表单元素
  let genderRadios = document.getElementsByName('gender');

  // 找出选中的单选按钮
  let selectedGender = null;
  for (let radio of genderRadios) {
  if (radio.checked) {
  selectedGender = radio.value;
  break;
  }
  }
  console.log('选中的性别：', selectedGender);

21、document.getElementsByTagName()

• 含义：通过标签名获取一组元素对象的集合（实时更新）。

• 词源：Get（获取）+ Elements（元素）+ By（通过）+ Tag（标签）+ Name（名称）。

• 语法：let elements = document.getElementsByTagName(tagName);

• 参数及说明：

  • tagName：标签名（如 'div'、'p'）。特殊值 '*' 匹配所有元素。

  • 返回值：实时的 HTMLCollection。

• 例子：

  let paragraphs = document.getElementsByTagName('p');
  console.log('页面中有', paragraphs.length, '个段落');

  // 将所有段落文字变蓝
  for (let p of paragraphs) {
  p.style.color = 'blue';
  }

  // 获取所有元素
  let allElements = document.getElementsByTagName('*');
  console.log('总元素数：', allElements.length);

22、document.getElementsByTagNameNS()

• 含义：通过标签名和命名空间 URI 获取元素集合。

• 词源：Get（获取）+ Elements（元素）+ By（通过）+ TagName（标签名）+ NS（命名空间）。

• 语法：let elements = document.getElementsByTagNameNS(namespaceURI, localName);

• 参数及说明：

  • namespaceURI：命名空间 URI（如 SVG 的 'http://www.w3.org/2000/svg'）。

  • localName：本地标签名（如 'svg'、'circle'）。'*' 匹配所有。

  • 返回值：实时的 NodeList。

• 例子：

  // 获取所有 SVG 元素
  let svgElements = document.getElementsByTagNameNS(
  'http://www.w3.org/2000/svg',
  '*'
  );
  console.log('SVG 元素数量：', svgElements.length);

  // 获取所有 circle 元素
  let circles = document.getElementsByTagNameNS(
  'http://www.w3.org/2000/svg',
  'circle'
  );

23、document.querySelector()

• 含义：返回文档中匹配指定 CSS 选择器的第一个元素。

• 词源：Query（查询）+ Selector（选择器）。

• 语法：let element = document.querySelector(selectors);

• 参数及说明：

  • selectors：一个有效的 CSS 选择器字符串。

  • 返回值：匹配的第一个元素，没有则返回 null。

• 例子：

  let firstButton = document.querySelector('button.primary');
  let header = document.querySelector('#header > nav .menu-item');
  let complex = document.querySelector('div[data-type="user"]:nth-child(2)');

  if (firstButton) {
  firstButton.click(); // 自动点击第一个按钮
  }

24、document.querySelectorAll()

• 含义：返回文档中匹配指定 CSS 选择器的所有元素的静态集合。

• 词源：Query（查询）+ Selector All（所有选择器）。

• 语法：let elementList = document.querySelectorAll(selectors);

• 参数及说明：

  • selectors：CSS 选择器字符串。

  • 返回值：静态的 NodeList（支持 forEach 方法）。

• 例子：

  let items = document.querySelectorAll('.list-item');
  console.log('找到', items.length, '个项目');

  // 使用 forEach 遍历
  items.forEach((item, index) => {
  item.textContent = `项目 ${index + 1}`;
  });

  // 复杂选择器
  let checkedItems = document.querySelectorAll(
  'input[type="checkbox"]:checked, input[type="radio"]:checked'
  );

25、document.getSelection()

• 含义：返回用户当前在页面上选中的文本范围。

• 词源：Get（获取）+ Selection（选择）。

• 语法：let selection = document.getSelection();

• 参数及说明：无参数。

• 返回值：Selection 对象，包含选中区域的信息和方法。

• 例子：

  // 监听鼠标松开事件，获取选中的文本
  document.addEventListener('mouseup', function() {
  let selection = document.getSelection();
  let selectedText = selection.toString();

  if (selectedText) {
  console.log('选中了：', selectedText);
  console.log('长度：', selectedText.length);
  console.log('起始位置：', selection.anchorOffset);
  console.log('结束位置：', selection.focusOffset);
  }
  });

  // 手动获取并操作选中文本
  function getSelectedHtml() {
  let selection = document.getSelection();
  if (selection.rangeCount > 0) {
  let range = selection.getRangeAt(0);
  let fragment = range.cloneContents();
  let div = document.createElement('div');
  div.appendChild(fragment);
  return div.innerHTML;
  }
  return '';
  }

26、document.exitFullscreen()

• 含义：退出全屏模式，将文档恢复到正常显示状态。

• 词源：Exit（退出）+ Fullscreen（全屏）。

• 语法：let promise = document.exitFullscreen();

• 参数及说明：

  • 无参数。

  • 返回值：一个 Promise，在全屏退出成功后 resolved，失败时 rejected。

  • 通常与 document.fullscreenElement 配合使用。

• 例子：

  // 退出全屏按钮
  let exitBtn = document.getElementById('exit-fullscreen');
  exitBtn.addEventListener('click', function() {
  if (document.fullscreenElement) {
  document.exitFullscreen()
  .then(() => console.log('成功退出全屏'))
  .catch((err) => {
  console.error('退出全屏失败:', err);
  alert('退出全屏失败：' + err.message);
  });
  }
  });

  // 按 ESC 键时自动退出全屏（浏览器默认行为，这里只是演示）
  document.addEventListener('fullscreenchange', function() {
  if (!document.fullscreenElement) {
  console.log('已退出全屏模式');
  // 恢复一些 UI 状态
  document.body.classList.remove('fullscreen-mode');
  } else {
  document.body.classList.add('fullscreen-mode');
  }
  });

  // 全屏切换函数
  async function toggleFullscreen(element) {
  if (!document.fullscreenElement) {
  // 进入全屏
  await element.requestFullscreen();
  } else {
  // 退出全屏
  await document.exitFullscreen();
  }
  }

第五部分：坐标与范围方法（6个）

27、document.elementFromPoint()

• 含义：返回在页面指定坐标处最顶层的元素。

• 词源：Element（元素）+ From（从）+ Point（点）。

• 语法：let element = document.elementFromPoint(x, y);

• 参数及说明：

  • x：相对于视口的水平坐标（像素）。

  • y：相对于视口的垂直坐标（像素）。

  • 返回值：指定坐标处的 Element，如果坐标在视口外则返回 null。

• 例子：

  // 获取屏幕中心点的元素
  let centerX = window.innerWidth / 2;
  let centerY = window.innerHeight / 2;
  let centerElement = document.elementFromPoint(centerX, centerY);
  console.log('屏幕中心点的元素：', centerElement.tagName);

  // 监听点击，并获取点击处的元素（即使有事件冒泡也能获取最上层元素）
  document.addEventListener('click', function(event) {
  let elemAtPoint = document.elementFromPoint(event.clientX, event.clientY);
  console.log('点击处最上层的元素：', elemAtPoint.tagName, elemAtPoint.className);
  });

28、document.elementsFromPoint()

• 含义：返回在页面指定坐标处所有元素的数组（从最顶层到最底层）。

• 词源：Elements（元素）+ From（从）+ Point（点）。

• 语法：let elements = document.elementsFromPoint(x, y);

• 参数及说明：

  • x：相对于视口的水平坐标。

  • y：相对于视口的垂直坐标。

  • 返回值：包含所有重叠元素的数组，按 z-index 从高到低排列。

• 例子：

  document.addEventListener('mousemove', function(event) {
  let elements = document.elementsFromPoint(event.clientX, event.clientY);

  // 显示鼠标下方的所有元素
  let tagNames = elements.map(el => el.tagName).join(' → ');
  console.log('鼠标下方元素层级：', tagNames);

  // 调试：高亮所有元素
  elements.forEach((el, index) => {
  el.style.outline = index === 0 ? '2px solid red' : '1px dashed blue';
  });
  });

  // 检查某个位置是否有特定元素
  function hasElementAtPoint(x, y, selector) {
  let elements = document.elementsFromPoint(x, y);
  return elements.some(el => el.matches(selector));
  }

29、document.getClientRects()

• 含义：返回元素在页面上占据的所有矩形区域（通常用于获取内联元素的换行信息）。

• 词源：Get（获取）+ Client（客户端）+ Rects（矩形）。

• 语法：let rectCollection = element.getClientRects();

• 参数及说明：

  • 这个方法通常在具体的元素上调用，而不是 document。

  • 返回值：DOMRectList 对象，包含一个或多个 DOMRect 对象。

• 例子：

  // 注意：这个方法属于 Element，但这里列出是因为你提到了
  let textSpan = document.getElementById('multi-line-text');

  // 获取内联元素的所有矩形（例如换行后会有多个矩形）
  let rects = textSpan.getClientRects();

  console.log('这个元素占据', rects.length, '个矩形区域');

  for (let i = 0; i < rects.length; i++) {
  let rect = rects[i];
  console.log(`矩形 ${i + 1}:`, {
  left: rect.left,
  top: rect.top,
  right: rect.right,
  bottom: rect.bottom,
  width: rect.width,
  height: rect.height
  });
  }

  // 判断文本是否换行
  if (rects.length > 1) {
  console.log('文本换行了');
  }

30、document.createRange()

• 含义：创建一个新的 Range 对象，表示文档中的一个连续区域。

• 词源：Create（创建）+ Range（范围）。

• 语法：let range = document.createRange();

• 参数及说明：无参数。返回一个初始化的空 Range 对象。

• 例子：

  // 创建范围
  let range = document.createRange();

  // 设置范围的起点和终点
  let startNode = document.getElementById('start');
  let endNode = document.getElementById('end');

  // 从 startNode 的第 2 个子节点开始，偏移量为 0
  range.setStart(startNode, 2);
  // 到 endNode 的第 1 个子节点结束，偏移量为 3
  range.setEnd(endNode, 1);

  // 获取范围内的内容
  let fragment = range.cloneContents(); // 克隆内容
  let selectedText = range.toString(); // 获取纯文本

  console.log('选中文本：', selectedText);

  // 高亮选中的范围
  let highlightSpan = document.createElement('span');
  highlightSpan.style.backgroundColor = 'yellow';
  range.surroundContents(highlightSpan); // 用 span 包裹范围内容

  // 更简单的用法：选中整个元素内容
  let element = document.getElementById('article');
  range.selectNodeContents(element);
  let content = range.toString();

31、document.caretPositionFromPoint()

• 含义：返回指定坐标处的光标位置信息（用于文本编辑）。

• 词源：Caret（光标）+ Position（位置）+ From（从）+ Point（点）。

• 语法：let caretPosition = document.caretPositionFromPoint(x, y);

• 参数及说明：

  • x：相对于视口的水平坐标（像素）。

  • y：相对于视口的垂直坐标（像素）。

  • 返回值：一个 CaretPosition 对象，包含 offsetNode（节点）和 offset（偏移量），如果坐标处没有文本则返回 null。

  • 注意：这是一个较新的 API，现代浏览器支持良好。

• 例子：

  // 在可编辑区域中点击时获取光标位置
  let editor = document.getElementById('editor');

  editor.addEventListener('click', function(event) {
  let caretPos = document.caretPositionFromPoint(event.clientX, event.clientY);

  if (caretPos) {
  let node = caretPos.offsetNode;
  let offset = caretPos.offset;

  console.log('点击的文本节点:', node);
  console.log('字符偏移量:', offset);

  // 如果是文本节点，可以获取附近的文本
  if (node.nodeType === Node.TEXT_NODE) {
  let text = node.textContent;
  let before = text.substring(0, offset);
  let after = text.substring(offset);
  console.log('光标前:', before);
  console.log('光标后:', after);
  }
  }
  });

  // 实现自定义的文本插入
  function insertTextAtCursor(text) {
  let selection = document.getSelection();
  if (selection.rangeCount > 0) {
  let range = selection.getRangeAt(0);
  range.deleteContents(); // 删除选中的内容
  range.insertNode(document.createTextNode(text)); // 插入新文本
  }
  }

  // 获取鼠标位置最近的单词
  document.addEventListener('mouseup', function(event) {
  let caretPos = document.caretPositionFromPoint(event.clientX, event.clientY);
  if (caretPos && caretPos.offsetNode.nodeType === Node.TEXT_NODE) {
  let text = caretPos.offsetNode.textContent;
  let pos = caretPos.offset;

  // 简单实现：找到光标所在的单词
  let words = text.split(/\\s+/);
  let charCount = 0;
  for (let word of words) {
  if (pos >= charCount && pos <= charCount + word.length) {
  console.log('点击的单词:', word);
  break;
  }
  charCount += word.length + 1; // +1 空格
  }
  }
  });

32、 document.evaluate()

• 含义：评估 XPath 表达式，返回匹配的结果。

• 词源：Evaluate（评估）。

• 语法：let xpathResult = document.evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result);

• 参数及说明：

  • xpathExpression：XPath 表达式字符串。

  • contextNode：上下文节点（通常是 document）。

  • namespaceResolver：命名空间解析函数（通常为 null）。

  • resultType：返回结果的类型。

  • result：可重用的结果对象（通常为 null）。

• 例子：

  // 查找所有 class 为 "item" 的 div
  let result = document.evaluate(
  '//div[@class="item"]',
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
  );

  for (let i = 0; i < result.snapshotLength; i++) {
  console.log(result.snapshotItem(i)); // 输出匹配的元素
  }

  // 查找第一个 h1 标题
  let h1 = document.evaluate(
  '//h1',
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
  ).singleNodeValue;

  console.log('第一个h1:', h1);

第六部分：创建方法（6个）

33、document.createAttribute()

• 含义：创建一个新的属性节点（通常不推荐使用，建议用 setAttribute）。

• 词源：Create（创建）+ Attribute（属性）。

• 语法：let attrNode = document.createAttribute(name);

• 参数及说明：

  • name：属性的名称。

  • 返回值：新创建的 Attr 节点，包含 name 和 value 属性。

• 例子：

  // 创建属性节点
  let classAttr = document.createAttribute('class');
  classAttr.value = 'highlight bold';

  let dataAttr = document.createAttribute('data-id');
  dataAttr.value = '12345';

  // 将属性应用到元素
  let div = document.getElementById('myDiv');
  div.setAttributeNode(classAttr);
  div.setAttributeNode(dataAttr);

  console.log(div.outerHTML); // <div class="highlight bold" data-id="12345"></div>

  // 更简单的方式（推荐）
  // div.setAttribute('class', 'highlight bold');
  // div.setAttribute('data-id', '12345');

34、document.createComment()

• 含义：创建一个新的注释节点。

• 词源：Create（创建）+ Comment（注释）。

• 语法：let commentNode = document.createComment(data);

• 参数及说明：

  • data：注释的内容字符串。

  • 返回值：新创建的 Comment 节点。

• 例子：

  // 创建注释
  let comment1 = document.createComment('这是动态生成的注释');
  let comment2 = document.createComment('创建时间：' + new Date().toLocaleString());

  // 添加到页面
  document.body.appendChild(comment1);
  document.getElementById('footer').appendChild(comment2);

  // 在 HTML 源码中会看到：
  // <!–这是动态生成的注释–>
  // <!–创建时间：2024/1/15 14:30:00–>

  // 也可以用于调试标记
  function addDebugComment(element, message) {
  let comment = document.createComment(`DEBUG: ${message}`);
  element.parentNode.insertBefore(comment, element);
  }

35、document.createDocumentFragment()

• 含义：创建一个空的文档片段（轻量级的文档容器，用于批量操作）。

• 词源：Create（创建）+ Document（文档）+ Fragment（片段）。

• 语法：let fragment = document.createDocumentFragment();

• 参数及说明：无参数。返回一个空的 DocumentFragment 对象。

• 例子：

  // 创建片段
  let fragment = document.createDocumentFragment();

  // 批量创建元素（只触发一次重绘）
  for (let i = 0; i < 1000; i++) {
  let li = document.createElement('li');
  li.textContent = `列表项 ${i + 1}`;
  li.className = i % 2 === 0 ? 'even' : 'odd';
  fragment.appendChild(li); // 先添加到片段，不会触发重绘
  }

  // 一次性添加到 DOM（只触发一次重绘）
  let list = document.getElementById('big-list');
  list.appendChild(fragment);

  console.log('1000 个项目已高效添加');

  // 另一个例子：构建复杂结构
  function buildCard(title, content) {
  let fragment = document.createDocumentFragment();

  let header = document.createElement('h3');
  header.textContent = title;

  let body = document.createElement('p');
  body.textContent = content;

  let footer = document.createElement('div');
  footer.className = 'card-footer';

  fragment.appendChild(header);
  fragment.appendChild(body);
  fragment.appendChild(footer);

  return fragment;
  }

36、document.createEvent()

• 含义：创建一个新的事件对象（旧式方法，推荐使用 new Event() 构造函数）。

• 词源：Create（创建）+ Event（事件）。

• 语法：let event = document.createEvent(type);

• 参数及说明：

  • type：事件类型字符串，如：

    • 'MouseEvents'：鼠标事件

    • 'HTMLEvents'：HTML 事件

    • 'UIEvents'：UI 事件

    • 'KeyboardEvents'：键盘事件

  • 返回值：创建的事件对象，需要进一步初始化。

• 例子：

  // 旧式方法（不推荐，仅为了解）

  // 创建鼠标事件
  let clickEvent = document.createEvent('MouseEvents');
  clickEvent.initMouseEvent(
  'click', // 事件类型
  true, // 是否冒泡
  true, // 是否可取消
  window, // 视图
  0, // 点击次数
  100, 100, // 屏幕坐标
  50, 50, // 客户区坐标
  false, false, false, false, // Ctrl, Alt, Shift, Meta
  0, // 鼠标按钮（0=左键）
  null // 相关目标
  );

  // 派发事件
  let button = document.getElementById('myButton');
  button.dispatchEvent(clickEvent);

  // 现代推荐写法
  // let clickEvent = new MouseEvent('click', {
  // bubbles: true,
  // clientX: 50,
  // clientY: 50
  // });

37、document.createElement()

• 含义：创建一个新的 HTML 元素节点。

• 词源：Create（创建）+ Element（元素）。

• 语法：let element = document.createElement(tagName, options);

• 参数及说明：

  • tagName：要创建的元素的标签名（如 'div'、'span'、'custom-element'）。

  • options（可选）：一个对象，可以包含 is 属性来指定自定义元素。

  • 返回值：新创建的 Element 对象。

• 例子：

  // 基本用法
  let div = document.createElement('div');
  div.id = 'new-div';
  div.className = 'box';
  div.textContent = '我是新创建的 Div';

  // 设置样式
  div.style.padding = '10px';
  div.style.backgroundColor = 'lightblue';

  // 创建自定义元素（如果已注册）
  // let myElement = document.createElement('custom-element', { is: 'my-button' });

  // 添加到页面
  document.body.appendChild(div);

  // 创建带命名空间的元素（如 SVG）
  let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  svg.appendChild(circle);

38、document.createTextNode()

• 含义：创建一个新的文本节点。

• 词源：Create（创建）+ Text（文本）+ Node（节点）。

• 语法：let textNode = document.createTextNode(data);

• 参数及说明：

  • data：一个字符串，是要放入文本节点的内容。

  • 返回值：新创建的 Text 节点。

• 例子：

  // 创建文本节点
  let text1 = document.createTextNode('这是一段普通文本');
  let text2 = document.createTextNode('另一段文本');

  // 创建元素并添加文本
  let paragraph = document.createElement('p');
  paragraph.appendChild(text1);

  // 在文本后追加更多文本
  paragraph.appendChild(document.createTextNode(' – 追加的内容'));

  // 修改文本内容
  text1.nodeValue = '修改后的文本';

  // 注意：createTextNode 会转义 HTML 标签
  let safeText = document.createTextNode('<script>alert("xss")</script>');
  // 页面会显示原文，不会执行脚本
  document.body.appendChild(safeText);

第七部分：比较与命名空间方法（7个）

39、document.compareDocumentPosition()

• 含义：比较当前文档和另一个节点的位置关系。

• 词源：Compare（比较）+ Document（文档）+ Position（位置）。

• 语法：let relationship = document.compareDocumentPosition(otherNode);

• 参数及说明：

  • otherNode：要比较的另一个节点。

  • 返回值：一个位掩码（整数），表示两个节点的关系。可能的值：

    • 0：两个节点相同

    • 1：节点不在同一文档中

    • 2：otherNode 在当前节点之前

    • 4：otherNode 在当前节点之后

    • 8：otherNode 包含当前节点

    • 16：otherNode 被当前节点包含

    • 32：浏览器的私有使用

• 例子：

  let head = document.head;
  let body = document.body;

  // 比较 head 和 body 的位置
  let result = head.compareDocumentPosition(body);

  // 使用位运算检查关系
  if (result & Node.DOCUMENT_POSITION_FOLLOWING) {
  console.log('head 在 body 之前'); // 通常会输出这个
  }

  if (result & Node.DOCUMENT_POSITION_PRECEDING) {
  console.log('head 在 body 之后');
  }

  // 检查元素是否包含另一个元素
  let parent = document.getElementById('parent');
  let child = document.getElementById('child');

  if (parent.compareDocumentPosition(child) & Node.DOCUMENT_POSITION_CONTAINED_BY) {
  console.log('child 被 parent 包含');
  }

  // 常量定义（便于阅读）
  const POSITION = {
  DISCONNECTED: 1,
  PRECEDING: 2,
  FOLLOWING: 4,
  CONTAINS: 8,
  CONTAINED_BY: 16
  };

40、document.contains()

• 含义：检查一个节点是否是文档的后代节点。

• 词源：Contains（包含）。

• 语法：let isDescendant = document.contains(otherNode);

• 参数及说明：

  • otherNode：要检查的节点。

  • 返回值：布尔值，如果节点是文档的一部分返回 true，否则返回 false。

• 例子：

  let div = document.getElementById('myDiv');
  console.log(document.contains(div)); // true（div 在页面中）

  // 检查新创建的节点
  let newDiv = document.createElement('div');
  console.log(document.contains(newDiv)); // false（还没添加到页面）

  // 添加到页面后
  document.body.appendChild(newDiv);
  console.log(document.contains(newDiv)); // true

  // 检查 null 或 undefined
  console.log(document.contains(null)); // false

  // 检查文档自身
  console.log(document.contains(document)); // true

  // 实用场景：检查元素是否还在 DOM 中
  function isInDOM(element) {
  return document.contains(element);
  }

  // 定期检查元素是否存在
  let element = document.getElementById('temp');
  setInterval(() => {
  if (!document.contains(element)) {
  console.log('元素已被移除');
  element = null;
  }
  }, 1000);

41、document.isDefaultNamespace()

• 含义：检查指定的命名空间 URI 是否为文档的默认命名空间。

• 词源：Is（是）+ Default（默认）+ Namespace（命名空间）。

• 语法：let bool = document.isDefaultNamespace(namespaceURI);

• 参数及说明：

  • namespaceURI：要检查的命名空间 URI 字符串。

  • 返回值：布尔值，如果是默认命名空间返回 true，否则返回 false。

• 例子：

  // 检查 HTML 命名空间
  let isHTML = document.isDefaultNamespace('http://www.w3.org/1999/xhtml');
  console.log('是 HTML 默认命名空间？', isHTML); // true

  // 检查 SVG 命名空间
  let isSVG = document.isDefaultNamespace('http://www.w3.org/2000/svg');
  console.log('是 SVG 默认命名空间？', isSVG); // false

  // 在 XML 文档中使用
  if (document.isDefaultNamespace('http://www.w3.org/1999/xhtml')) {
  console.log('当前是 HTML 文档');
  }

42、document.isEqualNode()

• 含义：检查两个节点是否相等（具有相同的类型、属性、子节点等，但不一定是同一个引用）。

• 词源：Is（是）+ Equal（相等）+ Node（节点）。

• 语法：let isEqual = document.isEqualNode(otherNode);

• 参数及说明：

  • otherNode：要比较的另一个节点。

  • 返回值：布尔值，如果两个节点完全相等返回 true。

• 例子：

  // 创建两个结构相同的元素
  let div1 = document.createElement('div');
  div1.id = 'test';
  div1.className = 'box';
  div1.textContent = '内容';

  let div2 = document.createElement('div');
  div2.id = 'test';
  div2.className = 'box';
  div2.textContent = '内容';

  // 检查是否相等（结构相同）
  console.log(div1.isEqualNode(div2)); // true

  // 检查是否是同一个节点（引用相同）
  console.log(div1 === div2); // false

  // 稍微修改一点
  div2.textContent = '不同内容';
  console.log(div1.isEqualNode(div2)); // false

  // 比较文档片段
  let frag1 = document.createDocumentFragment();
  let frag2 = document.createDocumentFragment();
  console.log(frag1.isEqualNode(frag2)); // true（都是空片段）

  // 实用场景：检查两个元素是否相同（不考虑引用）
  function areElementsIdentical(el1, el2) {
  return el1.isEqualNode(el2);
  }

43、document.isSameNode()

• 含义：检查两个节点是否是同一个节点（引用相同）。

• 词源：Is（是）+ Same（相同）+ Node（节点）。

• 语法：let isSame = document.isSameNode(otherNode);

• 参数及说明：

  • otherNode：要比较的另一个节点。

  • 返回值：布尔值，如果两个节点是同一个对象返回 true。

• 例子：

  let div1 = document.getElementById('myDiv');
  let div2 = document.getElementById('myDiv');

  // 检查是否是同一个节点
  console.log(div1.isSameNode(div2)); // true

  // 等价于
  console.log(div1 === div2); // true

  // 复制后的节点不是同一个
  let div3 = div1.cloneNode(true);
  console.log(div1.isSameNode(div3)); // false

  // 实用场景：避免重复处理
  function processElement(element) {
  if (processedElement && processedElement.isSameNode(element)) {
  console.log('已经处理过这个元素了');
  return;
  }
  // 处理元素
  processedElement = element;
  }

44、document.lookupNamespaceURI()

• 含义：返回给定前缀对应的命名空间 URI。

• 词源：Lookup（查找）+ Namespace（命名空间）+ URI。

• 语法：let namespaceURI = document.lookupNamespaceURI(prefix);

• 参数及说明：

  • prefix：要查找的前缀字符串（如 'svg'、'xhtml'）。传入 null 返回默认命名空间。

  • 返回值：对应的命名空间 URI 字符串，如果没有则返回 null。

• 例子：

  // 查找默认命名空间
  let defaultNS = document.lookupNamespaceURI(null);
  console.log('默认命名空间：', defaultNS); // 'http://www.w3.org/1999/xhtml'

  // 查找特定前缀的命名空间
  let svgNS = document.lookupNamespaceURI('svg');
  console.log('SVG 命名空间：', svgNS); // 'http://www.w3.org/2000/svg'

  let xlinkNS = document.lookupNamespaceURI('xlink');
  console.log('XLink 命名空间：', xlinkNS); // 'http://www.w3.org/1999/xlink'

  // 在 XML 文档中使用
  function getNamespaceInfo() {
  return {
  default: document.lookupNamespaceURI(null),
  html: document.lookupNamespaceURI('html'),
  svg: document.lookupNamespaceURI('svg'),
  math: document.lookupNamespaceURI('math')
  };
  }

45、document.lookupPrefix()

• 含义：返回给定命名空间 URI 对应的前缀。

• 词源：Lookup（查找）+ Prefix（前缀）。

• 语法：let prefix = document.lookupPrefix(namespaceURI);

• 参数及说明：

  • namespaceURI：要查找的命名空间 URI 字符串。

  • 返回值：对应的前缀字符串，如果没有则返回 null。

• 例子：

  // 查找 HTML 命名空间的前缀
  let htmlPrefix = document.lookupPrefix('http://www.w3.org/1999/xhtml');
  console.log('HTML 前缀：', htmlPrefix); // null（HTML 是默认命名空间，无前缀）

  // 查找 SVG 命名空间的前缀
  let svgPrefix = document.lookupPrefix('http://www.w3.org/2000/svg');
  console.log('SVG 前缀：', svgPrefix); // 'svg'（如果有定义）

  // 查找 XLink 命名空间的前缀
  let xlinkPrefix = document.lookupPrefix('http://www.w3.org/1999/xlink');
  console.log('XLink 前缀：', xlinkPrefix); // 'xlink'

  // 实用场景：根据 URI 获取前缀
  function getPrefixForURI(uri) {
  let prefix = document.lookupPrefix(uri);
  return prefix || '(默认命名空间)';
  }

第八部分：文档写入方法（4个）

46、document.open()

• 含义：打开一个文档流，准备写入内容。会清空当前文档。

• 词源：Open（打开）。

• 语法：document.open();

• 参数及说明：

  • 可以接受可选的 MIME 类型和替换参数，但通常不传参。

  • 调用后会清空当前文档的所有内容。

  • 危险操作：会清除当前页面。

• 例子：

  // 基本用法（极度危险！）
  // document.open();
  // document.write('<h1>新页面</h1>');
  // document.close();

  // 在新窗口中使用
  function openInNewWindow() {
  let newWindow = window.open();
  newWindow.document.open();
  newWindow.document.write(`
  <!DOCTYPE html>
  <html>
  <head><title>新窗口</title></head>
  <body>
  <h1>动态生成的内容</h1>
  <p>当前时间：${new Date()}</p>
  </body>
  </html>
  `);
  newWindow.document.close();
  }

  // 安全用法：仅在需要完全重写文档时使用
  function resetDocument() {
  if (confirm('确定要清空页面吗？')) {
  document.open();
  document.write('<h1>页面已重置</h1>');
  document.close();
  }
  }

47、document.close()

• 含义：关闭由 open() 打开的文档流，并完成文档写入。

• 词源：Close（关闭）。

• 语法：document.close();

• 参数及说明：无参数。必须在 write() 操作完成后调用。

• 例子：

  // 配合 open 和 write 使用
  function generatePDFView() {
  document.open();
  document.write('<h1>PDF 查看器</h1>');
  document.write('<embed src="doc.pdf" type="application/pdf" width="100%" height="600px">');
  document.close(); // 完成写入
  }

  // 错误示范：忘记 close 可能导致内容不显示
  function badExample() {
  document.open();
  document.write('这段文字可能不会显示');
  // 忘记 document.close()
  }

48、document.write()

• 含义：向文档中写入 HTML 或 JavaScript 代码。

• 词源：Write（写入）。

• 语法：document.write(markup);

• 参数及说明：

  • markup：要写入的 HTML 字符串。

  • 重要警告：

    • 如果在页面加载完成后调用，会覆盖整个文档。

    • 在 XHTML 文档中无效。

    • 现代开发中极少使用，推荐使用 DOM 操作方法。

• 例子：

  // 在文档加载期间使用（传统用法）
  // <script>
  // document.write('<p>当前时间：' + new Date() + '</p>');
  // </script>

  // 危险用法：页面加载完成后调用会覆盖页面
  document.getElementById('btn').addEventListener('click', function() {
  // document.write('新内容'); // 这样会清空整个页面！
  });

  // 用于加载备用资源
  if (!document.querySelector('script[src="jquery.js"]')) {
  document.write('<script src="jquery.js"><\\/script>');
  }

  // 现代替代方案
  // 使用 innerHTML 或 DOM 方法
  let p = document.createElement('p');
  p.textContent = '当前时间：' + new Date();
  document.body.appendChild(p);

49、document.writeln()

• 含义：和 write() 类似，但在末尾添加一个换行符。

• 词源：Write（写入）+ Line（行）。

• 语法：document.writeln(markup);

• 参数及说明：

  • markup：要写入的 HTML 字符串。

  • 在 HTML 中换行符通常不可见，但在 <pre> 标签内或文本节点中有效。

• 例子：

  // 在 <pre> 标签中使用有效
  document.write('<pre>');
  document.writeln('第一行文本');
  document.writeln('第二行文本');
  document.writeln('第三行文本');
  document.write('</pre>');

  // 查看源码时会看到换行
  // 第一行文本\\n
  // 第二行文本\\n
  // 第三行文本

  // 生成文本文件内容
  function generateTextFile() {
  let content = '';
  document.write('<pre>');
  document.writeln('姓名,年龄,城市');
  document.writeln('张三,25,北京');
  document.writeln('李四,30,上海');
  document.write('</pre>');
  }

第九部分：高级方法（2个）

50、document.getAnimations()

• 含义：返回当前文档中所有有效的动画对象（包括 CSS 动画和过渡）。

• 词源：Get（获取）+ Animations（动画）。

• 语法：let animations = document.getAnimations();

• 参数及说明：无参数。

• 返回值：一个 Array 数组，包含所有正在运行的 Animation 对象。

• 例子：

  // 获取所有动画
  let allAnimations = document.getAnimations();
  console.log('页面中有 ' + allAnimations.length + ' 个动画');

  // 暂停所有动画
  function pauseAllAnimations() {
  document.getAnimations().forEach(animation => {
  animation.pause();
  });
  console.log('所有动画已暂停');
  }

  // 恢复所有动画
  function playAllAnimations() {
  document.getAnimations().forEach(animation => {
  animation.play();
  });
  }

  // 获取特定元素的动画
  function getElementAnimations(element) {
  return document.getAnimations().filter(animation =>
  animation.effect && animation.effect.target === element
  );
  }

  // 当页面隐藏时暂停动画（性能优化）
  document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
  document.getAnimations().forEach(anim => anim.pause());
  } else {
  document.getAnimations().forEach(anim => anim.play());
  }
  });

  // 动画完成时的 Promise
  async function waitForAllAnimations() {
  let animations = document.getAnimations();
  await Promise.all(animations.map(anim => anim.finished));
  console.log('所有动画完成');
  }

51、document.getBoxQuads()（实验性 API）

• 含义：返回元素的盒子四边形的信息（实验性 API，支持度有限）。

• 词源：Get（获取）+ Box（盒子）+ Quads（四边形）。

• 语法：let quads = document.getBoxQuads(options);

• 参数及说明：

  • options（可选）：配置对象。

    • box：指定哪个 CSS 盒子，可选值：'content'、'padding'、'border'、'margin'。

    • relativeTo：相对于哪个元素计算坐标。

  • 返回值：一个 DOMQuad 数组，表示元素的几何信息。

• 例子：

  // 注意：这是一个实验性 API，当前浏览器支持有限

  // 获取元素的内容盒子的四边形
  let element = document.getElementById('myElement');
  if (element.getBoxQuads) {
  let quads = element.getBoxQuads({ box: 'border' });

  quads.forEach((quad, index) => {
  console.log(`四边形 ${index + 1}:`, {
  p1: { x: quad.p1.x, y: quad.p1.y },
  p2: { x: quad.p2.x, y: quad.p2.y },
  p3: { x: quad.p3.x, y: quad.p3.y },
  p4: { x: quad.p4.x, y: quad.p4.y }
  });

  // 获取边界矩形
  let bounds = quad.getBounds();
  console.log('边界:', bounds);
  });
  }

  // 相对于视口获取位置
  if (element.getBoxQuads) {
  let quads = element.getBoxQuads({
  box: 'margin',
  relativeTo: document.querySelector('#container')
  });
  }

  // 检查元素是否变形（实验性）
  function isElementTransformed(element) {
  if (!element.getBoxQuads) return false;

  let quads = element.getBoxQuads({ box: 'border' });
  if (quads.length === 0) return false;

  let quad = quads[0];
  // 检查是否是矩形（简单判断）
  let isRect =
  Math.abs(quad.p1.x – quad.p2.x) > 0.1 &&
  Math.abs(quad.p2.y – quad.p3.y) > 0.1 &&
  Math.abs(quad.p3.x – quad.p4.x) > 0.1 &&
  Math.abs(quad.p4.y – quad.p1.y) > 0.1;

  return !isRect;
  }

总 结 列 表

        下面对上面讲解的JavaScript 的document 对象 51 个常见的方法进行总结列表。

第一部分：事件处理方法（4个）

第二部分：节点导入与采用方法（2个）

第三部分：节点操作方法（10个）

第四部分：文档状态与交互方法（10个）

第五部分：坐标与范围方法（6个）

第六部分：创建方法（6个）

第七部分：比较与命名空间方法（7个）

第八部分：文档写入方法（4个）

第九部分：高级方法（2个）