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

15.节点操作

news 2026/4/11 17:48:53

15.1 DOM节点

1.DOM节点
DOM树里每一个内容都称之为节点

2.节点类型
●元素节点
所有的标签 比如body、div
html是根节点
●属性节点
所有的属性 比如href
●文本节点
所有的文本

15.2查找节点

1.父节点查找：
parentNode属性
返回最近一级的父节点找不到返回为null

子元素.parentNode

2.子节点查找：
●childNodes
获得所有子节点、包括文本节点(空格、换行)、注释节点等
●children属性(重点)
仅获得所有元素节点
返回的还是一个伪数组
●语法

父元素.children

3.兄弟关系查找：
●下一个兄弟节点.
nextElementSibling 属性
●上一个兄弟节点
previousElementSibling 属性

15.3增加节点（重要）

1.创建节点
●即创造出一个新的网页元素, 再添加到网页内，一般先创建节点，然后插入节点
●创建元素节点方法:

//创造一个新的元素节点
document.createElement( '标签名')

2.追加节点
要想在界面看到，还得插入到某个父元素中
●插入到父元素的最后一个子元素:

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

●插入到父元素中某个子元素的前面

//插入到某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)

【示例】

<body><ul><li>第一个</li></ul><script>// 1.创建节点const li = document.createElement('li')const ul = document.querySelector('ul')li.innerHTML = '第二个'// 2.追加节点 作为最后的元素ul.appendChild(li)// 3.追加节点 放在某个元素前面ul.insertBefore(li, ul.children[0])</script>
</body>

3.克隆节点

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素, 括号内传入布尔值
➢若为true, 则代表克隆时会包含后代节点一起克隆
➢若为false，则代表克隆时不包含后代节点
➢默认为false

15.4删除节点

若一个节点在页面中已不需要时，可以删除它
在JavaScript原生DOM操作中，要删除元素必须通过父元素删除
●语法

父元素.removeChild(要删除的元素)

注意:
●如不存在父子关系则删除不成功
●删除节点和隐藏节点( display:none)有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

相关文章：

15.节点操作

15.1 DOM节点 1.DOM节点 DOM树里每一个内容都称之为节点 2.节点类型 ●元素节点 所有的标签 比如body、div html是根节点 ●属性节点 所有的属性 比如href ●文本节点 所有的文本 15.2查找节点 1.父节点查找&#xff1a; parentNode属性 返回最近一级的父节点找不到返回为n…...

编程日记 2023/8/5 0:06:59

C语言自定义类型 — 结构体、位段、枚举、联合

前言 本期主要对通讯录三篇博客文章进行补充 通讯录文章&#xff1a;通讯录系列文章 对结构体进行详细介绍&#xff0c;其次讲解位段、枚举、联合体 文章目录 前言一、结构体1.什么是结构体2.结构声明2.1 声明格式2.2 如何声明&#xff08;代码演示&#xff09; 3.特殊声明3.1…...

编程日记 2023/8/5 0:05:58

新手指南：流程图中各种图形的含义及用法解析

我们经常在技术设计、沟通、业务演示等一些领域看到流程图&#xff0c;它也可以称为输入输出图。顾名思义&#xff0c;它是指一种简单的工作流程的具体步骤&#xff0c;比如包括一次会议的流程&#xff0c;以及一次生产制造的顺序和过程等。本文将为大家介绍流程图的含义和具体…...

编程日记 2023/8/5 0:04:57

【知识产权】专利的弊端

接上篇【知识产权】著作权的作用_qilei2010的博客-CSDN博客。 ​ 1 专利的分类 首先，专利分为：发明专利、实用新型专利、外观设计专利。这里要说明的是专利的不同种类在不同的国家都是有不同规定的，并不是所有国家和地区都是分成这三类。 >国家法律法规数据库 >中华…...

编程日记 2023/8/5 0:03:56

用Rust实现23种设计模式之抽象工厂

在 Rust 中&#xff0c;可以使用 trait 和泛型来实现抽象工厂模式。抽象工厂模式是一种创建型设计模式&#xff0c;它提供了一个接口来创建一系列相关或依赖对象的家族&#xff0c;而无需指定具体的类。下面是一个简单的示例&#xff0c;展示了如何使用 Rust 实现抽象工厂模式&…...

编程日记 2023/8/5 0:02:54

31.利用linprog 解决 投资问题（matlab程序）

1.简述 语法&#xff1a;[X,FVAL] linprog(f,a,b,Aeq,Beq,LB,UB,X0)&#xff1b; X 为最终解 &#xff0c; FVAL为最终解对应的函数值 *注意&#xff1a;求最大值时&#xff0c;结果FVAL需要取反* f 为决策函数的系数矩阵。 *注意&#xff1a;当所求为最大值…...

编程日记 2023/8/5 0:01:53

整数线性规划求解工具isl使用方法

整数线性规划求解工具 Integer Set Library 代码 参考 isl是一个用于多面体模型调度实现的c/c库。通过isl&#xff0c;我们可以对模型进行自动的调度&#xff0c;循环优化等。 编译 ISL,Integer Set Library 版本0.22.1&#xff0c;http://isl.gforge.inria.fr/ README关于…...

