HTML DOM 常用对象总结
核心DOM对象（文档结构）
| 对象/接口 | 描述 | 常用属性/方法 |
|---|---|---|
| Document | 整个文档的根节点 | getElementById(), querySelector(), createElement(), title, body, head, documentElement |
| Element | 所有HTML元素的基类 | innerHTML, innerText, textContent, className, classList, id, style, getAttribute(), appendChild() |
| Node | DOM树中的所有节点 | nodeName, nodeType, nodeValue, parentNode, childNodes, firstChild, lastChild, appendChild(), removeChild() |
| HTMLElement | HTML元素的基类 | 继承Element，添加HTML特定功能 |
| HTMLDocument | HTML文档接口 | 继承Document，添加HTML特定功能 |
元素节点类型对象
| 对象 | 对应标签 | 特有属性/方法 |
|---|---|---|
| HTMLDivElement | <div> |
无特有属性，继承HTMLElement |
| HTMLSpanElement | <span> |
继承HTMLElement |
| HTMLParagraphElement | <p> |
继承HTMLElement |
| HTMLHeadingElement | <h1>-<h6> |
继承HTMLElement |
| HTMLAnchorElement | <a> |
href, target, download, rel |
| HTMLImageElement | <img> |
src, alt, width, height, naturalWidth, naturalHeight, complete |
| HTMLInputElement | <input> |
value, type, checked, disabled, focus(), blur(), select(), files |
| HTMLTextAreaElement | <textarea> |
value, rows, cols, selectionStart, selectionEnd |
| HTMLSelectElement | <select> |
options, selectedIndex, value, add(), remove() |
| HTMLOptionElement | <option> |
selected, value, text |
| HTMLFormElement | <form> |
elements, submit(), reset(), action, method |
| HTMLButtonElement | <button> |
type, disabled, form |
| HTMLLabelElement | <label> |
htmlFor, control |
| HTMLTableElement | <table> |
rows, caption, createTHead(), insertRow() |
| HTMLTableCellElement | <td>, <th> |
colSpan, rowSpan, cellIndex |
| HTMLUListElement | <ul>, <ol> |
继承HTMLElement |
| HTMLLIElement | <li> |
继承HTMLElement |
集合类对象
| 对象 | 描述 | 特性 |
|---|---|---|
| HTMLCollection | 动态元素集合 | length, item(index), namedItem(name)，随DOM变化自动更新 |
| NodeList | 节点集合 | length, item(index)，forEach()，可能是静态或动态的 |
| HTMLOptionsCollection | <select>的选项集合 |
继承HTMLCollection，用于select.options |
属性相关对象
| 对象 | 描述 | 常用属性 |
|---|---|---|
| Attr | 元素属性节点 | name, value, ownerElement |
| NamedNodeMap | 属性节点集合 | length, getNamedItem(), setNamedItem() |
| DOMTokenList | class列表 | length, add(), remove(), toggle(), contains()，对应classList |
样式相关对象
| 对象 | 描述 | 常用属性/方法 |
|---|---|---|
| CSSStyleDeclaration | 元素样式对象 | cssText, getPropertyValue(), setProperty()，对应element.style |
| StyleSheetList | 样式表集合 | length, item(index) |
| CSSStyleSheet | CSS样式表 | cssRules, insertRule(), deleteRule() |
事件相关对象
| 对象 | 描述 | 常用属性/方法 |
|---|---|---|
| Event | 事件基类 | type, target, currentTarget, preventDefault(), stopPropagation() |
| MouseEvent | 鼠标事件 | clientX, clientY, pageX, pageY, button, altKey, ctrlKey |
| KeyboardEvent | 键盘事件 | key, code, altKey, ctrlKey, shiftKey |
| FocusEvent | 焦点事件 | relatedTarget |
| InputEvent | 输入事件 | data, inputType, isComposing |
| UIEvent | 用户界面事件 | view, detail |
| EventTarget | 事件目标接口 | addEventListener(), removeEventListener(), dispatchEvent() |
文档结构对象
| 对象 | 描述 | 常用属性 |
|---|---|---|
| DocumentFragment | 轻量级文档片段 | 作为临时容器，无父节点 |
| DocumentType | 文档类型声明 | name, publicId, systemId |
| CharacterData | 文本节点基类 | data, length, substringData() |
| Text | 文本节点 | 继承CharacterData，wholeText, splitText() |
| Comment | 注释节点 | 继承CharacterData |
| CDATASection | CDATA节点 | 继承Text |
| ProcessingInstruction | 处理指令 | target, data |
范围与选择对象
| 对象 | 描述 | 常用方法 |
|---|---|---|
| Range | 文档范围 | setStart(), setEnd(), selectNode(), extractContents() |
| Selection | 用户选择 | anchorNode, focusNode, toString(), removeAllRanges() |
表单数据对象
| 对象 | 描述 | 常用方法 |
|---|---|---|
| FormData | 表单数据 | append(), get(), set(), entries() |
| ValidityState | 表单验证状态 | valid, valueMissing, typeMismatch, patternMismatch |
| File | 文件对象 | name, size, type, lastModified |
| FileList | 文件列表 | length, item(index) |
其他重要对象
| 对象 | 描述 | 用途 |
|---|---|---|
| Location | 浏览器地址信息 | href, hash, host, pathname, search, reload(), replace() |
| History | 浏览器历史 | length, back(), forward(), go(), pushState() |
| Navigator | 浏览器信息 | userAgent, platform, language, geolocation |
| Screen | 屏幕信息 | width, height, availWidth, colorDepth |
| Performance | 性能信息 | timing, memory, now() |
| Storage | 本地存储 | localStorage, sessionStorage |
| URLSearchParams | URL查询参数 | get(), set(), append(), toString() |
实用技巧
javascript
// 常见对象类型判断
console.log(document instanceof Document); // true
console.log(document.body instanceof HTMLElement); // true
console.log(document.body instanceof Element); // true
console.log(document.body instanceof Node); // true
// 节点类型常量
Node.ELEMENT_NODE (1) // 元素节点
Node.TEXT_NODE (3) // 文本节点
Node.COMMENT_NODE (8) // 注释节点
Node.DOCUMENT_NODE (9) // 文档节点
Node.DOCUMENT_TYPE_NODE (10) // 文档类型节点这个表格涵盖了Web开发中最常用的DOM对象，理解这些对象的层次关系和特性对于高效操作DOM至关重要。