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

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

你可能感兴趣的:(ecmascript,javascript,前端)