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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/237619.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue element plus 管理系统路由菜单简要设计(后端获取菜单)

1 需求 管理系统“菜单”由后端接口返回&#xff0c;前端需要根据后端返回的“菜单”数组&#xff0c;构造路由&#xff0c;渲染侧栏菜单有些菜单是子菜单&#xff0c;有对应的路由&#xff0c;但是不在侧栏显示&#xff08;比如一些详情页面&#xff09; 注&#xff1a;这里的…

Asp.Net Core 项目中常见中间件调用顺序

常用的 AspNetCore 项目中间件有这些&#xff0c;调用顺序如下图所示&#xff1a; 最后的 Endpoint 就是最终生成响应的中间件。 Configure调用如下&#xff1a; public void Configure(IApplicationBuilder app, IWebHostEnvironment env){if (env.IsDevelopment()){app.UseD…

LIGA-Stereo:为基于立体 3D 检测器的学习 LiDAR 几何感知表示

论文地址&#xff1a;https://openaccess.thecvf.com/content/ICCV2021/papers/Guo_LIGA-Stereo_Learning_LiDAR_Geometry_Aware_Representations_for_Stereo-Based_3D_Detector_ICCV_2021_paper.pdf 论文代码&#xff1a;https://github.com/xy-guo/LIGA-Stereo 摘要 基于立…

CloudCanal x Debezium 打造实时数据流动新范式

简述 Debezium 是一个开源的数据订阅工具&#xff0c;主要功能为捕获数据库变更事件发送到 Kafka。 CloudCanal 近期实现了从 Kafka 消费 Debezium 格式数据&#xff0c;将其 同步到 StarRocks、Doris、Elasticsearch、MongoDB、ClickHouse 等 12 种数据库和数仓&#xff0c;…

js 图片 手动上传,并回显

效果展示&#xff1a; 代码&#xff1a; <label for"avatarUpload"><div><img v-if"avatatImageUrl" :src"avatatImageUrl" class"avatar"><img v-else src"../../assets/images/account/avatar-upload.png…

vite 引入构建分析插件

