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 个正整数，表示一种可能的队…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
九天毕昇深度学习平台 | 如何安装库？
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...