跳到主要内容 JavaScript Document 对象常用方法详解 | 极客日志
JavaScript 大前端
JavaScript Document 对象常用方法详解 详细分析了 JavaScript 中 Document 对象的 51 种常用方法,涵盖事件处理、节点导入与操作、文档状态交互、坐标范围获取、元素创建及命名空间管理等核心功能。通过语法说明、参数解析及代码示例,帮助开发者精准掌握 DOM 操作技巧,提升网页动态交互与内容管理能力。
月光旅人 发布于 2026/3/30 更新于 2026/4/13 2 浏览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()。
2、document.removeEventListener()
含义 :移除之前通过 addEventListener 添加的事件监听器。
词源 :Remove(移除)+ Event(事件)+ Listener(监听器)。
语法 :document.removeEventListener(type, listener, options);
参数及说明 :
type:要移除的事件类型。
listener:要移除的回调函数(必须是同一个函数引用)。
options(可选):必须与添加时的配置一致才能正确移除。
重要 :如果添加时使用的是匿名函数,则无法移除。
3、document.dispatchEvent()
含义 :向文档派发一个自定义事件,触发相应的事件监听器。
词源 :Dispatch(派遣、发送)+ Event(事件)。
语法 :let result = document.dispatchEvent(event);
参数及说明 :
event:要派发的事件对象(可以是 new Event() 创建的自定义事件,也可以是系统事件)。
返回值:布尔值。如果事件没有被任何监听器调用 preventDefault() 则返回 true,否则返回 false。
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、图片地址等)。
返回值:布尔值,表示命令是否执行成功。
第二部分:节点导入与采用方法(2 个)
5、document.adoptNode()
含义 :从其他文档中采用一个节点,使其归属于当前文档(原文档中的节点会被移除)。
词源 :Adopt(采用、收养)+ Node(节点)。
语法 :let node = document.adoptNode(externalNode);
参数及说明 :
externalNode:来自其他文档的节点(如 iframe 中的元素)。
返回值:被采用后的节点,其 ownerDocument 变为当前文档。
注意 :采用后,原文档中的节点会被移除。
6、document.importNode()
含义 :从其他文档导入一个节点到当前文档(创建副本,原节点保留)。
词源 :Import(导入)+ Node(节点)。
语法 :let node = document.importNode(externalNode, deep);
参数及说明 :
externalNode:来自其他文档的节点。
deep:布尔值。true 表示深度导入(包括所有子节点),false 只导入节点本身。
返回值:导入后的节点副本,原节点不受影响。
第三部分:节点操作方法(10 个)
7、document.appendChild()
含义 :向文档节点的子节点列表末尾添加一个节点。
词源 :Append(追加)+ Child(孩子)。
语法 :document.appendChild(aChild);
参数及说明 :
aChild:要追加的节点对象。
重要警告 :通常不直接对 document 使用 appendChild,因为文档只能有一个根元素 <html>。如果尝试添加另一个根元素会出错。
8、document.cloneNode()
含义 :克隆文档节点本身(不是克隆整个页面内容)。
词源 :Clone(克隆)+ Node(节点)。
语法 :let clonedDoc = document.cloneNode(deep);
参数及说明 :
deep:布尔值。true 表示深度克隆(包括所有子节点),false 只克隆文档节点本身。
返回值:克隆后的文档节点副本。
9、document.insertBefore()
含义 :在参考节点之前插入一个节点。
词源 :Insert(插入)+ Before(在...之前)。
语法 :let insertedNode = parentNode.insertBefore(newNode, referenceNode);
参数及说明 :
newNode:要插入的新节点。
referenceNode:参考节点(新节点将插入到这个节点之前)。
返回值:被插入的节点。
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' ;
11、document.removeChild()
含义 :从父节点中移除一个子节点。
词源 :Remove(移除)+ Child(孩子)。
语法 :let oldChild = parentNode.removeChild(child);
参数及说明 :
child:要移除的子节点。
返回值:被移除的节点(仍存在于内存中,可以后续添加)。
let parent = document .getElementById ('list' ); let lastItem = document .getElementById ('lastItem' );
12、document.hasChildNodes()
含义 :检查文档节点是否有子节点。
词源 :Has(有)+ Child(孩子)+ Nodes(节点)。
语法 :let hasChildren = document.hasChildNodes();
参数及说明 :无参数。
返回值:布尔值,有子节点返回 true,否则返回 false。
console .log (document .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 );
14、document.prepend()
含义 :在文档的第一个子节点前插入一组节点或字符串。
词源 :Prepend(在前面附加)。
语法 :document.prepend(...nodesOrStrings);
参数及说明 :
可以接受多个参数,可以是节点对象或字符串。
字符串会自动转换为文本节点。
注意 :直接对 document 使用 prepend 通常不建议,因为文档只能有一个根元素。这个方法是继承自 ParentNode 接口。
15、document.append()
含义 :在文档的最后一个子节点后插入一组节点或字符串。
词源 :Append(在后面附加)。
语法 :document.append(...nodesOrStrings);
参数及说明 :
可以接受多个参数,可以是节点对象或字符串。
字符串会自动转换为文本节点。
与 appendChild 不同,append 可以接受多个参数和字符串。
16、document.replaceChildren()
含义 :替换文档的所有子节点(清空并添加新节点)。
词源 :Replace(替换)+ Children(孩子们)。
语法 :document.replaceChildren(...nodesOrStrings);
参数及说明 :
可以接受多个参数,作为新的子节点。
如果不传参数,则清空所有子节点。
危险操作 :直接对 document 使用会清空整个文档。
第四部分:文档状态与交互方法(10 个)
17、document.hasFocus()
含义 :返回一个布尔值,表示文档是否获得焦点(即页面是否处于活动状态)。
词源 :Has(有)+ Focus(焦点)。
语法 :let focused = document.hasFocus();
参数及说明 :无参数。
返回值:如果文档获得焦点返回 true,否则返回 false。
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 集合。
20、document.getElementsByName()
含义 :通过元素的 name 属性获取一组元素对象的集合。
词源 :Get(获取)+ Elements(元素)+ By(通过)+ Name(名称)。
语法 :let elements = document.getElementsByName(name);
参数及说明 :
name:要查找的 name 属性值。
返回值:NodeList 集合(非实时,静态快照)。
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 , '个段落' );
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。
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 , '个项目' );
25、document.getSelection()
含义 :返回用户当前在页面上选中的文本范围。
词源 :Get(获取)+ Selection(选择)。
语法 :let selection = document.getSelection();
参数及说明 :无参数。
返回值:Selection 对象,包含选中区域的信息和方法。
26、document.exitFullscreen()
含义 :退出全屏模式,将文档恢复到正常显示状态。
词源 :Exit(退出)+ Fullscreen(全屏)。
语法 :let promise = document.exitFullscreen();
参数及说明 :
无参数。
返回值:一个 Promise,在全屏退出成功后 resolved,失败时 rejected。
通常与 document.fullscreenElement 配合使用。
第五部分:坐标与范围方法(6 个)
27、document.elementFromPoint()
含义 :返回在页面指定坐标处最顶层的元素。
词源 :Element(元素)+ From(从)+ Point(点)。
语法 :let element = document.elementFromPoint(x, y);
参数及说明 :
x:相对于视口的水平坐标(像素)。
y:相对于视口的垂直坐标(像素)。
返回值:指定坐标处的 Element,如果坐标在视口外则返回 null。
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 );
29、document.getClientRects()
含义 :返回元素在页面上占据的所有矩形区域(通常用于获取内联元素的换行信息)。
词源 :Get(获取)+ Client(客户端)+ Rects(矩形)。
语法 :let rectCollection = element.getClientRects();
参数及说明 :
这个方法通常在具体的元素上调用,而不是 document。
返回值:DOMRectList 对象,包含一个或多个 DOMRect 对象。
30、document.createRange()
含义 :创建一个新的 Range 对象,表示文档中的一个连续区域。
词源 :Create(创建)+ Range(范围)。
语法 :let range = document.createRange();
参数及说明 :无参数。返回一个初始化的空 Range 对象。
31、document.caretPositionFromPoint()
含义 :返回指定坐标处的光标位置信息(用于文本编辑)。
词源 :Caret(光标)+ Position(位置)+ From(从)+ Point(点)。
语法 :let caretPosition = document.caretPositionFromPoint(x, y);
参数及说明 :
x:相对于视口的水平坐标(像素)。
y:相对于视口的垂直坐标(像素)。
返回值:一个 CaretPosition 对象,包含 offsetNode(节点)和 offset(偏移量),如果坐标处没有文本则返回 null。
注意 :这是一个较新的 API,现代浏览器支持良好。
32、 document.evaluate()
含义 :评估 XPath 表达式,返回匹配的结果。
词源 :Evaluate(评估)。
语法 :let xpathResult = document.evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result);
参数及说明 :
xpathExpression:XPath 表达式字符串。
contextNode:上下文节点(通常是 document)。
namespaceResolver:命名空间解析函数(通常为 null)。
resultType:返回结果的类型。
result:可重用的结果对象(通常为 null)。
第六部分:创建方法(6 个)
33、document.createAttribute()
含义 :创建一个新的属性节点(通常不推荐使用,建议用 setAttribute)。
词源 :Create(创建)+ Attribute(属性)。
语法 :let attrNode = document.createAttribute(name);
参数及说明 :
name:属性的名称。
返回值:新创建的 Attr 节点,包含 name 和 value 属性。
含义 :创建一个新的注释节点。
词源 :Create(创建)+ Comment(注释)。
语法 :let commentNode = document.createComment(data);
参数及说明 :
data:注释的内容字符串。
返回值:新创建的 Comment 节点。
35、document.createDocumentFragment()
含义 :创建一个空的文档片段(轻量级的文档容器,用于批量操作)。
词源 :Create(创建)+ Document(文档)+ Fragment(片段)。
语法 :let fragment = document.createDocumentFragment();
参数及说明 :无参数。返回一个空的 DocumentFragment 对象。
36、document.createEvent()
含义 :创建一个新的事件对象(旧式方法,推荐使用 new Event() 构造函数)。
词源 :Create(创建)+ Event(事件)。
语法 :let event = document.createEvent(type);
参数及说明 :
type:事件类型字符串,如:
'MouseEvents':鼠标事件
'HTMLEvents':HTML 事件
'UIEvents':UI 事件
'KeyboardEvents':键盘事件
返回值:创建的事件对象,需要进一步初始化。
37、document.createElement()
含义 :创建一个新的 HTML 元素节点。
词源 :Create(创建)+ Element(元素)。
语法 :let element = document.createElement(tagName, options);
参数及说明 :
tagName:要创建的元素的标签名(如 'div'、'span'、'custom-element')。
options(可选):一个对象,可以包含 is 属性来指定自定义元素。
返回值:新创建的 Element 对象。
38、document.createTextNode()
含义 :创建一个新的文本节点。
词源 :Create(创建)+ Text(文本)+ Node(节点)。
语法 :let textNode = document.createTextNode(data);
参数及说明 :
data:一个字符串,是要放入文本节点的内容。
返回值:新创建的 Text 节点。
第七部分:比较与命名空间方法(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 ;
40、document.contains()
含义 :检查一个节点是否是文档的后代节点。
词源 :Contains(包含)。
语法 :let isDescendant = document.contains(otherNode);
参数及说明 :
otherNode:要检查的节点。
返回值:布尔值,如果节点是文档的一部分返回 true,否则返回 false。
let div = document .getElementById ('myDiv' ); console .log (document .contains (div));
41、document.isDefaultNamespace()
含义 :检查指定的命名空间 URI 是否为文档的默认命名空间。
词源 :Is(是)+ Default(默认)+ Namespace(命名空间)。
语法 :let bool = document.isDefaultNamespace(namespaceURI);
参数及说明 :
namespaceURI:要检查的命名空间 URI 字符串。
返回值:布尔值,如果是默认命名空间返回 true,否则返回 false。
42、document.isEqualNode()
含义 :检查两个节点是否相等(具有相同的类型、属性、子节点等,但不一定是同一个引用)。
词源 :Is(是)+ Equal(相等)+ Node(节点)。
语法 :let isEqual = document.isEqualNode(otherNode);
参数及说明 :
otherNode:要比较的另一个节点。
返回值:布尔值,如果两个节点完全相等返回 true。
43、document.isSameNode()
含义 :检查两个节点是否是同一个节点(引用相同)。
词源 :Is(是)+ Same(相同)+ Node(节点)。
语法 :let isSame = document.isSameNode(otherNode);
参数及说明 :
otherNode:要比较的另一个节点。
返回值:布尔值,如果两个节点是同一个对象返回 true。
let div1 = document .getElementById ('myDiv' ); let div2 = document .getElementById ('myDiv' );
44、document.lookupNamespaceURI()
含义 :返回给定前缀对应的命名空间 URI。
词源 :Lookup(查找)+ Namespace(命名空间)+ URI。
语法 :let namespaceURI = document.lookupNamespaceURI(prefix);
参数及说明 :
prefix:要查找的前缀字符串(如 'svg'、'xhtml')。传入 null 返回默认命名空间。
返回值:对应的命名空间 URI 字符串,如果没有则返回 null。
45、document.lookupPrefix()
含义 :返回给定命名空间 URI 对应的前缀。
词源 :Lookup(查找)+ Prefix(前缀)。
语法 :let prefix = document.lookupPrefix(namespaceURI);
参数及说明 :
namespaceURI:要查找的命名空间 URI 字符串。
返回值:对应的前缀字符串,如果没有则返回 null。
第八部分:文档写入方法(4 个)
46、document.open()
含义 :打开一个文档流,准备写入内容。会清空当前文档。
词源 :Open(打开)。
语法 :document.open();
参数及说明 :
可以接受可选的 MIME 类型和替换参数,但通常不传参。
调用后会清空当前文档的所有内容。
危险操作 :会清除当前页面。
47、document.close()
含义 :关闭由 open() 打开的文档流,并完成文档写入。
词源 :Close(关闭)。
语法 :document.close();
参数及说明 :无参数。必须在 write() 操作完成后调用。
48、document.write()
含义 :向文档中写入 HTML 或 JavaScript 代码。
词源 :Write(写入)。
语法 :document.write(markup);
参数及说明 :
markup:要写入的 HTML 字符串。
重要警告 :
如果在页面加载完成后调用,会覆盖整个文档。
在 XHTML 文档中无效。
现代开发中极少使用,推荐使用 DOM 操作方法。
49、document.writeln()
含义 :和 write() 类似,但在末尾添加一个换行符。
词源 :Write(写入)+ Line(行)。
语法 :document.writeln(markup);
参数及说明 :
markup:要写入的 HTML 字符串。
在 HTML 中换行符通常不可见,但在 <pre> 标签内或文本节点中有效。
第九部分:高级方法(2 个)
50、document.getAnimations()
含义 :返回当前文档中所有有效的动画对象(包括 CSS 动画和过渡)。
词源 :Get(获取)+ Animations(动画)。
语法 :let animations = document.getAnimations();
参数及说明 :无参数。
返回值:一个 Array 数组,包含所有正在运行的 Animation 对象。
51、document.getBoxQuads() (实验性 API)
含义 :返回元素的盒子四边形的信息(实验性 API,支持度有限)。
词源 :Get(获取)+ Box(盒子)+ Quads(四边形)。
语法 :let quads = document.getBoxQuads(options);
参数及说明 :
options(可选):配置对象。
box:指定哪个 CSS 盒子,可选值:'content'、'padding'、'border'、'margin'。
relativeTo:相对于哪个元素计算坐标。
返回值:一个 DOMQuad 数组,表示元素的几何信息。
总结列表 下面对上面讲解的 JavaScript 的 document 对象 51 个常见的方法进行总结列表。
第一部分:事件处理方法(4 个) 方法 含义 词源 语法 参数及说明 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)。已废弃,不建议使用。
第二部分:节点导入与采用方法(2 个) 方法 含义 词源 语法 参数及说明 5 document.adoptNode() 从其他文档中采纳一个节点,使其归属到当前文档。 "adopt"(采纳、收养) let adoptedNode = document.adoptNode(node);node : 要从其他文档中采纳的节点。采纳后,原文档中的该节点会被移除。返回值是被采纳的节点。6 document.importNode() 从其他文档中导入一个节点,但保留原文档中的节点。 "import"(导入) let importedNode = document.importNode(node, deep);node : 要从其他文档中导入的节点。deep : 布尔值,是否深拷贝(导入节点及其所有子节点)。返回值是导入的节点副本。
第三部分:节点操作方法(10 个) 方法 含义 词源 语法 参数及说明 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 对象或字符串。如果没有提供参数,则清空所有子节点。
第四部分:文档状态与交互方法(10 个) 方法 含义 词源 语法 参数及说明 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,在全屏退出后兑现。
第五部分:坐标与范围方法(6 个) 方法 含义 词源 语法 参数及说明 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 对象。
第六部分:创建方法(6 个) 方法 含义 词源 语法 参数及说明 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 节点。
第七部分:比较与命名空间方法(7 个) 方法 含义 词源 语法 参数及说明 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。
第八部分:文档写入方法(4 个) 方法 含义 词源 语法 参数及说明 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() 类似,但会添加换行符。
第九部分:高级方法(2 个) 方法 含义 词源 语法 参数及说明 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
相关免费在线工具 Keycode 信息 查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
Escape 与 Native 编解码 JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
JavaScript / HTML 格式化 使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
JavaScript 压缩与混淆 Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
Base64 字符串编码/解码 将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
Base64 文件转换器 将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online