js【详解】DOM
文档对象模型(Document Object Model,简称DOM)
DOM 是哪种数据结构 ?
DOM 的本质是浏览器通过HTML代码解析出来的一棵 树。
操作 DOM 常用的 API 有哪些 ?
获取 DOM 节点
//方式 1:通过【id】获取,返回目标 DOM 元素
let div1 = document.getElementById("box1"); //方式 2:通过【标签名】获取,返回【类数组】
let arr_class_1 = document.getElementsByTagName("div"); //方式 3:通过【样式类名】获取,返回【类数组】
let arr_class_2 = document.getElementsByClassName("hehe"); //方式 4:通过【CSS选择器】获取,返回符合条件的第一个 DOM 元素
let div1 = document.querySelector("selector") //方式 5:通过【CSS选择器】获取,返回符合条件的所有元素构成的【类数组】
let arr_class_2=3 =document.querySelectorAll("selector")
修改 DOM 节点
property
property 方式:按对象属性的方式操作 DOM
// 元素.style.样式名 = 新样式值
元素.style.width = "300px";
// 含 - 的样式名,需用驼峰写法
元素.style.backgroundColor = "red";
// 一次修改多个样式
元素.style.cssText = "width: 300px;height: 300px;background-color: green;"
// 获取样式
元素.style.样式名
attribute
attribute 方式:使用setAttribute,getAttribute 操作 DOM 的属性
// 元素节点.setAttribute("属性名", "新的属性值");
myNode.setAttribute("class","red");
myNode.getAttribute("class") // red
property 和 attribute 的区别
-
property【推荐】 修改对象属性,不会体现到 html 结构中,可能会引起 DOM 重新渲染
更推荐使用 property 是因为浏览器的优化,某些修改不会触发 DOM 重新渲染
-
attribute 修改 html 属性,会改变 html 结构,一定会引起 DOM 重新渲染
创建 DOM 节点
// document.createElement("标签名")
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
创建文档片段
const frag = document.createDocumentFragment()
使用范例如下:

插入 DOM 节点
const div2 = document.getElementById('div2')
// 插入节点
div1.appendChild(newP)
移动 DOM 节点
// 移动节点
const p1 = document.getElementById('p1')
div2.appendChild(p1)
删除 DOM 节点
父节点.removeChild(子节点)
获取父节点
子节点.parentNode
获取子节点列表(类数组)
const div1 = document.getElementById('div1')
// 父节点.childNodes
let div1ChildNodes = div1.childNodes
【考点】如何提升 DOM 的性能?
DOM 渲染会阻断 js 的运行,且对计算机的资源消耗很大,所以需要尽量减少 DOM 操作,来提升其性能,具体方式如下:
-
对 DOM 的查询做缓存

-
将频繁的 DOM 操作改为一次性操作
优化前

优化后