编程日记 2023/8/5 0:00:52

SystemC的调度器

文章目录 前言调度器初始化evaluatewait updatenotify delta notificationtime notification仿真结束 前言 SystemC是基于C的库&#xff0c;主要用来对 IC 进行功能建模和性能建模。有时也被用来当做 RTL (register transfer level) 级的升级版 HLS(High Level synthesis) 直接…...

编程日记 2023/8/4 23:59:51

SpringBoot、SpringCloud 版本查看

1、SpringBoot 官网地址 https://spring.io/projects/spring-boot#learn spring-boot-starter-parent 版本列表可查看&#xff1a; https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-parent 2、SpringCloud 官网地址 https://spring.io/pro…...

编程日记 2023/8/4 23:58:50

AI Chat 设计模式：12. 享元模式

本文是该系列的第十二篇&#xff0c;采用问答式的方式展开&#xff0c;问题由我提出&#xff0c;答案由 Chat AI 作出&#xff0c;灰色背景的文字则主要是我的一些思考和补充。 问题列表 Q.1 给我介绍一下享元模式A.1Q.2 也就是说&#xff0c;其实共享的是对象的内部状态&…...

编程日记 2023/8/4 23:57:45

Spring mvc：SpringServletContainerInitializer

SpringServletContainerInitializer实现了Servlet3.0规范中定义的ServletContainerInitializer&#xff1a; public interface ServletContainerInitializer {void onStartup(Set<Class<?>> c, ServletContext ctx) throws ServletException; }SpringServletCont…...

编程日记 2023/8/4 23:56:44

微信小程序中的全局数据共享（状态管理）使用介绍

开发工具&#xff1a;微信开发者工具Stable 1.06 一、状态管理简介 微信小程序全局状态是指可以在不同页面之间共享的数据或状态。 它可以存储用户的登录状态、个人信息、全局配置信息等。 二、安装MobX 1、安装NPM 在资源管理器的空白地方点右键&#xff0c;选择“在外部…...

编程日记 2023/8/4 23:55:42

LLM - LLama 模型读取报错 TypeError: not a string

一.引言 读取 LLama2 模型时报错 TypeError: not a string 看异常栈是 AutoTokenizer.from_pretrained 时候的异常。 二.问题解决 出现类似加载模型异常的问题&#xff0c;大致分两类&#xff1a; ◆ 模型地址异常 脚本里传的 pretrained_model Path 有问题&#xff0c;加 …...

编程日记 2023/8/4 23:54:41

2023年08月在线IDE流行度最新排名

点击查看最新在线IDE流行度最新排名&#xff08;每月更新&#xff09; 2023年08月在线IDE流行度最新排名 TOP 在线IDE排名是通过分析在线ide名称在谷歌上被搜索的频率而创建的 在线IDE被搜索的次数越多&#xff0c;人们就会认为它越受欢迎。原始数据来自谷歌Trends 如果您相…...

编程日记 2023/8/4 23:53:40

k8s的架构

简介 一个 K8s 系统&#xff0c;通常称为一个 K8s 集群&#xff0c;集群主要包括两个部分 一个 Master 节点&#xff08;主节点&#xff09; 一群 Node 节点&#xff08;计算节点&#xff09; Master节点 Master 节点包括 API Server、Scheduler、Controller manager、etcd A…...

编程日记 2023/8/4 23:52:38

数据分析基础-Excel图表的美化操作（按照教程一步步操作）

一、原始数据 包含月份和对应的销量和产量。 时间销量产量1月60722月38673月28344月58685月67596月72357月61428月24319月556710月243511月122112月2645 二、原始的图表设计-采用Excel自带模板 三、优化思路 1、删除多余元素 2、弱化次要元素 对于可以弱化的元素&#xff0c…...

编程日记 2023/8/4 23:51:35

Mybatis嵌套查询（一对多）

