1. 前言
本篇梳理和总结一下DOM相关知识点。
2. Node类型
| 属性和方法 | 说明 |
| Node.ELEMENT_NODE - 1 Node.ATTRIBUTE_NODE - 2 Node.TEXT_NODE - 3 Node.CDATA_SECTION_NODE - 4 Node.ENTITY_REFERENCE_NODE - 5 Node.ENTITY_NODE - 6 Node.PROCESSING_INSTRUCTION_NODE-7 Node.COMMENT_NODE - 8 Node.DOCUMENT_NODE - 9 Node.DOCUMENT_TYPE_NODE - 10 Node.DOCUMENT_FRAMENT_NODE - 11 Node.NOTATION_NODE - 12 | 节点类型 |
| Node.prototype.nodeName Node.prototype.nodeValue | |
| Node.prototype.childNodes | NodeList的实例，NodeList.prototype.item(index) |
| Node.prototype.parentNode | 指向父节点 |
| Node.prototype.previousSibling | 前一个兄弟节点 |
| Node.prototype.nextSibling | 后一个兄弟节点 |
| Node.prototype.firstChild | 第一个子节点 |
| Node.prototype.lastChild | 最后一个子节点 |
| Node.prototype.hasChildNodes() | 功能：是否存在子节点 输入：无 输出：boolean |
| Node.prototype.contains(node) | 功能：当前节点后代中是否存在节点node 输入：Node 输出：boolean |
| Node.prototype .compareDocumentPosition(node) | 功能：检测当前节点与节点node之间的关系 输入：Node 输出：0x1 | 0x2 | 0x4| 0x8 | 0x10 |
| Node.prototype.ownerDocument | 指向文档节点 |
| Node.prototype.appendChild(newNode) | 功能：在childNodes列表末尾添加新节点newNode，返回新添加节点newNode的引用 输入：Node 输出：Node |
| Node.prototype.insertBefore(newNode,refNode) | 功能：插入到childNodes中的指定位置，即在参考节点refNode前插入新节点newNode，返回新添加节点newNode的引用 输入：Node, Node 输出：Node |
| Node.prototype.replaceChild(newNode, refNode) | 功能：替换childNodes中指定节点，即用newNode去替换参考节点refNode，返回refNode引用 输入：Node, Node 输出：Node |
| Node.prototype.removeChild(node) | 功能：移除childNodes中指定节点，返回被移除的节点引用 输入：Node 输出：Node |
| Node.prototype.cloneNode(deep?) | 功能：复制节点，传true表示深度复制，复制整个子树，否则仅复制节点本身，返回新节点 输入：boolean? 输出：Node |
| Node.prototype.normalize() | 功能：搜索节点的所有后代节点，删除空文本节点，合并同胞文本节点 规范化文本节点 |
3. Document类型
| 属性和方法 | 说明 |
| 节点相关 | |
| document.nodeType等于9 document.nodeName等于‘#document’ document.nodeValue等于null document.parentNode等于null document.ownerDocument等于null | document是HTMLDocument实例化对象 HTMLDocument -> Document->Node |
| Document.prototype.documentElement 等同于document.childNodes[0] 或document.firstChild | 快捷引用<html> Document节点的子节点可以是 Node.ELEMENT_NODE - 1 Node.PROCESSING_INSTRUCTION_NODE-7 Node.COMMENT_NODE - 8 Node.DOCUMENT_TYPE_NODE - 10 |
| Document.prototype.doctype | 快捷引用<!DOCTYPE html> |
| Document.prototype.body | 快捷引用body节点 |
| Document.prototype.head | 快捷引用head节点 |
| Document.prototype.title | 快捷引用title节点 |
| 文档地址相关 | |
| Document.prototype.URL | 取完整URL，和location.href相似 |
| Document.prototype.domain（可设置） | 取域名，和locaiton.hostname |
| Document.prototype.referrer | 取来源 |
| 定位元素 | |
| Document.prototype.getElementById(id) | 功能：通过标签的ID获取元素 输入：string 输出：Node |
| Document.prototype .getElementsByTagName(tagName) | 功能：通过标签名获取元素 输入：string（标签名字符串） 输出：HTMLCollection（和NodeList很像） |
| Document.prototype .getElementsByClassName(className) | 功能：通过类名获取所有匹配的后代元素 输入：类名字符串（空格隔开可传多个类名） 输出：NodeList |
| Document.prototype .querySelector(selector) | 功能：匹配该选择器的第一个后代元素，没有匹配返回null 输入：selector字符串 输出：Element | null |
| Document.prototype .querySelectorAll(selector) | 功能：匹配该选择器的后代所有元素，返回NodeList 输入：selector字符串 输出：NodeList |
| Document.prototype.anchors | 功能：获取文档所有带name属性的<a>元素，值为HTMLCollection类型 |
| Document.prototype.forms | 功能：获取文档中所有<form>元素，值为HTMLCollection类型 |
| Document.prototype.images | 功能：获取文档中所有<img>元素，值为HTMLCollection类型 |
| Document.prototype.links | 功能：获取文档中所有带href属性的<a>元素，值为HTMLCollection类型 |
| 文档写入 | |
| Document.prototype.write() | 功能：向网页输出流写入内容 |
| Document.prototype.writeln() | 功能：向网页输出流写入内容，带换行符 |
| Document.prototype.open() | 功能：打开网页输出流 |
| Document.prototype.close() | 功能：关闭网页输出流 |
| Document.prototype .createElement(str) | 功能：创建元素 输入：string - 标签字符串 输出：Element |
| Document.prototype .createTextNode(str) | 功能：创建文本节点 输入：string - 文本 输出：Text |
| Document.prototype .createComent(str) | 功能：创建注释节点 输入：string - 注释文本 输出：Comment |
| Document.prototype .createCDATASection(str) | 功能：创建CDATA区块节点 |
| Document.prototype .createDocumentFragment() | 功能：创建文档片段 输入：无 输出：DocumentFragment |
| Document.prototype .createAttribute(str) | 功能：创建属性节点 输入：string - 属性名 输入：Attr |
| Document.prototype.activeElement | 功能：始终指向当前拥有焦点的DOM元素 |
| Document.prototype.hasFocus() | 功能：判断文档是否拥有焦点 输入：无 输出：boolean |
| Document.prototype.readyState | 功能：表示文档状态 loading | complete |
| Document.prototype.compatMode | 功能：返回渲染模式 标准模式的值'CSS1Compat' 混杂模式的值‘BackCompat’ |
| Document.prototype.characterSet | 功能：当前文档使用的字符集 |
4. Element类型
| 属性和方法 | 说明 |
| nodeType等于1 nodeName值为元素的标签名 （同tagName返回大写标签名） nodeValue值为null parentNode值为Document或Element对象 | HTMLxxxElement -> HTMLElement -> Element -> Node Element类型节点的子节点可以是Element、Text、Coment、ProcessingInstruction、CDATASection、EntityReference等类型节点 |
| id | 元素在文档中惟一标识 |
| className | 一组或一类元素 |
| title | 元素的提示信息 |
| lang | 元素内容的语言 |
| dir | 语言的方向 |
| 元素遍历 | |
| Element.prototype.childElementCount | 功能：返回子元素数量（不含文本节点和注释节点） |
| Element.prototype.firstElementChild | 功能：指向第一个子元素 |
| Element.prototype.lastElementChild | 功能：指向最后一个子元素 |
| Element.prototype .previousElementSibling | 功能：指向前一个同胞元素 |
| Element.prototype .nextElementSibling | 功能：指向下一个同胞元素 |
| 检索元素 | |
| Element.prototype .getElementsByTagName(tag) | 功能：通过标签名获取元素 输入：string（标签名字符串） 输出：HTMLCollection（和NodeList很像） |
| Element.prototype .getElementsByClassName(className) | 功能：通过类名获取所有匹配的后代元素 输入：类名字符串（空格隔开可传多个类名） 输出：NodeList |
| Element.prototype .querySelector(selector) | 功能：匹配该选择器的第一个后代元素，没有匹配返回null 输入：selector字符串 输出：Element | null |
| Element.prototype .querySelectorAll(selector) | 功能：匹配该选择器的所有后代元素，返回NodeList 输入：selector字符串 输出：NodeList |
| Element.prototype.matches(selector) | 功能：判断后代元素是否存在匹配该选择器的元素 输入：selector字符串 输出：boolean |
| 属性的获取和设置 差异： DOM对象 getAttribute 针对类 ‘className’ ‘class’ 针对style CSSStyleDeclaration string 针对事件属性 Function 源代码 总结：DOM编程中，直接取对象属性，用getAttribute取自定义属性 | |
| Element.prototype.getAttribute(attr) | 功能：获取属性的值 输入：string 输出：any |
| Element.prototype.setAttribute(attr, value) | 功能：新增或更新属性的值 输入：string, any |
| Element.prototype.removeAttribute(attr) | 功能：移除属性 输入：string |
| Element.prototype.getAttributeNode(attr) | 功能：获取属性节点 输入：string 输出：Attr |
| Element.prototype.setAttributeNode(attr) | 功能：设置属性节点 输入：Attr |
| Element.prototype.attributes | 功能：返回NamedNodeMap类型数据（属性节点集合，类似NodeList） NamedNodeMap.prototype.getNamedItem(name) NamedNodeMap.prototype.removeNamedItem(name) NamedNodeMap.prototype.setNamedItem(node) NamedNodeMap.prototype.item(pos) |
| Element.prototype.classList | 功能：方便操作className属性 classList是DOMTokenList实例 DOMTokenList.prototype.add(value) 向类名列表添加指定新类名 DOMTokenList.prototype.contains(value) 判断指定类型是否存在 DOMTokenList.prototype.remove(value) 从类名列表删除指定类名 DOMTokenList.prototype.toggle(value) 类名列表中存在指定类名，则删除 不存在，则添加 |
| HTMLElement.prototype.dataset | 功能：方便操作自定义数据属性 div.dataset.appID = 1 <div data-appID='1'></div> dataset是DOMStringMap的实例 |
| Element.prototype.innerHTML | 功能：读取或写入HTML字符串，写入的HTML字符串值以新的DOM子树替换元素中原来包含的所有节点。 |
| Element.prototype.outerHTML | 功能：读取或写入HTML字符串，写入的HTML字符串值以新的DOM树替换包含当前节点本身及其他后代元素。 |
| Element.prototype.innerText | 功能：返回当前节点子代文本节点值的拼接结果 或 将当前节点内部替换成一个文本节点 |
| Element.prototype.outerText | 功能：返回当前节点本身及后代文本节点值的拼接结果 或 将当前节点本身替换成一个文本节点 |
| Element.prototype .insertAdjacentHTML(place, htmlStr) | 输入：beforebegin | afterbegin | beforeend | affterend, string |
| Element.prototype .insertAdjacentText(place, text) | 输入：beforebegin | afterbegin | beforeend | affterend, string |
| Element.prototype.scrollIntoView() | 功能：滚动浏览器窗口或容器元素以便包含元 素进入视口 输入：alignToTop? | scrollIntoViewOptions? |
| Element.prototype.children | 功能：返回Element类型的子元素集合 HTMLCollection |
5. Text类型
| 属性和方法 | 说明 |
| nodeType等于3 nodeName值为‘#text’ nodeValue值为文本 parentNode值为Element对象 只能为叶节点，不支持子节点 | Text -> CharacterData->Node |
| CharacterData.prototype.data | 功能：节点的值 |
| CharacterData.prototype .appendData(text) | 功能：向节点末尾添加文本text |
| CharacterData.prototype .deleteData(offset, count) | 功能：从位置offset开始删除count个字符 |
| CharacterData.prototype .insertData(offset, text) | 功能：在位置offset插件text |
| CharacterData.prototype .replaceData(offset, count, text) | 功能：用text替换从位置offset到offset+count的文本 |
| CharacterData.prototype .substringData(offset, count) | 功能：提取从位置offset到offset+count的文本 |
| Text.prototype.splitText(offset) | 功能：在位置offset将当前文本节点拆分为两个文本节点（与Node.prototyype.normalize相反），返回后面的节点 输入：number 输出：Text |
6. Comment类型
| 属性和方法 | 说明 |
| nodeType等于8 nodeName值为'#comment' noadeValue值为注释的内容 parentNode值为Document或Element对象 不支持子节点 | Coment -> CharacterData -> Node |
| 拥有CharacterData原型对象prototype上的所有方法和属性，操作起来和Text类型的节点类似 | |
7. CDATASection类型（XML文档中有效）
| 属性和方法 | 说明 |
| nodeType等于4 nodeName值为‘#cdata-section’ nodeValue值为CDATA区块的内容 parentNode值为Document或Element对象 不支持子节点 | <![CDATA[This is some content.]]> |
8. DocumentType类型
| 属性和方法 | 说明 |
| nodeType等于10 nodeName值为文档类型的名称 nodeValue值为null parentNode值为Document对象 不支持子节点 | document.doctype.nodeName 得到'html' document.doctype.name 得到'html' document.doctype.entities document.doctype.notations |
9. DocumentFragment
| 属性和方法 | 说明 |
| nodeType等于11 nodeName值为'#document-fragment' nodeValue值为null parentNode值为null | DocumentFragment -> Node 子节点可以是Element 、ProcessingInstruction 、 Comment 、Text 、CDATASection或EntityReference 可以联想到<></>和<Fragment></Fragment> |
10. Attr类型
| 性和方法 | 说明 |
| nodeType等于2 nodeName值为属性名 nodeValue值为属性值 parentNode值为null HTML中不支持子节点 XML中支持Text或EntityReference | Attr -> Node 尽管属性节点也是节点，但不认为是DOM树一部分。 属性一般通过Element原型对象方法getAttribute、setAttribute、removeAttribute操作或DOM对象直接操作，而不通过 NamedNodeMap原型对象方法getNamedItem、removeNamedItem、setNamedItem、item操作 |
| Attr.prototype.name | 与nodeName一样 |
| Attr.prototype.value | 与nodeValue一样 |
| Attr.prototype.specified | 布尔值，表示属性是使用默认值还是指定的值 |
备注：NodeList-节点集合、HTMLCollection-元素节点集合、NamedNodeMap - 属性节点集合
注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~
