【ECMAScript】DOM节点类型知识点的梳理和总结

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	快捷引用 Document节点的子节点可以是 Node.ELEMENT_NODE - 1 Node.PROCESSING_INSTRUCTION_NODE-7 Node.COMMENT_NODE - 8 Node.DOCUMENT_TYPE_NODE - 10
Document.prototype.doctype	快捷引用
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属性的元素，值为HTMLCollection类型
Document.prototype.forms	功能：获取文档中所有 元素，值为HTMLCollection类型
Document.prototype.images	功能：获取文档中所有元素，值为HTMLCollection类型
Document.prototype.links	功能：获取文档中所有带href属性的元素，值为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 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对象 不支持子节点

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 可以联想到<>和

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 - 属性节点集合

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~