当前位置: 首页 > news >正文

有趣且重要的JS知识合集(21)浏览器内置对象讲解之Dom篇

1、Dom

1.1、概念

Document Object Model(文档对象模型), 整个WEB页面, 所有的Dom元素都在Document整个文档里。DOM就是把整个文档页面当做一个对象进行操作, document 下 包含了 根据 html 创建 的 Dom 对象, 这个DOM对象, 以树形结构展示, 即DOM树

1.2、Node类型

  1. Node.ELEMENT_NODE:数值1,对应元素节点Element。
  2. Node.ATTRIBUTE_NODE:数值2,对应属性节点Attr。
  3. Node.TEXT_NODE:数值3,对应文本节点Text。
  4. Node.CDATA_SECTION_NODE:数值4,对应文档中CDATA部(不会由解析器解析的文本)。
  5. Node.ENTITY_REFERENCE_NODE:数值5,对应实体引用。
  6. Node.ENTITY_NODE:数值6,对应实体类型Entity。
  7. Node.PROCESSING_INSTRUCTION_NODE:数值7,对应处理指令。
  8. Node.COMMENT_NODE:数值8,对应注释节点Comment。
  9. Node.DOCUMENT_NODE:数值9,对应文档节点Document。
  10. Node.DOCUMENT_TYPE_NODE:数值10,对应文档类型节点DocumentType。
  11. Node.DOCUMENT_FRAGMENT_NODE:数值11,对应文档片段节点DocumentFragment。
  12. Node.NOTATION_NODE:数值12,对应DTD中声明的符号

1.3、节点和元素

元素也是节点的一种,所以是包含关系,元素对应类型为ELEMENT_NODE
节点:

  1. 父节点:parentNode
  2. 前兄弟节点:previousSibling
  3. 后兄弟节点:nextSibling
  4. 子节点:childNodes
  5. 第一个子节点:fristChild
  6. 最后一个子节点:lastChild

元素:

  1. 父元素:parentElement
  2. 前兄弟节点:previousElementSibling
  3. 后兄弟节点:nextElementSibling
  4. 子节点:children
  5. 第一个子节点:firstElementChild
  6. 最后一个子节点:lastElementChild

2、DOM操作

2.1、创建

1、document.write

这是我们最开始学习html会遇到的:文档流
浏览器在打开页面时会开启一个文档流,来渲染每个标签,从上到下执行完了后会关闭文档流,
但要是执行完后,再添加document.write,就会输出覆盖body下的所有内容,目前来看,此用法没啥使用场景

2、innerHTML

看到这个会想起innerText和textContent,其实这三区别主要是innerText和textContent是纯文本内容,内部不能插入标签因为不会被解析,而innerHTML可以解析插入的标签,而innerText和textContent区别,我会在最后疑难讲解中仔细说
如果直接用等号(=),会覆盖原来的值,用加等(+=),从视觉角度没有覆盖,就是增加新元素,本质上是把原来的元素取出来,再和新的元素一起添加进去,其实也是覆盖了原来的内容,它会让原来的元素事件失效
textContent 是 Node 对象的属性
innerHTML 是 Element 对象的属性
innerText 是 HTMLElement 对象的属性

3、createElement

创建一个元素
document.createElement(tagName[, options])
tagName: 指定要创建元素类型的字符串
options: 这是高阶用法了,基本没用到
其值是包含一个属性名为 is 的对象,该对象的值是用 customElements.define() 方法定义过的一个自定义元素的标签名

// 定义新元素
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
let expandingList = document.createElement("ul", { is: "expanding-list" });

2.2、增加

2.2.1、appendChild

增到到最后面,即追加:父元素.appendChild(标签名) 注意:这个标签名是变量,不能加引号

2.2.2、insertBefore

增加到某一子元素前面,即插入:父元素.insertBefore(标签名,在哪个元素之前插入)
如果添加的是新创建的元素,就是添加,否则相当于是移动

2.2.3、cloneNode

浅克隆:cloneNode(),只克隆样式(即标签),无内容
深克隆:cloneNode(true),克隆了样式和内容,但是没有方法

2.3、删除

父元素.removeChild(要被删除的元素)

2.4、查找

