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

2023-12-21 21:34:19
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(node)

功能:是否存在子节点

输入:Node

输出:boolean

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

HTMLDocument.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

HTMLDocument.prototype.doctype快捷引用<!DOCTYPE html>
HTMLDocument.prototype.body快捷引用body节点
HTMLDocument.prototype.head快捷引用head节点
HTMLDocument.prototype.title快捷引用title节点
文档地址相关
HTMLDocument.prototype.URL取完整URL,和location.href相似
HTMLDocument.prototype.domain(可设置)取域名,和locaiton.hostname
HTMLDocument.prototype.referrer取来源
定位元素
HTMLDocument.prototype.getElementById(id)

功能:通过标签的ID获取元素

输入:string

输出:Node

HTMLDocument.prototype

.getElementsByTagName(tag)

功能:通过标签名获取元素

输入:string(标签名字符串)

输出:HTMLCollection(和NodeList很像)

HTMLDocument.prototype.anchors

功能:获取文档所有带name属性的<a>元素,值为HTMLCollection类型

HTMLDocument.prototype.forms功能:获取文档中所有<form>元素,值为HTMLCollection类型
HTMLDocument.prototype.images功能:获取文档中所有<img>元素,值为HTMLCollection类型
HTMLDocument.prototype.links功能:获取文档中所有带href属性的<a>元素,值为HTMLCollection类型
文档写入
HTMLDocument.prototype.write()功能:向网页输出流写入内容
HTMLDocument.prototype.writeln()功能:向网页输出流写入内容,带换行符
HTMLDocument.prototype.open()功能:打开网页输出流
HTMLDocument.prototype.close()功能:关闭网页输出流
document.createElement(str)

功能:创建元素

输入:string - 标签字符串

输出:Element

document.createTextNode(str)

功能:创建文本节点

输入:string - 文本

输出:Text

document.createComent(str)

功能:创建注释节点

输入:string - 注释文本

输出:Comment

document.createCDATASection(str)功能:创建CDATA区块节点
document.createDocumentFragment()

功能:创建文档片段

输入:无

输出:DocumentFragment

document.createAttribute(str)

功能:创建属性节点

输入:string - 属性名

输入:Attr

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语言的方向

属性的获取和设置

差异:

? ? ? ? ? ? ? ?????????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功能:获取属性节点
Element.prototype.setAttributeNode功能:设置属性节点
Element.prototype.attributes

功能:返回NamedNodeMap类型数据(属性节点集合,类似NodeList)

NamedNodeMap.prototype.getNamedItem(name)

NamedNodeMap.prototype.removeNamedItem(name)

NamedNodeMap.prototype.setNamedItem(node)

NamedNodeMap.prototype.item(pos)?

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

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

文章来源:https://blog.csdn.net/weixin_45620943/article/details/135129170
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。