〖大前端 - 基础入门三大核心之JS篇㉟〗- JavaScript 的DOM简介
- 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!
- 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。
- 荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。
- 🏆 白宝书系列
- 🏅 启示录 - 攻城狮的自我修养
- 🏅 Python全栈白宝书
- 🏅 ChatGPT实践指南白宝书
- 🏅 产品思维训练白宝书
- 🏅 全域运营实战白宝书
- 🏅 大前端全栈架构白宝书
文章目录
- ⭐ 什么是DOM?
- ⭐ 节点操作
- 🌟 改变元素节点中的内容
⭐ 什么是DOM?
DOM(Document Object Model,文档对象模型)是JavaScirpt操作HTML文档的接口,使文档操作变得非常优雅、简便。
DOM是JS操控HTML和CSS的
桥梁DOM是我们前端开发领域使用最多的技术

DOM里的节点思维
我们先来看一个JS通过DOM操控HTML和CSS的实际的例子。
**例子:**比如下面的HTML结构,现在想用JavaScript在“苹果”后面插入一个p标签,内容是“香蕉”。
<div class="box"><p>西瓜</p><p>葡萄</p><p>苹果</p><p>橘子</p><p>香梨</p>
</div>
题目分析:使用DOM的节点思维:div是一个“节点”,它内部原有5个p“子节点”,这5个子节点是从0开始排序的。现在我们要做的就是新创建一个p节点,然后插入到原有2号子节点的后面。
DOM的最大特点就是将文档表示为
节点树DOM中最大的父节点是document。document是一个特殊的节点,HTML文档中所有的标签、属性及标签里的文本都是它的子节点
比如一个HTML文档的结构,用DOM节点树来表示的话就是这样的:
下图中蓝色的是元素节点、橘黄色的是属性节点、绿色的是内容节点:

由此可见,DOM的节点树和html的层级结构很相似,所以DOM节点是非常人性化、容易理解的。
DOM就是通过操作节点的方式来新增、修改、删除文档里的内容。
⭐ 节点操作
🌟 改变元素节点中的内容
改变元素节点中的内容可以使用两个相关属性:1. innerHTML 2. innerText
innerHTML属性能
以HTML语法设置节点中的内容innerText属性只能
以纯文本的形式设置节点中的内容
示例代码:
innerHTML
<div id="box"></div>
<script>//定义节点变量,o开头暗示这是一个对象var oBox = document.getElementById('box');oBox.innerHTML = '哈士奇';oBox.innerHTML = '<ul><li>python全栈</li><li>产品思维</li><li>大前端</li></ul>';
</script>

innerText
<div id="box"></div>
<script>//定义节点变量,o开头暗示这是一个对象var oBox = document.getElementById('box');oBox.innerText = '哈士奇';oBox.innerText = '<ul><li>python全栈</li><li>产品思维</li><li>大前端</li></ul>';
</script>