1、获取单个DOM对象:document.getElementById(‘id’)
2、获取DOM伪数组
xxx.getElementsByTagName(‘标签名’)
xxx.getElementsByClassName(‘类名’)
xxx.querySelector
xxx.quertSelectorAll
获取父元素:parentNode
获取父元素下的子元素:children

  1. children 属性是 Element 对象的一个只读属性,返回一个只包含元素节点(Element 节点)的 HTMLCollection。
  2. children 只会包含元素节点,不包括其他类型的节点(如文本节点或注释节点)。
  3. children 不会包含那些隐藏的元素,比如使用 CSS 的 display: none; 或 visibility: hidden; 隐藏的元素。
  4. 例如,如果一个 div 元素下有若干个子元素,div.children 将返回一个包含这些子元素的 HTMLCollection。
    获取父元素下的所有元素childNodes
  5. childNodes 属性是 Node 对象的一个只读属性,返回一个包含所有子节点的 NodeList。
  6. childNodes 包含父元素下的所有子节点,包括元素节点、文本节点、注释节点等。
  7. childNodes 返回的是一个动态的 NodeList,会随着 DOM 结构的变化而更新。
  8. 例如,如果一个 div 元素下有若干个子节点,包括元素节点、文本节点和注释节点,div.childNodes 将返回包含所有这些子节点的 NodeList。

2.5、修改元素属性

常见:src、href、tittle等
表单:disabled(是否禁用)、checked(单复选框是否选中)、selected(下拉菜单是否选中),这些属性,在js中是写上就代表使用了,因此修改的时候,赋值为true 或false即可
修改样式:dom.style.xxx = ‘xxx’
修改类名:dom.className = ‘’
classList:是一个伪数组,它保存当前这个元素所有的类

  1. add() 添加一个类
    如果要添加多个类,用逗号隔开,每个类都是独立的一个参数
  2. remove() 删除一个类
    如果要删除多个类,用逗号隔开,每个类都是独立的一个参数
  3. contains() 判断是否有某个类
    如果有得到true,如果没有得到false
  4. toggle() 切换一个类
    原来有这个类就删除,原来没有这个类就添加
  5. replace() 替换一个类
    参数1:被替换的类
    参数2:要替换的新类1

2.6、修改自定义属性(拓展)

  1. 新增或设置DOM的属性值:setAttribute()
  2. 获取DOM的属性值:getAttibute()
  3. 移除DOM的属性值(自定义和非自定义都可以移除):removeAttibute()
  4. dateset:
    自定义属性写法规范:以用data-开头,方便识别哪些是自定义的属性
    方法:元素.dataset
    它是一个对象,可以获取所有以data-开头的自定义的属性
    获取单个属性,用元素.dataset.属性名
    设置元素属性,元素.dataset.属性名 = 数据

3、疑难讲解

3.1、innerText和textContent区别?

对浏览器来说,有textContent会优先使用textContent,因为innerText的返回值依赖于页面的显示,而textContent依赖于代码的内容,所以innerText设置会引起浏览器的回流(reflow),至于回流和重绘我就不细讲了,textContent则不会,所以textContent不会导致浏览器有性能问题
innerText被设置 display: none 时,会返回对应节点文本
innerText被设置 visibility: hidden 时,不会返回对应节点文本

3.2 children和childNodes这种伪数组如何遍历?

1、最简单的都是伪数组转数组
Array.from(伪数组).forEach(() => {})
[].slice.call(伪数组, () => {})
[].forEach.call(伪数组, () => {})
2、NodeList类型的伪数组默认可以调用forEach, for
3、HTMLCollection类型的伪数组默认可以调用for

3.3、各种节点类型的详解

3.3.1 Document

JavaScript通过Document类型表示文档。浏览器中的document对象是HTMLDocument的一个实例,表示整个HTML页面。Document节点具有以下特征:

  1. nodeType为Node.DOCUMENT_NODE,值为9。
  2. nodeName的值为#document。
  3. nodeValue的值为null。
  4. parentNode的值为null。
  5. ownerDocument的值为null。
  6. 其子结点可能是一个DocumentType、Element、ProcessingInstruction或Comment。

3.3.2 Element

Element类型用于表现XML或HTML元素,提供对元素标签名、子节点及特性的访问。例如和

等。Element节点具有以下特征:

  1. nodeType为Node.ELEMENT_NODE,值为1。
  2. nodeName的值为元素的标签名。
  3. nodeValue的值为null。
  4. parentNode可能是Document或Element。
  5. 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。

3.3.3 Attr

Attr类型在DOM表示元素特性。特性是位于元素attributes属性中的节点。具有下列特征:

  1. nodeType为Node.TEXT_NODE,值为3。
  2. nodeName的值是特性的名称。
  3. nodeValue的值是特性的名称。
  4. parentNode的值为null。
  5. 在HTML中不支持子节点(没有子节点)。
  6. 在XML中子节点可以是Text或EntityReference

3.3.4 Text