相关文章:
js【详解】DOM
文档对象模型(Document Object Model,简称DOM) DOM 是哪种数据结构 ? DOM 的本质是浏览器通过HTML代码解析出来的一棵 树。 操作 DOM 常用的 API 有哪些 ? 获取 DOM 节点 //方式 1:通过【id】获取…...
《互联网的世界》第六讲-去中心化和安全
互联网构建于开放互联的中立原则之上,公平接入,数据互联互通,流量被无差别对待,这意味着互联网本质上是匿名,去中心的,这与我们的现实世界完全不同。 但互联网上的主流业务却是 c/s 产销模式,试…...
nginx代理参数proxy_pass
proxy_pass参数用于配置反向代理,指定客户端请求被转发到后端服务器,后端地址可以是域名、ip端口URI 代理后端报错提示本地找不到CSS文件、JavaScript文件或图片 例如: nginx :10.1.74.109 后端服务:http://10.1.74.…...
_note_01
1.什么是跨平台 跨平台是指一个应用程序或一个编程语言,可以在不同的操作系统或平台上运行,而不需要对代码进行修改或重新编译。 跨平台应用程序或编程语言的设计和实现可以使开发者减少对特定平台的依赖,从而降低维护和开发的成本。同时&am…...
聊聊python中面向对象编程思想
面向对象编程思想 1、什么是面向过程 传统的面向过程的编程思想总结起来就八个字——自顶向下,逐步细化! → 将要实现的功能描述为一个从开始到结束按部就班的连续的“步骤” → 依次逐步完成这些步骤,如果某一个步骤的难度较大ÿ…...
MySQL-视图:视图概述、使用视图注意点、视图是否影响基本表
视图 一、视图概述二、使用视图注意点三、视图操作是否影响基本表 一、视图概述 在数据库管理系统中,视图(View)是一种虚拟表,它并不实际存储数据,而是基于一个或多个实际表的查询结果。视图提供了一种对数据库中数据…...
鸿蒙开发(四)-低代码开发
鸿蒙开发(四)-低代码开发 本文主要介绍下鸿蒙下的低代码开发。 鸿蒙低代码是指在鸿蒙操作系统进行应用开发时,采用简化开发流程和减少编码量的方式来提高开发效率。 1:开启低代码开发 首先我们打开DevEco Studio .然后创建工程。 如图所示ÿ…...
BUU [网鼎杯 2020 半决赛]AliceWebsite
BUU [网鼎杯 2020 半决赛]AliceWebsite 开题: hint附件是源码。在index.php中有一个毫无过滤的本地文件包含 <?php $action (isset($_GET[action]) ? $_GET[action] : home.php); if (file_exists($action)) {include $action; } else {echo "File not…...
超越 Siri 和 Alexa:探索LLM(大型语言模型)的世界
揭秘LLM:语言模型新革命,智能交互的未来趋势 近年来,虚拟助手的世界发生了重大转变。 虽然 Siri 和 Alexa 本身就是革命性的,但一种称为大型语言模型 (LLM) 的新型人工智能正在将虚拟助手的概念提升到一个全新的水平。 在这篇博文…...
Linux删除Mysql
//rpm包安装方式卸载 查包名:rpm -qa|grep -i mysql 删除命令:rpm -e –nodeps 包名//yum安装方式下载 1.查看已安装的mysql 命令:rpm -qa | grep -i mysql 2.卸载mysql 命令:yum remove mysql-community-server-5.6.36-2.el7.x86…...
CNN中常见的池化操作有哪些,作用是什么?
CNN中常见的池化操作有哪些,作用是什么? CNN中常见的池化操作只要是两种,平均值池化和最大值池化最大值池化常用于分类任务,是指在输入数据的局部区域内取最大值作为输出。最大池化的作用是降低特征图的尺寸,减少参数…...
能打印单据的软件,如进出库单据,物流快运单据,定制单据样式
能打印单据的软件,如进出库单据,物流快运单据,定制单据样式 一、前言 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、不同行业打印的单据不同 2、同一个行业打印的样式可能不同 3、有的行业已经印刷好了许多打印…...
uniapp列表进入动画
app列表入场动画 - DCloud 插件市场 列表入场动画https://ext.dcloud.net.cn/plugin?id16957...
FPGA TestBench编写学习
1 timescale 1.1 简介 timescale指令用于指定编译器在处理仿真时的时间单位和时间精度。这个指令通常在模块的顶层声明中使用,它告诉编译器和仿真器如何解释代码中的时间值。 timescale指令的语法如下: timescale <time_unit> <time_precis…...
Centos7 安装mongoDB
下载安装包 curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.2.12.tgz 解压 tar -zxvf mongodb-linux-x86_64-3.2.12.tgz移动到指定位置 mv mongodb-linux-x86_64-3.2.12/ /usr/local/mongodb在/usr/local/mongodb下创建文件夹 cd /usr/local/mongodb m…...
Redis冲冲冲——Redis持久化方式及其区别
目录 引出Redis持久化方式Redis入门1.Redis是什么?2.Redis里面存Java对象 Redis进阶1.雪崩/ 击穿 / 穿透2.Redis高可用-主从哨兵3.持久化RDB和AOF4.Redis未授权访问漏洞5.Redis里面安装BloomFilte Redis的应用1.验证码2.Redis高并发抢购3.缓存预热用户注册验证码4.R…...
谷粒商城【成神路】-【10】——缓存
目录 🧂1.引入缓存的优势 🥓2.哪些数据适合放入缓存 🌭3.使用redis作为缓存组件 🍿4.redis存在的问题 🧈5.添加本地锁 🥞6.添加分布式锁 🥚7.整合redisson作为分布式锁 🚗…...
Facebook、亚马逊账号如何养号?
之前我们讨论过很多关于代理器的问题。它们的工作原理是什么?在不同的软件中要使用那些代理服务器?这些代理服务器之间的区别是什么?什么是反检测浏览器等等。 除了这些问题,相信很多人也会关心在使用不同平台的时代理器的选择问题。比如,为什么最好…...
Milvus的相似度指标
官网:https://milvus.io/docs/metric.md版本: v2.3.x 在 Milvus 中,相似度度量用于衡量向量之间的相似度。选择良好的距离度量有助于显着提高分类和聚类性能。下表展示了这些广泛使用的相似性指标如何与各种输入数据形式和 Milvus 索引相匹配。 一、浮…...
如何在unity中实现倒计时
public class showtime : MonoBehaviour {public TextMeshProUGUI Countdown;void Update(){if (Input.GetKeyDown(KeyCode.Space))//如果按下空格后开始倒计时{StartCoroutine(hahaha());}}IEnumerator hahaha()//声明了一个协程函数 hahaha{int time 10;Countdown.text tim…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...
基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent
安全大模型训练计划:基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标:为安全大模型创建高质量、去偏、符合伦理的训练数据集,涵盖安全相关任务(如有害内容检测、隐私保护、道德推理等)。 1.1 数据收集 描…...
macOS 终端智能代理检测
🧠 终端智能代理检测:自动判断是否需要设置代理访问 GitHub 在开发中,使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新,例如: fatal: unable to access https://github.com/ohmyzsh/oh…...
