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">这是可编辑文本</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 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, '一些文本'); // 对比 和 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 集合。

例子：

// 获取所有 的元素 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></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">'); 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; 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个）