当前位置： 首页 > news >正文

JS08-DOM节点完整版

news 2026/4/3 18:00:15

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>）中。

  1. 首先，通过document.querySelector('ul')选取页面上的第一个无序列表元素并将其赋值给变量ul。
  2. 接着，使用document.createElement('li')创建一个新的<li>元素，并将其赋值给变量li。
  3. 然后，设置新创建的<li>元素的innerHTML属性为 'colors'，这样该<li>元素的内容就变成了 “colors”。
  4. 最后，使用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>通过…...

编程日记 2024/3/26 1:14:43

【python】python3基础

文章目录 一、安装pycharm 二、输入输出输出 print()文件输出&#xff1a;格式化输出&#xff1a; 输入input注释 三、编码规范四、变量保留字变量 五、数据类型数字类型整数浮点数复数 字符串类型布尔类型序列结构序列属性列表list &#xff0c;有序多维列表列表推导式 元组tu…...

编程日记 2024/3/26 1:13:42

计算机三级网络技术 选择+大题234笔记

上周停去准备计算机三级的考试啦&#xff0c;在考场上看到题目就知道这次稳了&#xff01;只有一周的时间&#xff0c;背熟笔记&#xff0c;也能稳稳考过计算机三级网络技术&#xff01;...

编程日记 2024/3/26 1:12:40

智能合约 之 ERC-721

ERC-721&#xff08;Non-Fungible Token&#xff0c;NFT&#xff09;标准 ERC-721是以太坊区块链上的一种代币标准&#xff0c;它定义了一种非同质化代币&#xff08;Non-Fungible Token&#xff0c;NFT&#xff09;的标准。NFT是一种加密数字资产&#xff0c;每个代币都具有独…...

编程日记 2024/3/26 1:11:39

== 和 equals 的区别是什么？

和 equals() 在 Java 中都是用于比较两个对象&#xff0c;但它们之间存在显著的差异&#xff1a; 比较的内容&#xff1a; &#xff1a;这是 Java 中的基本比较运算符&#xff0c;对于基本数据类型&#xff08;如 int, char, double 等&#xff09;&#xff0c;它比较的是值&a…...

编程日记 2024/3/26 1:09:37

VUE:内置组件＜Teleport＞妙用

一、<Teleport>简介 <Teleport>能将其插槽内容渲染到 DOM 中的另一个位置。也就是移动这个dom。 我们可以这么使用它: 将class为boxB的盒子移动到class为boxA的容器中。 <Teleport to".boxA"><div class"boxB"></div> &…...

编程日记 2024/3/26 1:08:36

ruoyi-nbcio-plus后端里mapstruct-plus和lombok的使用

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…...

编程日记 2024/3/26 1:06:35

企业如何选择一个开源「好」项目？

开源 三句半​​​​​​​ 需求明确是关键 风险考量要周全 开源虽好不白捡 别忘合规&#xff01; 显然&#xff0c;开源已成为一股不可阻挡的洪流&#xff0c;企业拥抱开源&#xff0c;积极参与开源项目不仅是响应技术潮流的必然选择&#xff0c;更是实现自身技术创新、市场拓…...

编程日记 2024/3/26 1:05:34

c++算法学习笔记 (14) 并查集

1.合并集合 一共有 n 个数&#xff0c;编号是 1∼n&#xff0c;最开始每个数各自在一个集合中。 现在要进行 m 个操作&#xff0c;操作共有两种&#xff1a; M a b&#xff0c;将编号为 a 和 b 的两个数所在的集合合并&#xff0c;如果两个数已经在同一个集合中&#xff0c;…...

编程日记 2024/3/26 1:04:33

import * as的使用

import * as 是将一个模块的所有导出内容作为一个命名空间对象导入到当前模块中&#xff0c;其中 * 表示导入该模块中的所有导出内容&#xff0c;而 as 则用于指定导入的命名空间对象的名称。 例如&#xff1a;在 formatter 文件中有两个方法导出 const a () > {console.…...

编程日记 2024/3/26 1:03:32

微服务（基础篇-003-Nacos）

