当前位置: 首页 > 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;单例代表在这个进程的某个类是唯一…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...