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

15.节点操作

news 2026/4/11 19:15:19

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

MediaCreationTool.bat：Windows系统部署的自动化解决方案

MediaCreationTool.bat&#xff1a;Windows系统部署的自动化解决方案 【免费下载链接】MediaCreationTool.bat Universal MCT wrapper script for all Windows 10/11 versions from 1507 to 21H2! 项目地址: https://gitcode.com/gh_mirrors/me/MediaCreationTool.bat M…...

编程新知 2026/4/11 18:28:36

【反蒸馏实战 04】前端开发工程师：当AI 5秒生成一个页面，你的价值在哪里？@初级前端从“切图仔”到“用户体验工程师”实战指南

摘要：2026年，AI已能5秒生成前端页面，60%的前端代码由AI产出，初级前端面临“100:1”的求职竞争。本文结合State of JS 2025、O’Reilly性能工程报告等权威数据，拆解AI对前端的冲击全景，提出“思维-能力-工作流”三级反替代模型。通过3个核心实操模块（AI生成代码审计、Cor…...

编程新知 2026/4/11 18:08:26

大模型API网关性能暴跌67%？SITS2026认证的4种请求整形策略与实时QPS自适应限流算法

第一章&#xff1a;大模型API网关性能暴跌67%&#xff1f;SITS2026认证的4种请求整形策略与实时QPS自适应限流算法 2026奇点智能技术大会(https://ml-summit.org) 当某头部AI平台的LLM API网关在峰值时段突发QPS骤降67%&#xff0c;日志显示92%的超时请求集中于token长度>4…...

编程新知 2026/4/11 17:58:20

深度解析163MusicLyrics：打造高效专业的云音乐歌词获取与处理终极方案

深度解析163MusicLyrics&#xff1a;打造高效专业的云音乐歌词获取与处理终极方案 【免费下载链接】163MusicLyrics 云音乐歌词获取处理工具【网易云、QQ音乐】 项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 在音乐数字化时代&#xff0c;精准的歌…...

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

ROS机器人开发实战：用tf库搞定四元数、欧拉角、旋转矩阵的6种转换（附C++/Python代码）

ROS机器人开发实战&#xff1a;四元数、欧拉角与旋转矩阵的高效转换指南 在机器人开发中&#xff0c;姿态表示就像工程师的语言——四元数、欧拉角和旋转矩阵各有其独特的语法规则。记得第一次调试机械臂时&#xff0c;我被这些转换搞得晕头转向&#xff0c;直到发现tf库这个&q…...

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

从玩具四轴到工业机械臂：无刷电机120度与180度导通角该怎么选？实战经验分享

从玩具四轴到工业机械臂&#xff1a;无刷电机120度与180度导通角该怎么选&#xff1f;实战经验分享 当你在设计一台需要精确控制的无人机或工业机械臂时&#xff0c;无刷电机的驱动策略选择往往成为决定项目成败的关键因素之一。我曾见过一个团队花费数月时间优化机械臂算法&am…...

编程新知 2026/4/11 16:48:34

手把手教你从零搭建Ubuntu20.04下的ROS2开发环境

1. 为什么选择Ubuntu 20.04和ROS2 机器人开发领域近年来发展迅猛&#xff0c;而ROS2作为第二代机器人操作系统&#xff0c;已经成为行业新标准。相比第一代ROS&#xff0c;ROS2在实时性、跨平台支持和分布式架构等方面都有显著提升。我最初接触ROS2时也经历过不少挫折&#xff…...

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

超图（iDesktop iServer10）实战：从OSGB倾斜摄影到TIF三维地形的全流程发布与加载

1. 超图平台三维数据处理全流程概览 第一次接触超图iDesktop和iServer10这套组合时&#xff0c;我被它处理三维数据的能力惊艳到了。这套工具不仅能搞定倾斜摄影OSGB数据&#xff0c;还能把普通的TIF地形图变成可交互的三维场景。很多刚入门的同行经常问我&#xff1a;"为…...

编程新知 2026/4/11 15:51:57

航空发动机EGT裕度实战指南：从参数解读到寿命预测（附B747案例分析）

航空发动机EGT裕度实战指南&#xff1a;从参数解读到寿命预测&#xff08;附B747案例分析&#xff09; 在航空维修领域&#xff0c;EGT&#xff08;排气温度&#xff09;裕度就像发动机的"健康晴雨表"。想象一下&#xff0c;当你驾驶一辆汽车爬坡时&#xff0c;水温表…...

编程新知 2026/4/11 15:29:36

避坑指南：Ascend 310芯片+CANN工具包在麒麟系统下的5个常见安装错误

Ascend 310芯片CANN工具包在麒麟系统下的5个典型安装陷阱与解决方案 当Ascend 310芯片遇上麒麟操作系统&#xff0c;这种国产硬件的黄金组合本应带来无缝的开发体验&#xff0c;但实际部署中总有几个"暗礁"让开发者措手不及。不同于常规安装教程&#xff0c;本文将直…...

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