目录 Nacos注册中心&#xff08;1&#xff09; 认识和安装Nacos&#xff08;1.1&#xff09; Nacos快速入门&#xff08;1.2&#xff09; 服务注册到Nacos(1.2.1) Nacos服务分级存储模型&#xff08;1.3&#xff09; 配置集群&#xff08;1.3.1&#xff09; 根据集群修改…...

编程日记 2024/3/26 1:00:29

java数据结构与算法刷题-----LeetCode215. 数组中的第K个最大元素

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 解题思路&#xff1a;时间复杂度O( n n n)&#xff0c;空间复杂度…...

编程日记 2024/3/26 0:57:25

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…...

编程日记 2024/3/26 0:54:23

C语言---------strlen的使用和模拟实现

字符串是以‘\0’作为结束标志&#xff0c;strlen函数的返回值是‘\0’前面的字符串的个数&#xff08;不包括‘\0’&#xff09; 注意 1&#xff0c;参数指向的字符串必须以‘\0’结束 2&#xff0c;函数的返回值必须以size_t,是无符号的 使用代码 ​ #include<stdio.…...

编程日记 2024/3/26 0:51:19

【MATLAB源码-第168期】基于matlab的布谷鸟优化算法(COA)机器人栅格路径规划，输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 布谷鸟优化算法&#xff08;Cuckoo Optimization Algorithm, COA&#xff09;是一种启发式搜索算法&#xff0c;其设计灵感源自于布谷鸟的独特生活习性&#xff0c;尤其是它们的寄生繁殖行为。该算法通过模拟布谷鸟在自然界中…...

编程日记 2024/3/26 0:50:18

集合深入------理解底层。

集合的使用 前提&#xff1a;栈、堆、二叉树、hashcode、toString()、quesalus()的知识深入和底层理解。 1、什么是集合 集合就是咋们所说的容器 ​ 前面我们学习过数组 数组也是容器 ​ 容器&#xff1a;装东西的 生活中有多少的容器呀? 水杯 教室 酒瓶 水库 只要是…...

编程日记 2024/3/26 0:49:17

【阅读笔记】《硬笔书法艺术》

硬笔书法基础教程&#xff0c;也介绍了一些实用案例 作者: 万应均 出版社: 湖南人民出版社 笔记 CH1 运笔方式 起笔&#xff1a;起笔、切笔、顺峰、搭峰。 行笔&#xff1a;提笔、按笔、滑笔、转笔、折笔。 收笔&#xff1a;提收、顿收、折收。 CH2 钢笔楷书 “古人善书者…...

编程日记 2024/3/26 0:48:16

5.5.5、【AI技术新纪元：Spring AI解码】使用PGvector设置向量存储及进行相似性搜索

使用PGvector设置向量存储及进行相似性搜索 本节指导您如何设置PGvector VectorStore来存储文档嵌入并执行相似性搜索。 PGvector是一个开源的PostgreSQL扩展，能够支持存储和搜索机器学习生成的嵌入向量，提供查找精确和近似最近邻的功能。它设计得与PostgreSQL的其他特性无…...

编程日记 2024/3/26 0:46:13

EDR下的线程安全

文章目录 前记进程断链回调执行纤程内存属性修改early birdMapping后记reference 前记 触发EDR远程线程扫描关键api&#xff1a;createprocess、createremotethread、void&#xff08;指针&#xff09;、createthread 为了更加的opsec&#xff0c;尽量采取别的方式执行恶意代…...

编程日记 2024/3/26 0:45:12

洛谷刷题 | B3623 枚举排列

枚举排列 题目描述 今有 n n n 名学生&#xff0c;要从中选出 k k k 人排成一列拍照。 请按字典序输出所有可能的排列方式。 输入格式 仅一行&#xff0c;两个正整数 n , k n, k n,k。 输出格式 若干行&#xff0c;每行 k k k 个正整数&#xff0c;表示一种可能的队…...

编程日记 2024/3/26 0:44:11

HarmonyOS 6学习：Canvas实现圆角矩形进度条

在HarmonyOS应用开发中&#xff0c;进度条是展示任务进度、加载状态和数据可视化的重要组件。虽然系统提供了Progress组件&#xff0c;但在需要高度定制化、复杂视觉效果或特殊交互的场景下&#xff0c;开发者常常面临以下困境&#xff1a;样式限制&#xff1a;Progress组件难以…...

编程新知 2026/4/3 17:31:13

