JS08-DOM节点完整版
DOM节点
查找节点
父节点
<div class="father"><div class="son">儿子</div></div><script>let son = document.querySelector('.son')console.log(son.parentNode);son.parentNode.style.display = 'none'</script>
通过子节点来修改父节点的样式
子节点
<button>点击</button><ul><li>我是孩子</li><li>我是孩子</li><li>我是孩子</li><li>我是孩子</li><li>我是孩子</li><li>我是孩子</li></ul><script>let btn = document.querySelector('button')let ul = document.querySelector('ul')btn.addEventListener('click',function(){for (let i = 0; i < ul.children.length; i++){ul.children[i].style.color = 'red'}})console.log(ul.childNodes);</script>
通过父节点修改子节点的样式
兄弟节点
<button>点击</button><ul><li>1</li><li class="two">1</li><li>1</li><li>1</li></ul><script>let btn = document.querySelector('button')let two = document.querySelector('.two')btn.addEventListener('click', function(){two.style.color = 'red'two.nextElementSibling.style.color = 'blue'two.previousElementSibling.style.color = 'yellow'})</script>
nextElementSibling:下一个元素
previousElementSibling：上一个元素
节点操作
追加节点
<ul><li>Zero</li></ul><script>let ul = document.querySelector('ul')let li = document.createElement('li')li.innerHTML = 'colors'ul.insertBefore(li, ul.children[0])// li.innerHTML = 'z'// ul.appendChild(li)</script>
HTML文档中动态地创建一个新的<li>元素，并将其插入到已有的无序列表（<ul>）中。
- 首先，通过
document.querySelector('ul')选取页面上的第一个无序列表元素并将其赋值给变量ul。 - 接着，使用
document.createElement('li')创建一个新的<li>元素，并将其赋值给变量li。 - 然后，设置新创建的
<li>元素的innerHTML属性为'colors'，这样该<li>元素的内容就变成了 “colors”。 - 最后，使用
ul.insertBefore(li, ul.children[0])将新创建的li元素插入到了ul元素的第一个子元素（在这里是"Zero"这个<li>元素）之前。这意味着最终的HTML结构将是：
<ul><li>colors</li><li>Zero</li>
</ul>
克隆节点
<ul><li>内容</li></ul><script>let ul = document.querySelector('ul')let newul = ul.cloneNode(true)document.body.appendChild(newul)</script>
删除节点
<button>点击</button><ul><li>11111111</li><li>11111111</li><li>11111111</li><li>11111111</li></ul><script>let btn = document.querySelector('button')let ul = document.querySelector('ul')btn.addEventListener('click',function(){ul.removeChild(ul.children[0])})</script>
删除子节点
案例
微博案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.w {width: 900px;margin: 0 auto;}.controls textarea {width: 878px;height: 100px;resize: none;border-radius: 10px;outline: none;padding-left: 20px;padding-top: 10px;font-size: 18px;}.controls {overflow: hidden;}.controls div {float: right;}.controls div span {color: #666;}.controls div .useCount {color: red;}.controls div button {width: 100px;outline: none;border: none;background-color: rbg(0, 132, 255);height: 30px;cursor: pointer;columns: #fff;font: bold 14px '宋体';transition: all 0.5s;}.controls div button :hover {background: rgb(0, 255, 255);}.controls div button :disabled {background: rgba(0, 255, 255, 0.5);}.contentList li {padding: 20px 0;border-bottom: 1px dashed #ccc;position: relative;}.contentList .info {position: relative;}.contentList li .info span {position: absolute;top: 15px;left: 100px;font: bold 16px '宋体';}.contentList li .info p {position: absolute;top: 40px;left: 100px;color: #aaa;font-size: 12px;}.contentList img {width: 80px;相关文章：
JS08-DOM节点完整版
DOM节点 查找节点 父节点 <div class="father"><div class="son">儿子</div></div><script>let son = document.querySelector(.son)console.log(son.parentNode);son.parentNode.style.display = none</script>通过…...
【python】python3基础
文章目录 一、安装pycharm 二、输入输出输出 print()文件输出：格式化输出： 输入input注释 三、编码规范四、变量保留字变量 五、数据类型数字类型整数浮点数复数 字符串类型布尔类型序列结构序列属性列表list ，有序多维列表列表推导式 元组tu…...
计算机三级网络技术 选择+大题234笔记
上周停去准备计算机三级的考试啦，在考场上看到题目就知道这次稳了！只有一周的时间，背熟笔记，也能稳稳考过计算机三级网络技术！...
智能合约 之 ERC-721
ERC-721（Non-Fungible Token，NFT）标准 ERC-721是以太坊区块链上的一种代币标准，它定义了一种非同质化代币（Non-Fungible Token，NFT）的标准。NFT是一种加密数字资产，每个代币都具有独…...
== 和 equals 的区别是什么？
和 equals() 在 Java 中都是用于比较两个对象，但它们之间存在显著的差异： 比较的内容： ：这是 Java 中的基本比较运算符，对于基本数据类型（如 int, char, double 等），它比较的是值&a…...
VUE:内置组件＜Teleport＞妙用
一、<Teleport>简介 <Teleport>能将其插槽内容渲染到 DOM 中的另一个位置。也就是移动这个dom。 我们可以这么使用它: 将class为boxB的盒子移动到class为boxA的容器中。 <Teleport to".boxA"><div class"boxB"></div> &…...
ruoyi-nbcio-plus后端里mapstruct-plus和lombok的使用
更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio 演示地址：RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码：…...
企业如何选择一个开源「好」项目？
开源 三句半 需求明确是关键 风险考量要周全 开源虽好不白捡 别忘合规！ 显然，开源已成为一股不可阻挡的洪流，企业拥抱开源，积极参与开源项目不仅是响应技术潮流的必然选择，更是实现自身技术创新、市场拓…...
 并查集)