一、返回数据Java类 Data public class PersonnelDetailsVO{/*** 主键*/Column(name "ID", length 36, precision 0)private String id;/*** 人员姓名*/Column(name "OPERATE_NAME", length 36, precision 0)private String operateName;/*** 单位i…...

编程日记 2023/8/4 23:50:33

web前端转正工作总结范文5篇

web前端转正工作总结&#xff08;篇1&#xff09; 来到__有限公司已经三个月了&#xff0c;目前的工作是前端开发&#xff0c;我是一名应届毕业生&#xff0c;之前没有过工作经验&#xff0c;在刚来到__这个大家庭的时候&#xff0c;我就被这里的工作气氛深深地吸引&#xff0…...

编程日记 2023/8/4 23:49:32

P1144 最短路计数

最短路计数 题目描述 给出一个 N N N 个顶点 M M M 条边的无向无权图&#xff0c;顶点编号为 1 ∼ N 1\sim N 1∼N。问从顶点 1 1 1 开始&#xff0c;到其他每个点的最短路有几条。 输入格式 第一行包含 2 2 2 个正整数 N , M N,M N,M&#xff0c;为图的顶点数与边数…...

编程日记 2023/8/4 23:48:31

Docker入门之命令

Docker命令学习方式 docker -h docker run --help # 这种形式参考 # 官方帮助 # https://docs.docker.com/reference/ Docker中命令是一等公民, 容器是为命令服务的,甚至启动容器都是为了执行一个命令 run docker run -i -t --name c1 centos:latest bash # 翻译: docker ru…...

编程日记 2023/8/4 23:47:30

易基因：NC/IF15.7：浙江大学陈淑洁/王良静团队acRIP-seq等揭示ac4C RNA修饰调控肠道衰老及年龄相关肠道疾病发病机制

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。近日&#xff0c;浙江大学王良静教授和陈淑洁教授团队合作&#xff0c;在《Nature Communications》期刊发表题为“Targeting NAT10 alleviates colonic senescence and elderly-onset col…...

编程新知 2026/4/11 16:52:35

如何轻松下载PS3游戏更新补丁：终极免费工具指南

如何轻松下载PS3游戏更新补丁&#xff1a;终极免费工具指南 【免费下载链接】PS3GameUpdateDownloader downloader for ps3 game updates (.pkg files) from official sony servers written in python 项目地址: https://gitcode.com/gh_mirrors/ps/PS3GameUpdateDownloader …...

编程新知 2026/4/11 16:38:28

大模型工程化成熟度测评指南（SITS2026官方适配版）：12项指标自评表+3个高危信号预警+1次免费基准评估入口

第一章&#xff1a;SITS2026发布&#xff1a;大模型工程化成熟度模型 2026奇点智能技术大会(https://ml-summit.org) SITS2026&#xff08;Software Intelligence & Trustworthiness Scale 2026&#xff09;是首个面向大模型全生命周期的工程化成熟度评估框架&#xff0c…...

编程新知 2026/4/11 15:53:58

开关电源CCM与DCM模式选择指南：从理论到实践

1. 开关电源CCM与DCM模式基础解析 第一次接触开关电源设计时&#xff0c;我被CCM和DCM这两个专业术语搞得一头雾水。直到亲手烧坏三个MOS管后&#xff0c;才真正理解它们的区别。简单来说&#xff0c;CCM&#xff08;连续导通模式&#xff09;就像高速公路上的车流&#xff0c;…...

编程新知 2026/4/11 12:42:09

玄机靶场实战：从应急响应到vulntarget-j-02的攻防解析

1. 玄机靶场与应急响应实战入门 第一次接触玄机靶场时&#xff0c;我被它高度仿真的企业内网环境震撼到了。这个基于Docker构建的靶场平台完美复现了企业常见的Windows服务器、Web应用和数据库服务&#xff0c;甚至连日志记录和行为特征都和真实环境一模一样。对于想学习网络安…...

编程新知 2026/4/11 11:28:58

多线程--第一次小结

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录一、线程和进程的区别和共同点二、创建线程1.继承Thread,重写run方法2.实现Runnable接口,重写run3.继承Thread,重写run,使用匿名内部类4.使用匿名内部类,基于Runnabl…...

编程新知 2026/4/11 10:15:06

终极Scroll Reverser指南：彻底解决Mac多设备滚动冲突问题

终极Scroll Reverser指南&#xff1a;彻底解决Mac多设备滚动冲突问题 【免费下载链接】Scroll-Reverser Per-device scrolling prefs on macOS. 项目地址: https://gitcode.com/gh_mirrors/sc/Scroll-Reverser 还在为Mac触控板和外接鼠标的滚动方向冲突而烦恼吗&#xf…...

编程新知 2026/4/11 8:22:56

从零到爬取：在Linux服务器（CentOS 7）上用Anaconda部署你的第一个Scrapy爬虫

从零到爬取&#xff1a;在Linux服务器&#xff08;CentOS 7&#xff09;上用Anaconda部署你的第一个Scrapy爬虫 当你第一次通过SSH连接到一台全新的CentOS 7服务器时&#xff0c;面对那个闪烁的光标&#xff0c;可能会感到一丝茫然。不同于Windows的图形界面&#xff0c;Linux服…...

编程新知 2026/4/11 6:51:11

Phi-4-mini-reasoning代码审查助手：集成到IDE的智能提示插件

Phi-4-mini-reasoning代码审查助手&#xff1a;集成到IDE的智能提示插件 1. 智能代码审查的新时代 想象一下&#xff0c;当你正在IntelliJ IDEA中编写代码时&#xff0c;右侧边栏突然弹出一条提示&#xff1a;"这段循环可以改用Stream API简化&#xff0c;点击查看示例&…...

编程新知 2026/4/11 5:33:45

保姆级教程：在Linux上用Neo4j 3.5.35社区版搭建你的第一个图数据库（附配置文件修改详解）

从零开始&#xff1a;Linux环境下Neo4j 3.5.35社区版实战部署指南 第一次接触图数据库时&#xff0c;那种既兴奋又忐忑的心情我至今记忆犹新。作为非关系型数据库中的重要分支&#xff0c;图数据库以其独特的节点-关系模型&#xff0c;在处理复杂关联数据时展现出惊人的效率。而…...

编程新知 2026/4/11 5:33:45