文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符,但不能包含HTML代码。Text节点具有以下特征:

  1. nodeType为Node.TEXT_NODE,值为3。
  2. nodeName的值为#text。
  3. nodeValue的值为节点所包含的文本。
  4. parentNode是一个Element。
  5. 不支持子节点(没有子节点)。

3.3.5 Comment

注释在DOM中是通过Comment类型来表示的。Comment节点具有下列特征:

  1. nodeType为Node.COMMENT_NODE,数值为8。
  2. nodeName的值为#comment。
  3. nodeValue的值是注释的内容。
  4. parentNode可能是Document或Element。
  5. 不支持子节点(没有子节点)。

3.3.6 CDATASection

CDATASection类型只针对基于XML文档,表示的是CDATA区域。与Comment类似,CDATASection类型继承自Text类型,因此拥有除splitText()之外的所有字符串操作方法。CDATASection节点具有以下特征:

  1. nodeType为CDATA_SECTION_NODE,值为4。
  2. nodeName的值为#cdata-section。
  3. nodeValue的值是CDATA区域中的内容。
  4. parentNode可能是Document或Element。
  5. 不支持子节点(没有子节点)。

3.3.7 DocumentType

DocumentType类型在Web浏览器中并不常用。DocumentType包含着与文档有关的doctype有关的所有信息,它具有下列特征:

  1. nodeType为Node.DOCUMENT_TYPE_NODE,值为10。
  2. nodeName的值为doctype的名称。
  3. nodeValue的值为null。
  4. parentNode是Document类型。
  5. 没有子节点。

3.3.8 DocumentFragment

DocumentFragment是文档片段,一种"轻量级"文档,可以包含和控制节点,但不像完整文档那样占用额外资源。可以将它作为"仓库"使用。具有下列特征:

  1. nodeType为Node.DOCUMENT_FRAGMENT_NODE,值为11。
  2. nodeName的值为#document-fragment。
  3. nodeValue的值为null。
  4. parentNode的值为null。
  5. 子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference。

相关文章:

有趣且重要的JS知识合集(21)浏览器内置对象讲解之Dom篇

1、Dom 1.1、概念 Document Object Model(文档对象模型), 整个WEB页面, 所有的Dom元素都在Document整个文档里。DOM就是把整个文档页面当做一个对象进行操作, document 下 包含了 根据 html 创建 的 Dom 对象, 这个DOM对象, 以树形结构展示, 即DOM树 …...

3.两数相加 - 链表

文章目录 题目简介题目解答代码: 题目链接 大家好,我是晓星航。今天为大家带来的是 两数相加 相关的讲解!😀 题目简介 题目解答 通过题目给的第一个示例来解析 图解如下: l1的2和l2的5首先相加变为7 这里相加结果为7…...

iptables 与 firewalld 防火墙

iptables iptables 是一款基于命令行的防火墙策略管理工具 四种防火墙策略: ACCEPT(允许流量通过) 流量发送方会看到响应超时的提醒,但是流量发送方无法判断流量是被拒绝,还是接收方主机当前不在线 REJECT&#xff08…...

Taskflow:异步任务(Asynchronous Tasking)

简单使用 tf::Executor 提供了异步执行Task的操作tf::Executor::async&#xff0c;并返回Future&#xff0c;用于保留该函数调用的结果。 #include <taskflow/taskflow.hpp>void print_str(char const* str) {std::cout << str << std::endl; }int main() …...

学习鸿蒙基础(9)

目录 一、鸿蒙国际化配置 二、鸿蒙常用组件介绍 三、鸿蒙像素单位介绍 四、鸿蒙布局介绍 1、Row与Column线性布局 2、层叠布局-Stack 3、弹性布局 4、栅格布局 5、网格布局 一、鸿蒙国际化配置 base目录下为默认的string。en_US对应美国的。zh_CN对应中国的。新增一个s…...

spring boot的小数位丢失.00 或者.0

1、背景 在使用spring boot时&#xff0c;前端的界面展示的数据是2 &#xff0c;在数据库中存储的是小数。但是导出Excel的时候数据是 2.00 。奇了怪了为啥会不一样&#xff0c;数据都是一样的没有做过处理。 2、排查问题 经过层层的debug 发现数据库返回的数据是2.00&#x…...

nginx如何清理页面缓存

在 Nginx 中&#xff0c;清理页面缓存通常涉及配置缓存头以控制缓存行为&#xff0c;或者使用外部工具或机制来清除缓存。以下是一些建议来管理和清理 Nginx 的页面缓存&#xff1a; 配置缓存头&#xff1a; Nginx 本身不直接提供缓存机制&#xff0c;但可以通过配置 proxy_cac…...

深度学习pytorch——经典卷积网络之ResNet(持续更新)

