【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	快捷引用<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	布尔值，表示属性是使用默认值还是指定的值