c++算法学习笔记 (14) 并查集
1.合并集合 一共有 n 个数，编号是 1∼n，最开始每个数各自在一个集合中。 现在要进行 m 个操作，操作共有两种： M a b，将编号为 a 和 b 的两个数所在的集合合并，如果两个数已经在同一个集合中，…...
import * as的使用
import * as 是将一个模块的所有导出内容作为一个命名空间对象导入到当前模块中，其中 * 表示导入该模块中的所有导出内容，而 as 则用于指定导入的命名空间对象的名称。 例如：在 formatter 文件中有两个方法导出 const a () > {console.…...
微服务（基础篇-003-Nacos）
目录 Nacos注册中心（1） 认识和安装Nacos（1.1） Nacos快速入门（1.2） 服务注册到Nacos(1.2.1) Nacos服务分级存储模型（1.3） 配置集群（1.3.1） 根据集群修改…...
java数据结构与算法刷题-----LeetCode215. 数组中的第K个最大元素
java数据结构与算法刷题目录（剑指Offer、LeetCode、ACM）-----主目录-----持续更新(进不去说明我没写完)：https://blog.csdn.net/grd_java/article/details/123063846 文章目录 解题思路：时间复杂度O( n n n)，空间复杂度…...
Springboot 整合 Knife4j （API文档生成工具）
目录 一、Knife4j 介绍 二、Springboot 整合 Knife4j 1、pom.xml中引入依赖包 2、在application.yml 中添加 Knife4j 相关配置 3、打开 Knife4j UI界面 三、关于Knife4j框架中常用的注解 1、Api 2、ApiOperation 3、ApiOperationSupport(order X) 4、ApiImplici…...
C语言---------strlen的使用和模拟实现
字符串是以‘\0’作为结束标志，strlen函数的返回值是‘\0’前面的字符串的个数（不包括‘\0’） 注意 1，参数指向的字符串必须以‘\0’结束 2，函数的返回值必须以size_t,是无符号的 使用代码 #include<stdio.…...
【MATLAB源码-第168期】基于matlab的布谷鸟优化算法(COA)机器人栅格路径规划，输出做短路径图和适应度曲线。
操作环境： MATLAB 2022a 1、算法描述 布谷鸟优化算法（Cuckoo Optimization Algorithm, COA）是一种启发式搜索算法，其设计灵感源自于布谷鸟的独特生活习性，尤其是它们的寄生繁殖行为。该算法通过模拟布谷鸟在自然界中…...
集合深入------理解底层。
集合的使用 前提：栈、堆、二叉树、hashcode、toString()、quesalus()的知识深入和底层理解。 1、什么是集合 集合就是咋们所说的容器 前面我们学习过数组 数组也是容器 容器：装东西的 生活中有多少的容器呀? 水杯 教室 酒瓶 水库 只要是…...
【阅读笔记】《硬笔书法艺术》
硬笔书法基础教程，也介绍了一些实用案例 作者: 万应均 出版社: 湖南人民出版社 笔记 CH1 运笔方式 起笔：起笔、切笔、顺峰、搭峰。 行笔：提笔、按笔、滑笔、转笔、折笔。 收笔：提收、顿收、折收。 CH2 钢笔楷书 “古人善书者…...
5.5.5、【AI技术新纪元：Spring AI解码】使用PGvector设置向量存储及进行相似性搜索
使用PGvector设置向量存储及进行相似性搜索 本节指导您如何设置PGvector VectorStore来存储文档嵌入并执行相似性搜索。 PGvector是一个开源的PostgreSQL扩展，能够支持存储和搜索机器学习生成的嵌入向量，提供查找精确和近似最近邻的功能。它设计得与PostgreSQL的其他特性无…...
EDR下的线程安全
文章目录 前记进程断链回调执行纤程内存属性修改early birdMapping后记reference 前记 触发EDR远程线程扫描关键api：createprocess、createremotethread、void（指针）、createthread 为了更加的opsec，尽量采取别的方式执行恶意代…...
洛谷刷题 | B3623 枚举排列
枚举排列 题目描述 今有 n n n 名学生，要从中选出 k k k 人排成一列拍照。 请按字典序输出所有可能的排列方式。 输入格式 仅一行，两个正整数 n , k n, k n,k。 输出格式 若干行，每行 k k k 个正整数，表示一种可能的队…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来，实在找不到，希望有大佬教一下我。 还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版 图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...
以光量子为例，详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...
短视频矩阵系统文案创作功能开发实践，定制化开发
在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机，点进去 点进去 查看URL，有 ?fileflag.php说明存在文件包含，原理是php://filter 协议 当它与包含函数结合时，php://filter流会被当作php文件执行。 用php://filter加编码，能让PHP把文件内容…...
消防一体化安全管控平台：构建消防“一张图”和APP统一管理
在城市的某个角落，一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延，滚滚浓烟弥漫开来，周围群众的生命财产安全受到严重威胁。就在这千钧一发之际，消防救援队伍迅速行动，而豪越科技消防一体化安全管控平台构建的消防“…...