错误率前五的神经网络&#xff08;图-1&#xff09;&#xff1a; 图-1 可以很直观的看到&#xff0c;随着层数的增加Error也在逐渐降低&#xff0c;因此深度是非常重要的&#xff0c;但是学习更好的网络模型和堆叠层数一样简单吗&#xff1f;通过实现表明&#xff08;图-2&…...

react 面试题(2024 最新版)

1. 对 React 的理解、特性 React 是靠数据驱动视图改变的一种框架&#xff0c;它的核心驱动方法就是用其提供的 setState 方法设置 state 中的数据从而驱动存放在内存中的虚拟 DOM 树的更新 更新方法就是通过 React 的 Diff 算法比较旧虚拟 DOM 树和新虚拟 DOM 树之间的 Chan…...

JVM(三)——字节码技术

三、字节码技术 1、类文件结构 一个简单的 HelloWorld.java package com.mysite.jvm.t5; // HelloWorld 示例 public class HelloWorld {public static void main(String[] args) {System.out.println("hello world");} }执行 javac -parameters -d . HellowWorld.…...

HarmonyOS 应用开发之Stage模型绑定FA模型ServiceAbility

本小节介绍Stage模型的两种应用组件如何绑定FA模型ServiceAbility组件。 UIAbility关联访问ServiceAbility UIAbility关联访问ServiceAbility和UIAbility关联访问ServiceExtensionAbility的方式完全相同。 import common from ohos.app.ability.common; import hilog from o…...

高效解决Visual Studio无法识别到自定义头文件

文章目录 问题解决方案 问题 说明你没有好好配置项目属性 解决方案 把头文件都集中存放到一个文件夹里 之后我会持续更新&#xff0c;如果喜欢我的文章&#xff0c;请记得一键三连哦&#xff0c;点赞关注收藏&#xff0c;你的每一个赞每一份关注每一次收藏都将是我前进路…...

[数据集][目标检测]道路行人车辆坑洞锥形桶检测数据集VOC+YOLO格式6275张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;6275 标注数量(xml文件个数)&#xff1a;6275 标注数量(txt文件个数)&#xff1a;6275 标注…...

风险与收益

风险与收益 影响资产需求的主要因素财富总量预期收益率资产的流动性影响流动性的主要因素 风险 如何降低风险系统风险和非系统风险机会集合与有效集合资产组合理论 影响资产需求的主要因素 影响资产需求的主要因素包括&#xff1a;财富总量、预期收益率、资产的流动性和风险。…...

linux服务器安装mysql8

1.下载MYSQL 近几天在linux服务器已安装过2次mysql8&#xff0c;亲测有效&#xff0c;没有遇到任何问题&#xff0c;文档已写的很清楚&#xff0c;按步骤来即可。如果按文档有遇到要使用yum命令的话&#xff0c;需要服务器开通外网。 1.1官网下载 进入官网下拉到最后&#x…...

亚信安全荣获2023年度5G创新应用评优活动两项大奖

近日&#xff0c;“关于2023 年度5G 创新应用评优活动评选结果”正式公布&#xff0c;亚信安全凭借在5G安全领域的深厚积累和创新实践&#xff0c;成功荣获“5G技术创新的优秀代表”和“5G应用创新的杰出实践”两项大奖。 面向异构安全能力的5G安全自动化响应系统 作为5G技术创…...

linux之忘记root密码

一&#xff0c;开机到如下地方按下e进入紧急模式 然后再如下位置输入init/bin/bash 然后Ctrlx 二&#xff0c; 修改密码 以上操作分别为 1&#xff09;&#xff0c;重新挂载根目录 mount -o remount,rw / 2&#xff09;&#xff0c;修改密码 passwd root 3&#xff09;&a…...

jspm智能仓储系统

开发语言&#xff1a;Java 框架&#xff1a;ssm 技术&#xff1a;JSP JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclip…...

深入理解数据结构(3):栈和队列详解

文章主题&#xff1a;顺序表和链表详解&#x1f331;所属专栏&#xff1a;深入理解数据结构&#x1f4d8;作者简介&#xff1a;更新有关深入理解数据结构知识的博主一枚&#xff0c;记录分享自己对数据结构的深入解读。&#x1f604;个人主页&#xff1a;[₽]的个人主页&#x…...

单例设计模式(3)

单例模式&#xff08;3&#xff09; 实现集群环境下的分布式单例类 如何理解单例模式中的唯一性&#xff1f; 单例模式创建的对象是进程唯一的。以springboot应用程序为例&#xff0c;他是一个进程&#xff0c;可能包含多个线程&#xff0c;单例代表在这个进程的某个类是唯一…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...