DOM
EventTarget
方法：
- eventTarget.addEventListener()：
(type, listener, options? | useCapture?)，用于为 DOM 元素绑定事件监听器的核心方法，支持精细控制事件触发的阶段、频率及生命周期。 - eventTarget.removeEventListener()：
(type, listener, options? | useCapture?)，用于移除通过 addEventListener 绑定的事件监听器的方法。正确使用它可以避免内存泄漏和重复事件触发问题。 - eventTarget.dispatchEvent()：
(event)，用于手动触发自定义或原生事件的方法。
Document
属性：
- document.documentElement：
Element，只读，返回当前文档的直接子节点。对于 HTML 文档一般代表该文档的 html 元素。 - document.body：
body|frameset|null，获取或设置当前文档的 body 或 frameset节点（不常用设置）。 - document.head：
HTMLHeadElement，只读，返回当前文档的 head 元素。 - document.title：
string，获取或设置当前文档的标题。 - document.doctype：
DocumentType，只读，返回当前文档的文档类型定义DTD（<!DOCTYPE html>）。 - document.images：
HTMLCollection，只读，返回当前文档中所包含的图片的 HTMLCollection。 - document.scripts：
HTMLCollection，只读，返回包含文档中所有的 script 元素的 HTMLCollection。 - document.links：
HTMLCollection，只读，返回一个包含文档中所有超链接的 HTMLCollection。 - document.forms：
HTMLCollection，只读，返回一个包含当前文档中所有表单元素 form 的 HTMLCollection。 - document.cookie：
string，返回一个使用分号分隔的 cookie 列表，或设置（写入）一个 cookie。
方法：
元素查询：
- 现代方法：
- document.querySelector() / el.querySelector()：
(selectors)，返回文档中与指定的选择器匹配的第一个元素节点。 - document.querySelectorAll() / el.querySelectorAll()：
(selectors)，返回包含文档中与指定的选择器匹配的所有元素节点的列表。 - 传统方法：
- document.getElementById()：
(id)，返回与ID匹配的元素。 - document.getElementsByClassName() / el.getElementsByClassName()：
(classNames)，返回匹配给定类名的元素列表。 - document.getElementsByTagName() / el.getElementsByTagName()：
(tagname|*)，返回匹配给定标签名的元素列表。
元素创建：
- document.createElement()：
(tagName,options?)，用给定标签名创建一个新的元素，支持自定义标签。
文本写入：
- document.write()：
(...content)，不建议，用于向 HTML 文档直接写入内容的方法（可能引发副作用）。
Node
属性：
节点导航：
- node.parentNode：
Node|null，只读，返回一个当前节点的父节点。 - node.previousSibling：
Node|null，只读，返回与该节点同级的前一个节点。 - node.nextSibling：
Node|null，只读，返回与该节点同级的下一个节点。 - node.childNodes：
NodeList，只读，返回一个包含了该节点所有子节点的动态变化的的NodeList。 - node.firstChild：
Node|null，只读，返回该节点的第一个子节点。 - node.lastChild：
Node|null，只读，返回该节点的最后一个子节点。
元素导航：
- node.parentElement：
Node|null，只读，返回一个当前节点的父元素节点。 - node.previousElementSibling：
Node|null，只读，返回与该节点前一个兄弟元素。 - node.nextElementSibling：
Node|null，只读，返回与该节点下一个兄弟元素。 - node.children：
HTMLCollection，只读，返回一个包含了该节点所有子元素的动态集合。 - node.firstElementChild：
Node|null，只读，返回该节点的第一个子元素。 - node.lastElementChild：
Node|null，只读，返回该节点的最后一个子元素。
节点属性：
- node.nodeType：
number，只读，用于标识节点的类型。 - node.nodeName：
DOMString，只读，返回当前节点的节点名称。 - node.textContent：
string|null，返回/设置一个元素内所有子节点及其后代的文本内容。 - node.outerHTML：
DOMString，获取/设置 HTML 语法表示的元素以及其后代。 - node.data/nodeValue：``，获取非元素节点的文本内容。
方法：
克隆节点
- node.cloneNode()：
(deep?)，用于克隆 DOM 节点的方法，可生成当前节点的副本。通过参数控制是否深度复制子节点，适用于需要复用或动态生成相似结构的场景。
传统元素操作方法：
- parentNode.appendChild()：
(childNode)，用于将一个节点添加到指定父节点的子节点列表末尾的方法。 - parentNode.insertBefore()：
(newNode, referenceNode)，用于在父节点的指定子节点前插入一个新节点的方法。 - parentNode.replaceChild()：
(newNode, oldNode)，用于替换父节点中的指定子节点的方法。 - parentNode.removeChild()：
(childNode)，用于从父节点中移除指定子节点的方法。
Element
Element
属性：
基本属性
- el.attributes：
NamedNodeMap，只读，返回包含相应 HTML 元素的指定属性。 - el.classList：
DOMTokenList，只读，返回该元素包含的所有 class 属性。 - el.className：
string，表示这个元素的类名。 - el.id：
string，表示此元素的 id 值。 - el.tagName：
string，只读，返回当前元素的标签名。 - el.innerHTML：
string，读取或修改 HTML 元素内容的属性。可以操作元素内部的 HTML 结构（包括标签和文本）。 - el.outerHTML：
string，只读，代表元素的标记（包括其内容）。作为 setter 使用时，将用从给定字符串解析出的节点替换元素。
元素导航：
- el.previousElementSibling：
Node|null，只读，返回与该节点前一个兄弟元素。 - el.nextElementSibling：
Node|null，只读，返回与该节点下一个兄弟元素。 - el.firstElementChild：
Node|null，只读，返回该节点的第一个子元素。 - el.lastElementChild：
Node|null，只读，返回该节点的最后一个子元素。 - el.children：
HTMLCollection，只读，返回一个包含了该节点所有子元素的动态集合。
尺寸位置
- 元素尺寸：
- el.clientWidth / el.clientHeight：内容 + padding (不包含滚动条)
- el.offsetWidth / el.offsetHeight：内容 + padding + border (包含滚动条)
- el.scrollWidth / el.scrollHeight：可见内容 + 滚动出去的内容
- 元素位置：
- el.offsetLeft / el.offsetTop：与当前元素最近的定位父级元素之间的距离
- el.scrollLeft / el.scrollTop：盒子内容滚动出去的距离（包括边框）
- 元素其他：
- el.clientLeft / el.clientTop：左/上边框的宽度
方法：
插入元素：
- el.append()：
(...nodesOrStrings)，用于向 DOM 节点的子节点列表末尾插入一个或多个节点或字符串的方法。 - el.prepend()：
(...nodesOrStrings)，用于向 DOM 节点的子节点列表开头插入一个或多个节点或字符串的方法。 - el.before()：
(...nodesOrStrings)，用于在指定节点的前面插入一个或多个节点或字符串的方法。 - el.after()：
(...nodesOrStrings)，用于在指定节点的后面插入一个或多个节点或字符串的方法。 - el.replaceWith()：
(...nodesOrStrings)，用于替换 DOM 节点的方法，它可以将当前节点替换为一个或多个新节点或字符串。
移除元素：
- el.remove()：
()，用于从 DOM 树中移除当前元素节点的方法。直接作用于目标元素，无需通过父节点操作。
滚动：
- el.scrollTo() / window.scrollTo()：
(x, y)或({left,top,behavior})，用于控制可滚动元素滚动位置的方法。适用于overflow设置为 scroll 或 auto 的元素。 - el.scrollBy() / window.scrollBy()：
(x, y)或({left,top,behavior})，用于控制可滚动元素相对当前位置滚动的方法。 - el.scrollIntoView()：
(alignToTop)或({behavior,block,inline})，用于将元素滚动到浏览器窗口或可滚动容器可视区域的方法。
属性操作：
- el.getAttribute()：
(attributeName)，从当前节点获取指定属性的值，并以字符串形式返回。 - el.setAttribute()：
(name, value)，设置当前节点的指定属性值，若属性不存在则创建。 - el.hasAttribute()：
(attributeName)，返回一个布尔值，表示元素是否具有指定属性。 - el.removeAttribute()：
(attrName)，从当前节点删除指定属性。
classList:
- el.classList：
DOMTokenList，只读，返回元素 class 属性可迭代的动态集合。可用于操作 class 集合。 - el.classList.add()：
(className)，添加一个类。 - el.classList.remove()：
(className)，移除一个类。 - el.classList.toggle()：
(className)，如果类不存在就添加类，存在就移除该类。 - el.classList.contains()：
(className)，检查是否存在指定类。 - el.classList.replace()：
(oldClass, newClass)，将旧类名替换成新类名。
HTMLElement
属性：
- el.dataset：
DOMStringMap，用于访问和操作 HTML 元素的自定义数据属性（data-*） 的属性。 - el.draggable：
boolean，设置/获取元素是否可以拖拽。 - el.hidden：
boolean，获取/设置元素是否隐藏。 - el.style：
CSSStyleDeclaration，获取/设置元素的 style 属性。