ai辅助开发新思路：让快马ai为你生成一个notepad++智能编程助手插件原型

今天想和大家分享一个有趣的AI辅助开发思路——如何用InsCode(快马)平台快速构建一个Notepad智能编程助手插件的原型。这个项目特别适合想体验AI与本地编辑器联动的开发者&#xff0c;整个过程不需要复杂的配置&#xff0c;直接在网页上就能完成原型验证。 插件功能设计 这个插…...

编程新知 2026/4/3 17:00:38

太烧token了，我用Ai写了一个vscode的插件wps-editor（已开源）

这是一篇关于开源项目Wps-Editor的介绍文章&#xff0c;希望能让大家了解它的价值并支持其发展。 引言 在人工智能(AI)浪潮席卷各行各业的今天&#xff0c;大型语言模型(LLM)已成为内容创作者、办公人士、学生乃至研究者的得力助手。无论是撰写报告、分析数据、润色文案&#…...

编程新知 2026/4/3 16:24:05

实战分享：WAN2.2文生视频结合SDXL风格，用Python打造自动化视频生产线

实战分享&#xff1a;WAN2.2文生视频结合SDXL风格&#xff0c;用Python打造自动化视频生产线 1. 为什么选择WAN2.2SDXL组合进行视频创作 在数字内容爆炸式增长的今天&#xff0c;视频创作已经成为各行各业的基本需求。但传统视频制作流程复杂、成本高昂&#xff0c;让许多创作…...

编程新知 2026/4/3 15:51:40

Pixel Couplet Gen实战案例：基于Retro Game UI的微信小程序春联H5页

Pixel Couplet Gen实战案例&#xff1a;基于Retro Game UI的微信小程序春联H5页 1. 项目背景与设计理念 1.1 传统与数字的碰撞 春节作为中国最重要的传统节日&#xff0c;春联文化已有千年历史。然而在数字时代&#xff0c;传统春联形式面临着与年轻群体脱节的问题。Pixel C…...

编程新知 2026/4/3 15:21:21

PyCINRAD：解锁中国新一代气象雷达数据的Python利器

PyCINRAD&#xff1a;解锁中国新一代气象雷达数据的Python利器 【免费下载链接】PyCINRAD Decode CINRAD (China New Generation Weather Radar) data and visualize. 项目地址: https://gitcode.com/gh_mirrors/py/PyCINRAD 还在为处理复杂的CINRAD雷达数据格式而烦恼吗…...

编程新知 2026/4/3 15:08:53

用Python和PyTorch手把手搭建你的第一个脉冲神经网络（SNN）模型

用Python和PyTorch手把手搭建你的第一个脉冲神经网络&#xff08;SNN&#xff09;模型 当你第一次听说"脉冲神经网络"时&#xff0c;脑海中可能会浮现出科幻电影里那些会思考的机器。但事实上&#xff0c;这种模拟生物神经元工作方式的算法已经悄然走进现实。作为一名…...

编程新知 2026/4/3 14:52:44

AI原生应用的持续学习与迭代机制设计

AI原生应用的持续学习与迭代机制设计 关键词：AI原生应用、持续学习、增量训练、模型迭代、数据漂移、遗忘效应、终身学习 摘要：本文将从"AI原生应用为什么需要持续学习"这一核心问题出发，通过类比"人类学习成长"的生活场景，逐步拆解持续学习的技术原理…...

编程新知 2026/4/3 14:11:35

Adobe-GenP 3.0：如何一键解锁Adobe全家桶的终极指南

Adobe-GenP 3.0&#xff1a;如何一键解锁Adobe全家桶的终极指南 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP 你是否曾梦想免费使用Photoshop、Premiere Pro等专业…...

编程新知 2026/4/3 12:16:23

Mi-Create：让小米穿戴设备拥有专属表盘的3步可视化设计法

Mi-Create&#xff1a;让小米穿戴设备拥有专属表盘的3步可视化设计法 【免费下载链接】Mi-Create Unofficial watchface creator for Xiaomi wearables ~2021 and above 项目地址: https://gitcode.com/gh_mirrors/mi/Mi-Create 你是否厌倦了小米手表上那些千篇一律的官…...

编程新知 2026/4/3 12:12:22