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

JS08-DOM节点完整版

news 2026/2/11 2:49:00

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

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

【python】python3基础

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

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

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

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

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

智能合约之 ERC-721

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

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

== 和 equals 的区别是什么？

和 equals() 在 Java 中都是用于比较两个对象，但它们之间存在显著的差异： 比较的内容： ：这是 Java 中的基本比较运算符，对于基本数据类型（如 int, char, double 等），它比较的是值&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源代码地址前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio 演示地址：RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址后端代码&#xff1a…...

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

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

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

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

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

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

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

import * as的使用

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

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

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

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

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

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

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

编程日记 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’作为结束标志，strlen函数的返回值是‘\0’前面的字符串的个数（不包括‘\0’） 注意 1，参数指向的字符串必须以‘\0’结束 2，函数的返回值必须以size_t,是无符号的使用代码 #include<stdio.…...

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

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

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

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

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

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

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

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

硬笔书法基础教程，也介绍了一些实用案例作者: 万应均出版社: 湖南人民出版社笔记 CH1 运笔方式起笔：起笔、切笔、顺峰、搭峰。行笔：提笔、按笔、滑笔、转笔、折笔。收笔：提收、顿收、折收。 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：createprocess、createremotethread、void（指针）、createthread 为了更加的opsec，尽量采取别的方式执行恶意代…...

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

洛谷刷题 | B3623 枚举排列

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

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

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

【Go】3、Go语言进阶与依赖管理

前言本系列文章参考自稀土掘金上的【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30