总结:innerHTML和innerText的区别就是innerText不会对HTML格式的文本进行解析。
相关文章:
〖大前端 - 基础入门三大核心之JS篇㉟〗- JavaScript 的DOM简介
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作…...
CentOS中安装常用环境
一、CentOS安装 redis ①:更新yum sudo yum update②:安装 EPEL 存储库 Redis 通常位于 EPEL 存储库中。运行以下命令安装 EPEL 存储库 sudo yum install epel-release③:安装 Redis sudo yum install redis④:启动 Redis 服…...
python时间变化与字符串替换技术及读JSON文件等实践笔记
1. 需求描述 根据预测出结果发出指令的秒级时间,使用时间戳,也就是设定时间(字符串)转为数字时间戳。时间计算转换过程中,出现单个整数(例如8点),按字符串格式补齐两位“08”。字符…...
leetcode刷题日记:141. Linked List Cycle(环形链表)
这一题是给我们一个链表让我们判断这是否是一个环形链表,我们知道如果一个链表中有环的话这一个链表是没有办法访问到尾的, 假若有如图所示的带环链表: 我们从图示中很容易看出来这一个链表在访问的时候会在里面转圈,我们再来看看…...
html书本翻页效果,浪漫表白日记本(附源码)
文章目录 1.设计来源1.1 书本正面1.2 界面1-21.3 界面3-41.4 界面5-61.5 界面7-81.6 界面9-101.7 界面11-121.8 书本结尾 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/1…...
【Mysql】学习笔记
目录 基本操作登录指令:启动、关闭、重启mysql指令(适用于centos7):查看mysql运行状态:删除和创建表 修改密码(ubuntu18.04可行,其余版本行不行不知道)3 使用MYSQL了解数据库和表 4 …...
工作记录-------java文件的JVM之旅(学习篇)---好理解
一个java文件,如何实现功能呢?需要去JVM这个地方。 java文件高高兴兴的来到JVM,想要开始JVM之旅,它确说:“现在的我还不能进去,需要做一次转换,生成class文件才行”。为什么这样呢?…...
城市内涝对策,万宾科技内涝积水监测仪使用效果
随着城市化进程的加速,城市道路积水问题明显越来越多,给人们的出行和生活带来更多的不便。内涝积水监测仪作为高科技产品能够实时监测道路积水情况,为城市排水系统的管理和维护提供重要的帮助。 在城市生命线的基础设施规划之中,地…...
android的通知使用
在 Android 中,通知(Notification)是一种在状态栏显示消息的方式,通常用于向用户展示应用程序的重要信息、事件或更新。以下是一个简单的示例,演示如何在 Android 应用程序中使用通知: import android.app…...
001 opencv addWeighted
目录 一、环境 二、addWeighted函数 三、代码演示 一、环境 本文使用环境为: Windows10Python 3.9.17opencv-python 4.8.0.74 二、addWeighted函数 OpenCV中的cv.addWeighted函数是一个用于图像叠加的函数,它可以将两个具有相同尺寸和类型的图像按…...
2311rust,到35版本更新
1.32.0 rustup self update rustup update stablerustup更新自己. dbg宏 打印调试,你需要: let x 5; println!("{:?}", x); //甚至可能是 println!("{:#?}", x);在Rust1.32.0中,为此添加了个新的dbg!宏: fn main() {let x 5;dbg!(x); }如果运行此…...
UniPro提高集成能力 让客户专注于交付价值
一千个哈姆莱特就有一千个读者,一千个开发团队,也会有各不相同的软件工具和工作流程。工具与工具之间,功能上的割裂亦或重叠,都会给企业和团队的协作带来阻塞,结果就会导致团队之间各自为战、信息孤岛的形成以及资源的…...
Python---函数的作用,定义,使用步骤(调用步骤)
Python实际开发中,使用函数的目的只有一个 “让我们的代码可以被重复使用” 函数的作用有两个: ① 模块化编程 ② 代码重用 在编程领域,编程可以分为两大类:① 模块化编程 ② 面向对象编程 函数就是一个 被命名的、独立的…...
ERP智能管理系统:智能化的未来之路
ERP智能管理系统:智能化的未来之路 科技飞速发展,人工智能(AI)和大数据等先进技术的应用正在改变着企业的运营模式。其中,ERP智能管理系统在帮助企业实现智能化运营、提高效率、降低成本等方面发挥着越来越重要的作用。本文将为您详细介绍ERP…...
c++ memccpy和 = 都可以用于赋值操作
memccpy和都可以用于赋值操作,但它们的作用和使用方式有所不同。 是C中的赋值运算符,可以用于基本类型、对象、结构体等的赋值操作。对于结构体,它会执行成员到成员的赋值,也就是浅拷贝。如果结构体中有指针成员,赋值只…...
Golang for 循环中的隐式内存别名问题
Golang for 循环中的隐式内存别名问题 隐式内存别名是指在循环迭代过程中对同一变量的多次引用可能导致不可预期的结果。这主要涉及到 goroutine 和闭包的使用场景,在并发编程中容易引起 bug。 例如,下面的示例代码中存在隐式内存别名问题:…...
2023年亚太杯数学建模思路 - 复盘:光照强度计算的优化模型
文章目录 0 赛题思路1 问题要求2 假设约定3 符号约定4 建立模型5 模型求解6 实现代码 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 问题要求 现在已知一个教室长为15米,宽为12米&…...
Unity——利用Mesh绘制图形
什么是Mesh? Mesh 是用于表示和存储3D模型几何信息的类。它包含了顶点坐标、法线、UV坐标和其他与几何形状相关的数据,同时也包含了定义了这些数据如何连接以形成三角形的索引。 通过Mesh类,你可以创建、修改和渲染3D模型。一些常见的操作包括…...
web3资讯及远程工作
各位如果想了解区块链相关的消息可以通过如下网址了解,里面还会有相关职位招聘(包括远程工作),还可以在里面进行发帖,进入即可获得1000积分,后期可以兑换一些礼品Cryptosquare...
契约锁助力货物进出口全程无纸化,加速通关、降低贸易成本
我国作为全球最大的制造业国家和最大的货物贸易国家,政府始终注重引入数字化技术,创新管理和服务模式,帮助降低企业进出口成本,加速货物流通。 近年国家海关总署、商务部、税务总局及各地政府在进出口“报关”、“提货”、“收货备…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