yarn add rollup-plugin-visualizer vite.config.js里配置 plugins: [copy({targets: [{ src: node_modules/echarts/dist/component/echarts.min.js, dest: public/js }]}),visualizer({// 打包完成后自动打开浏览器&#xff0c;显示产物体积报告open: true,gzipSize: true,b…

聊聊Spring Boot配置文件:优先级顺序、bootstrap.yml与application.yml区别详解

Spring Boot 配置文件 优先级顺序 在Spring Boot中&#xff0c;配置文件的优先级顺序是&#xff1a;bootstrap.yml > application.yml > application-{profile}.yml&#xff0c;其中 {profile} 表示不同的环境配置&#xff0c;如 dev、test、prod 等。当存在相同名称的…

图像识别与人工智能到底是何关系?有何区别?

图像识别是人工智能领域的一个重要应用领域&#xff0c;它利用人工智能技术和算法来分析和理解图像内容。图像识别是使计算机能够模拟和理解人类视觉系统的能力&#xff0c;并从图像中提取出有用的信息和特征。 人工智能在图像识别中扮演着至关重要的角色&#xff0c;主要体现…

ruoyi若依前后端分离版部署centos7服务器(全)

目录 VMware虚拟机 centos7 安装环境如下 一、msql 5.7 二、nginx1.23.3 三、java8 四、redis 3.2.1 五、部署若依前端 六、部署若依后端 前言 虚拟机的桥接与nat模式 : 重点 重点&#xff01;&#xff01;&#xff01; 无线不可以用桥接模式 &#xff0c;而你用了nat模式会…

OpenSergo使用详解

简介 OpenSergo是一个基于微服务治理的标准和生态&#xff0c;覆盖了服务元信息、流量治理、服务容错、数据库/缓存治理、服务注册发现、配置治理等十几个关键领域&#xff0c;覆盖了完整的微服务生命周期&#xff08;从开发态到测试态&#xff0c;到发布态&#xff0c;再到运…

jar包文件替换

1. 新建文件夹&#xff0c;将jar包放进去 2. 解压jar包 jar -xvf xxx.jar解压后就会发现当前目录多了3个文件夹&#xff0c;分别是&#xff1a;BOOT-INF、META-INF、org 3. 替换jar&#xff08;替换对应的文件&#xff09; 4. 压缩&#xff08;原来的jar包不要删除&#xf…

conda 虚拟环境使用

查看已有的虚拟环境 conda env list 创建虚拟环境且带python conda create -n test123 python3.7 激活虚拟环境&#xff08;To activate this environment&#xff09; conda activate test123 安装需要的包 python -m pip install opencv-python 退出虚拟环境&#xff08;To…

融云数智办公获 IT168「2023 年度信创卓越贡献奖」

近期&#xff0c;业界知名 IT 垂直门户媒体 IT168 正式揭晓其年度大型评选“2023 年技术卓越奖”结果&#xff0c;融云榜上有名。关注【融云 RongCloud】&#xff0c;了解协同办公平台更多干货。 融云数智办公作为信创领域明星产品荣获“2023 年度信创卓越贡献奖”。 复杂多变…

flink使用sql-client-defaults.yml无效

希望在flink sql脚本启动时自动选择catalog&#xff0c;减少麻烦。于是乎配置sql-client-defaults.yaml&#xff1a; catalogs:- name: hive_catalogtype: icebergcatalog-type: hiveproperty-version: 1cache-enabled: trueuri: thrift://localhost:9083client: 5warehouse: …

剑指 Offer(第2版)面试题 45:把数组排成最小的数

剑指 Offer&#xff08;第2版&#xff09;面试题 45&#xff1a;把数组排成最小的数 剑指 Offer&#xff08;第2版&#xff09;面试题 45&#xff1a;把数组排成最小的数解法1&#xff1a;排序 剑指 Offer&#xff08;第2版&#xff09;面试题 45&#xff1a;把数组排成最小的数…

理解Systemd服务重启策略:on-failure vs always

在维护Linux系统时&#xff0c;服务管理是保持系统稳定性的关键组成部分。Systemd作为现代Linux系统的初始化系统和服务管理器&#xff0c;提供了强大的工具来确保服务在遭遇故障时能够自动重启。在Systemd的服务单元文件中&#xff0c;Restart指令是控制服务重启行为的核心设置…

MySQL数据库8.0+版本部署安装

1、安装前准备 1.1、安装文件上传 以mysql-8.0.32版本为例&#xff0c;将 mysql-8.0.32-linux-glibc2.12-x86_64.tar.xz 、my.cnf上传至/opt/software目录。 安装文件百度网盘下载地址&#xff1a; mysql-8.0.32&#xff1a;https://pan.baidu.com/s/1gtPYEa2aT0V2-1Q3-KKxl…

使用HTTP协议有哪些风险?HTTP与HTTPS的区别是什么

作为两种常见的网络协议&#xff0c;HTTP和HTTPS都是用于在浏览器和服务器之间传输数据的。然而在保障数据安全性方面&#xff0c;HTTPS远远优于HTTP。在网络安全愈发重要的当下&#xff0c;HTTP协议的不安全性使得其逐渐被淘汰弃用。那么使用HTTP协议有哪些风险呢&#xff1f;…

SQL---数据抽样

内容导航 类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统…

关于“Python”的核心知识点整理大全34

目录 第&#xff11;3 章 外星人 13.1 回顾项目 game_functions.py 13.2 创建第一个外星人 13.2.1 创建 Alien 类 alien.py 13.2.2 创建 Alien 实例 alien_invasion.py 13.2.3 让外星人出现在屏幕上 game_functions.py 13.3 创建一群外星人 13.3.1 确定一行可容纳…