详细分析了 JavaScript 中 Document 对象的 51 种常用方法，涵盖事件处理、节点导入与操作、文档状态交互、坐标范围获取、元素创建及命名空间管理等核心功能。通过语法说明、参数解析及代码示例，帮助开发者精准掌握 DOM 操作技巧，提升网页动态交互与内容管理能力。
Document 对象的方法是 JavaScript 操作 DOM 的核心手段，它能让开发者精准获取、创建、修改页面元素，还能绑定事件、管理样式与文档结构，是实现网页动态交互、内容更新与布局调整的关键，支撑着前端页面从静态展示到动态交互的转变，是前端开发中实现丰富用户体验的基础工具。
在现代前端开发中，Document 对象的方法依然是各类框架底层交互的核心依托，即便框架封装了更上层的 API，其本质仍依赖 Document 方法与浏览器 DOM 进行通信。未来随着 Web 标准的持续演进，它的方法会更侧重安全与语义化，比如在跨域交互、隐私保护层面的限制会更严格，同时也会进一步强化与 Web 组件、渐进式 Web 应用（PWA）的协同能力，更好地适配多端、离线等复杂场景，成为构建下一代 Web 应用的重要基础。
下面，对 JavaScript 中 Document 对象常见的方法进行逐一分析讲解：
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 });
addEventListener 添加的事件监听器。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', ...) // 无法移除上面的匿名函数
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);
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('要复制的文本');
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('按钮已移动到主文档');
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 中，副本已添加到主文档');
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); // ✅ 正确
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 等 // 注意：克隆的文档不在页面中显示，只是一个内存中的副本
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);
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);
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);
let hasChildren = document.hasChildNodes();true，否则返回 false。例子：
console.log(document.hasChildNodes()); // 通常返回 true（有 doctype 和 html） // 检查 body 是否有子节点 console.log(document.body.hasChildNodes()); // 取决于页面内容
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"）
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 开头添加
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
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(); // 这会清空整个页面！
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(); } } });
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('未找到该元素'); }
let elements = document.getElementsByClassName(names);names：包含一个或多个类名的字符串（用空格分隔）。HTMLCollection 集合。例子：
// 获取所有 .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');
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);
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);
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' );
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(); // 自动点击第一个按钮 }
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' );
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 ''; }
let promise = document.exitFullscreen();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(); } }
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); });
let elements = document.elementsFromPoint(x, y);x：相对于视口的水平坐标。y：相对于视口的垂直坐标。例子：
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)); }
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('文本换行了'); }
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();
let caretPosition = document.caretPositionFromPoint(x, y);x：相对于视口的水平坐标（像素）。y：相对于视口的垂直坐标（像素）。CaretPosition 对象，包含 offsetNode（节点）和 offset（偏移量），如果坐标处没有文本则返回 null。例子：
// 在可编辑区域中点击时获取光标位置 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 空格 } } });
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);
setAttribute）。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');
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); }
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; }
new 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 // });
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);
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);
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 };
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);
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 文档'); }
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); }
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; }
let namespaceURI = document.lookupNamespaceURI(prefix);prefix：要查找的前缀字符串（如 'svg'、'xhtml'）。传入 null 返回默认命名空间。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') }; }
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 || '(默认命名空间)'; }
document.open();例子：
// 基本用法（极度危险！） // 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(); } }
open() 打开的文档流，并完成文档写入。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() }
document.write(markup);markup：要写入的 HTML 字符串。例子：
// 在文档加载期间使用（传统用法） // <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);
write() 类似，但在末尾添加一个换行符。document.writeln(markup);markup：要写入的 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>'); }
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('所有动画完成'); }
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 个常见的方法进行总结列表。
| 方法 | 含义 | 词源 | 语法 | 参数及说明 | |
|---|---|---|---|---|---|
| 1 | document.addEventListener() | 向文档添加事件监听器。 | "add"（添加）+ "EventListener"（事件监听器） | document.addEventListener(type, listener, options); | type: 事件类型字符串（如"click"）。listener: 事件触发时要调用的函数或对象。options: 可选，配置对象（capture、once、passive）或布尔值（表示是否在捕获阶段触发）。 |
| 2 | document.removeEventListener() | 从文档移除事件监听器。 | "remove"（移除）+ "EventListener"（事件监听器） | document.removeEventListener(type, listener, options); | type: 要移除的事件类型。listener: 要移除的事件处理函数。options: 可选，与添加时相同的配置选项或布尔值，必须与添加时匹配才能移除。 |
| 3 | document.dispatchEvent() | 向文档派发一个自定义事件。 | "dispatch"（派遣、发送）+ "Event"（事件） | let result = document.dispatchEvent(event); | event: 要派发的 Event 对象（通常用 new Event() 或 new CustomEvent() 创建）。返回值是一个布尔值，表示是否有事件处理程序调用了 preventDefault()。 |
| 4 | document.execCommand() | 在可编辑内容区域执行一个命令。 | "exec"（执行）+ "Command"（命令） | document.execCommand(commandId, showUI, value); | commandId: 命令名称字符串（如"bold"、"copy"）。showUI: 布尔值，是否显示用户界面（通常设为 false）。value: 可选，某些命令需要的额外参数（如插入链接时的 URL）。已废弃，不建议使用。 |
| 方法 | 含义 | 词源 | 语法 | 参数及说明 | |
|---|---|---|---|---|---|
| 5 | document.adoptNode() | 从其他文档中采纳一个节点，使其归属到当前文档。 | "adopt"（采纳、收养） | let adoptedNode = document.adoptNode(node); | node: 要从其他文档中采纳的节点。采纳后，原文档中的该节点会被移除。返回值是被采纳的节点。 |
| 6 | document.importNode() | 从其他文档中导入一个节点，但保留原文档中的节点。 | "import"（导入） | let importedNode = document.importNode(node, deep); | node: 要从其他文档中导入的节点。deep: 布尔值，是否深拷贝（导入节点及其所有子节点）。返回值是导入的节点副本。 |
| 方法 | 含义 | 词源 | 语法 | 参数及说明 | |
|---|---|---|---|---|---|
| 7 | document.appendChild() | 向文档末尾添加一个子节点。 | "append"（追加）+ "Child"（子节点） | document.appendChild(node); | node: 要添加的节点。注意：document 通常不允许直接添加子节点（根元素唯一），实际使用中更多用于元素节点。 |
| 8 | document.cloneNode() | 克隆文档节点。 | "clone"（克隆） | let clonedNode = document.cloneNode(deep); | deep: 可选布尔值，true 表示深克隆（克隆节点及其所有子节点），false 表示浅克隆（只克隆节点本身）。 |
| 9 | document.insertBefore() | 在参考节点之前插入一个子节点。 | "insert"（插入）+ "Before"（在...之前） | document.insertBefore(newNode, referenceNode); | newNode: 要插入的节点。referenceNode: 参考节点（在此节点之前插入）。如果为 null，则插入到末尾。 |
| 10 | document.replaceChild() | 替换文档中的一个子节点。 | "replace"（替换）+ "Child"（子节点） | let replacedNode = document.replaceChild(newChild, oldChild); | newChild: 新节点。oldChild: 要被替换的旧节点。返回值是被替换的旧节点。 |
| 11 | document.removeChild() | 从文档中移除一个子节点。 | "remove"（移除）+ "Child"（子节点） | let removedNode = document.removeChild(node); | node: 要移除的子节点。返回值是被移除的节点。 |
| 12 | document.hasChildNodes() | 检查文档是否有子节点。 | "has"（有）+ "Child"（子）+ "Nodes"（节点们） | let hasChildren = document.hasChildNodes(); | 无参数。返回值是布尔值，true 表示有子节点，false 表示没有。 |
| 13 | document.normalize() | 合并文档中相邻的文本节点并移除空文本节点。 | "normalize"（规范化） | document.normalize(); | 无参数。用于清理文档树中的文本节点。 |
| 14 | document.prepend() | 在文档的第一个子节点之前插入一组节点或字符串。 | "prepend"（在前面附加） | document.prepend(...nodesOrStrings); | 接受一个或多个参数，可以是 Node 对象或字符串（字符串会自动转换为文本节点）。 |
| 15 | document.append() | 在文档的最后一个子节点之后插入一组节点或字符串。 | "append"（追加） | document.append(...nodesOrStrings); | 接受一个或多个参数，可以是 Node 对象或字符串（字符串会自动转换为文本节点）。 |
| 16 | document.replaceChildren() | 替换文档的所有子节点。 | "replace"（替换）+ "Children"（子节点们） | document.replaceChildren(...nodesOrStrings); | 接受一个或多个参数，可以是 Node 对象或字符串。如果没有提供参数，则清空所有子节点。 |
| 方法 | 含义 | 词源 | 语法 | 参数及说明 | |
|---|---|---|---|---|---|
| 17 | document.hasFocus() | 检查文档或文档内的任何元素是否获得焦点。 | "has"（有）+ "Focus"（焦点） | let focused = document.hasFocus(); | 无参数。返回值是布尔值，true 表示文档获得焦点。 |
| 18 | document.getElementById() | 通过 id 属性获取元素。 | "get"（获取）+ "Element"（元素）+ "ById"（通过 Id） | let element = document.getElementById(id); | id: 字符串，要查找的元素 id 属性值。返回值是匹配的 Element 对象，如果没有则返回 null。 |
| 19 | document.getElementsByClassName() | 通过类名获取元素集合。 | "get"（获取）+ "Elements"（元素们）+ "ByClassName"（通过类名） | let elements = document.getElementsByClassName(names); | names: 字符串，包含一个或多个类名的空格分隔列表。返回值为动态更新的 HTMLCollection。 |
| 20 | document.getElementsByName() | 通过 name 属性获取元素集合。 | "get"（获取）+ "Elements"（元素们）+ "ByName"（通过名字） | let elements = document.getElementsByName(name); | name: 字符串，元素的 name 属性值。返回值为 NodeList。 |
| 21 | document.getElementsByTagName() | 通过标签名获取元素集合。 | "get"（获取）+ "Elements"（元素们）+ "ByTagName"（通过标签名） | let elements = document.getElementsByTagName(tagName); | tagName: 字符串，标签名（如"div"）。可使用"*"匹配所有元素。返回值为动态更新的 HTMLCollection。 |
| 22 | document.getElementsByTagNameNS() | 通过命名空间和标签名获取元素集合。 | "get"（获取）+ "Elements"（元素们）+ "ByTagNameNS"（通过标签名 + 命名空间） | let elements = document.getElementsByTagNameNS(namespace, tagName); | namespace: 字符串，元素的命名空间 URI。tagName: 字符串，标签名。返回值为 NodeList。 |
| 23 | document.querySelector() | 返回匹配指定 CSS 选择器的第一个元素。 | "query"（查询）+ "Selector"（选择器） | let element = document.querySelector(selectors); | selectors: 字符串，CSS 选择器。返回值是匹配的第一个 Element 对象，如果没有则返回 null。 |
| 24 | document.querySelectorAll() | 返回匹配指定 CSS 选择器的所有元素的静态 NodeList。 | "query"（查询）+ "Selector"（选择器）+ "All"（所有） | let elementList = document.querySelectorAll(selectors); | selectors: 字符串，CSS 选择器。返回值为静态的（非动态）NodeList。 |
| 25 | document.getSelection() | 返回用户当前选中的文本范围。 | "get"（获取）+ "Selection"（选择区域） | let selection = document.getSelection(); | 无参数。返回值是一个 Selection 对象，包含选中的文本信息。 |
| 26 | document.exitFullscreen() | 退出全屏模式。 | "exit"（退出）+ "Fullscreen"（全屏） | document.exitFullscreen(); | 无参数。返回一个 Promise，在全屏退出后兑现。 |
| 方法 | 含义 | 词源 | 语法 | 参数及说明 | |
|---|---|---|---|---|---|
| 27 | document.elementFromPoint() | 返回视口中指定坐标点最上层的元素。 | "element"（元素）+ "from"（从）+ "point"（点） | let element = document.elementFromPoint(x, y); | x: 相对于视口左边界的水平坐标。y: 相对于视口上边界的垂直坐标。返回值是位于该点的最上层 Element。 |
| 28 | document.elementsFromPoint() | 返回视口中指定坐标点的所有元素的数组。 | "elements"（元素们）+ "from"（从）+ "point"（点） | let elements = document.elementsFromPoint(x, y); | x: 相对于视口左边界的水平坐标。y: 相对于视口上边界的垂直坐标。返回值是一个包含所有覆盖该点的元素的数组。 |
| 29 | document.getClientRects() | 返回文档中文本矩形集合。 | "get"（获取）+ "ClientRects"（客户端矩形区域） | let rectCollection = document.getClientRects(); | 无参数。通常用于文本节点，返回一个 DOMRectList 集合。 |
| 30 | document.createRange() | 创建一个新的 Range 对象。 | "create"（创建）+ "Range"（范围） | let range = document.createRange(); | 无参数。返回一个空的 Range 对象，可用于选取文档的一部分。 |
| 31 | document.caretPositionFromPoint() | 返回指定坐标点的插入符号位置。 | "caret"（光标）+ "position"（位置）+ "from"（从）+ "point"（点） | let caretPos = document.caretPositionFromPoint(x, y); | x: 水平坐标。y: 垂直坐标。返回一个 CaretPosition 对象，包含节点和偏移量。 |
| 32 | document.evaluate() | 执行 XPath 表达式并返回结果。 | "evaluate"（评估、计算） | let result = document.evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result); | xpathExpression: XPath 表达式字符串。contextNode: 上下文节点。namespaceResolver: 命名空间解析函数。resultType: 返回结果类型常量。result: 可重用的 XPathResult 对象。 |
| 方法 | 含义 | 词源 | 语法 | 参数及说明 | |
|---|---|---|---|---|---|
| 33 | document.createAttribute() | 创建一个新的属性节点。 | "create"（创建）+ "Attribute"（属性） | let attr = document.createAttribute(name); | name: 字符串，属性的名称。返回值是一个 Attr 节点。已废弃，推荐使用 setAttribute()。 |
| 34 | document.createComment() | 创建一个新的注释节点。 | "create"（创建）+ "Comment"（注释） | let comment = document.createComment(data); | data: 字符串，注释内容。返回值是一个 Comment 节点。 |
| 35 | document.createDocumentFragment() | 创建一个空的文档片段。 | "create"（创建）+ "DocumentFragment"（文档片段） | let fragment = document.createDocumentFragment(); | 无参数。返回一个空的 DocumentFragment 节点，可用于批量操作 DOM。 |
| 36 | document.createEvent() | 创建一个新的事件对象。 | "create"（创建）+ "Event"（事件） | let event = document.createEvent(eventType); | eventType: 字符串，事件类型（如"MouseEvent"）。已废弃，推荐使用 new Event() 构造函数。 |
| 37 | document.createElement() | 创建一个指定标签名的元素节点。 | "create"（创建）+ "Element"（元素） | let element = document.createElement(tagName, options); | tagName: 字符串，要创建的元素的标签名。options: 可选配置对象（如 { is: "custom-element" }）。返回新的 Element 对象。 |
| 38 | document.createTextNode() | 创建一个新的文本节点。 | "create"（创建）+ "TextNode"（文本节点） | let textNode = document.createTextNode(data); | data: 字符串，文本节点的内容。返回值是一个 Text 节点。 |
| 方法 | 含义 | 词源 | 语法 | 参数及说明 | |
|---|---|---|---|---|---|
| 39 | document.compareDocumentPosition() | 比较当前文档节点与另一个节点的位置关系。 | "compare"（比较）+ "DocumentPosition"（文档位置） | let position = document.compareDocumentPosition(otherNode); | otherNode: 要比较的另一个节点。返回值是表示位置关系的位掩码（如 Node.DOCUMENT_POSITION_FOLLOWING）。 |
| 40 | document.contains() | 检查一个节点是否是当前文档节点的后代。 | "contains"（包含） | let isContained = document.contains(otherNode); | otherNode: 要检查的节点。返回值是布尔值，true 表示该节点是后代。 |
| 41 | document.isDefaultNamespace() | 检查指定的命名空间 URI 是否是当前文档的默认命名空间。 | "is"（是）+ "DefaultNamespace"（默认命名空间） | let isDefault = document.isDefaultNamespace(namespaceURI); | namespaceURI: 要检查的命名空间 URI 字符串。返回值是布尔值。 |
| 42 | document.isEqualNode() | 检查两个节点是否相等（类型、属性、子节点相同）。 | "is"（是）+ "Equal"（相等）+ "Node"（节点） | let isEqual = document.isEqualNode(otherNode); | otherNode: 要比较的另一个节点。返回值是布尔值。 |
| 43 | document.isSameNode() | 检查两个节点是否为同一个节点引用。 | "is"（是）+ "Same"（相同）+ "Node"（节点） | let isSame = document.isSameNode(otherNode); | otherNode: 要比较的另一个节点。返回值是布尔值。 |
| 44 | document.lookupNamespaceURI() | 返回与给定前缀关联的命名空间 URI。 | "lookup"（查找）+ "NamespaceURI"（命名空间 URI） | let uri = document.lookupNamespaceURI(prefix); | prefix: 要查找的前缀字符串。返回值是对应的命名空间 URI 或 null。 |
| 45 | document.lookupPrefix() | 返回与给定命名空间 URI 关联的前缀。 | "lookup"（查找）+ "Prefix"（前缀） | let prefix = document.lookupPrefix(namespaceURI); | namespaceURI: 要查找的命名空间 URI 字符串。返回值是对应的前缀或 null。 |
| 方法 | 含义 | 词源 | 语法 | 参数及说明 | |
|---|---|---|---|---|---|
| 46 | document.open() | 打开一个文档流用于写入。 | "open"（打开） | document.open(); | 无参数。打开文档流，清除当前文档内容。通常在调用 document.write() 前使用。 |
| 47 | document.close() | 关闭文档输出流。 | "close"（关闭） | document.close(); | 无参数。完成文档写入后关闭输出流，显示所有写入的内容。 |
| 48 | document.write() | 向文档写入 HTML 表达式或 JavaScript 代码。 | "write"（写入） | document.write(markup); | markup: 字符串，要写入的 HTML 内容。如果在页面加载完成后调用，会覆盖整个页面。 |
| 49 | document.writeln() | 向文档写入 HTML 内容并附加一个换行符。 | "write"（写入）+ "ln"（line，行） | document.writeln(markup); | markup: 字符串，要写入的 HTML 内容。与 write() 类似，但会添加换行符。 |
| 方法 | 含义 | 词源 | 语法 | 参数及说明 | |
|---|---|---|---|---|---|
| 50 | document.getAnimations() | 返回当前文档中所有激活的 Animation 对象的数组。 | "get"（获取）+ "Animations"（动画们） | let animations = document.getAnimations(); | 无参数。返回一个包含所有尚未自动移除的 Animation 对象的数组。 |
| 51 | document.getBoxQuads() | （实验性 API）返回元素在文档中的 CSS 盒子四边形的几何信息。 | "get"（获取）+ "BoxQuads"（盒子四边形） | let quads = document.getBoxQuads(options); | options: 可选配置对象。这是一个实验性 API，不建议在生产环境中使用。 |
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online