15.节点操作
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.父节点查找: parentNode属性 返回最近一级的父节点找不到返回为n…...
C语言自定义类型 — 结构体、位段、枚举、联合
前言 本期主要对通讯录三篇博客文章进行补充 通讯录文章:通讯录系列文章 对结构体进行详细介绍,其次讲解位段、枚举、联合体 文章目录 前言一、结构体1.什么是结构体2.结构声明2.1 声明格式2.2 如何声明(代码演示) 3.特殊声明3.1…...
新手指南:流程图中各种图形的含义及用法解析
我们经常在技术设计、沟通、业务演示等一些领域看到流程图,它也可以称为输入输出图。顾名思义,它是指一种简单的工作流程的具体步骤,比如包括一次会议的流程,以及一次生产制造的顺序和过程等。本文将为大家介绍流程图的含义和具体…...
【知识产权】专利的弊端
接上篇【知识产权】著作权的作用_qilei2010的博客-CSDN博客。 1 专利的分类 首先,专利分为:发明专利、实用新型专利、外观设计专利。这里要说明的是专利的不同种类在不同的国家都是有不同规定的,并不是所有国家和地区都是分成这三类。 >国家法律法规数据库 >中华…...
用Rust实现23种设计模式之抽象工厂
在 Rust 中,可以使用 trait 和泛型来实现抽象工厂模式。抽象工厂模式是一种创建型设计模式,它提供了一个接口来创建一系列相关或依赖对象的家族,而无需指定具体的类。下面是一个简单的示例,展示了如何使用 Rust 实现抽象工厂模式&…...
31.利用linprog 解决 投资问题(matlab程序)
1.简述 语法:[X,FVAL] linprog(f,a,b,Aeq,Beq,LB,UB,X0); X 为最终解 , FVAL为最终解对应的函数值 *注意:求最大值时,结果FVAL需要取反* f 为决策函数的系数矩阵。 *注意:当所求为最大值…...
整数线性规划求解工具isl使用方法
整数线性规划求解工具 Integer Set Library 代码 参考 isl是一个用于多面体模型调度实现的c/c库。通过isl,我们可以对模型进行自动的调度,循环优化等。 编译 ISL,Integer Set Library 版本0.22.1,http://isl.gforge.inria.fr/ README关于…...
SystemC的调度器
文章目录 前言调度器初始化evaluatewait updatenotify delta notificationtime notification仿真结束 前言 SystemC是基于C的库,主要用来对 IC 进行功能建模和性能建模。有时也被用来当做 RTL (register transfer level) 级的升级版 HLS(High Level synthesis) 直接…...
SpringBoot、SpringCloud 版本查看
1、SpringBoot 官网地址 https://spring.io/projects/spring-boot#learn spring-boot-starter-parent 版本列表可查看: https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-parent 2、SpringCloud 官网地址 https://spring.io/pro…...
AI Chat 设计模式:12. 享元模式
本文是该系列的第十二篇,采用问答式的方式展开,问题由我提出,答案由 Chat AI 作出,灰色背景的文字则主要是我的一些思考和补充。 问题列表 Q.1 给我介绍一下享元模式A.1Q.2 也就是说,其实共享的是对象的内部状态&…...
Spring mvc:SpringServletContainerInitializer
SpringServletContainerInitializer实现了Servlet3.0规范中定义的ServletContainerInitializer: public interface ServletContainerInitializer {void onStartup(Set<Class<?>> c, ServletContext ctx) throws ServletException; }SpringServletCont…...
微信小程序中的全局数据共享(状态管理)使用介绍
开发工具:微信开发者工具Stable 1.06 一、状态管理简介 微信小程序全局状态是指可以在不同页面之间共享的数据或状态。 它可以存储用户的登录状态、个人信息、全局配置信息等。 二、安装MobX 1、安装NPM 在资源管理器的空白地方点右键,选择“在外部…...
LLM - LLama 模型读取报错 TypeError: not a string
一.引言 读取 LLama2 模型时报错 TypeError: not a string 看异常栈是 AutoTokenizer.from_pretrained 时候的异常。 二.问题解决 出现类似加载模型异常的问题,大致分两类: ◆ 模型地址异常 脚本里传的 pretrained_model Path 有问题,加 …...
2023年08月在线IDE流行度最新排名
点击查看最新在线IDE流行度最新排名(每月更新) 2023年08月在线IDE流行度最新排名 TOP 在线IDE排名是通过分析在线ide名称在谷歌上被搜索的频率而创建的 在线IDE被搜索的次数越多,人们就会认为它越受欢迎。原始数据来自谷歌Trends 如果您相…...
k8s的架构
简介 一个 K8s 系统,通常称为一个 K8s 集群,集群主要包括两个部分 一个 Master 节点(主节点) 一群 Node 节点(计算节点) Master节点 Master 节点包括 API Server、Scheduler、Controller manager、etcd A…...
数据分析基础-Excel图表的美化操作(按照教程一步步操作)
一、原始数据 包含月份和对应的销量和产量。 时间销量产量1月60722月38673月28344月58685月67596月72357月61428月24319月556710月243511月122112月2645 二、原始的图表设计-采用Excel自带模板 三、优化思路 1、删除多余元素 2、弱化次要元素 对于可以弱化的元素,…...
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…...
web前端转正工作总结范文5篇
web前端转正工作总结(篇1) 来到__有限公司已经三个月了,目前的工作是前端开发,我是一名应届毕业生,之前没有过工作经验,在刚来到__这个大家庭的时候,我就被这里的工作气氛深深地吸引࿰…...
P1144 最短路计数
最短路计数 题目描述 给出一个 N N N 个顶点 M M M 条边的无向无权图,顶点编号为 1 ∼ N 1\sim N 1∼N。问从顶点 1 1 1 开始,到其他每个点的最短路有几条。 输入格式 第一行包含 2 2 2 个正整数 N , M N,M N,M,为图的顶点数与边数…...
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…...
MediaCreationTool.bat:Windows系统部署的自动化解决方案
MediaCreationTool.bat: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…...
【反蒸馏实战 04】前端开发工程师:当AI 5秒生成一个页面,你的价值在哪里?@初级前端从“切图仔”到“用户体验工程师”实战指南
摘要:2026年,AI已能5秒生成前端页面,60%的前端代码由AI产出,初级前端面临“100:1”的求职竞争。本文结合State of JS 2025、O’Reilly性能工程报告等权威数据,拆解AI对前端的冲击全景,提出“思维-能力-工作流”三级反替代模型。通过3个核心实操模块(AI生成代码审计、Cor…...
大模型API网关性能暴跌67%?SITS2026认证的4种请求整形策略与实时QPS自适应限流算法
第一章:大模型API网关性能暴跌67%?SITS2026认证的4种请求整形策略与实时QPS自适应限流算法 2026奇点智能技术大会(https://ml-summit.org) 当某头部AI平台的LLM API网关在峰值时段突发QPS骤降67%,日志显示92%的超时请求集中于token长度>4…...
深度解析163MusicLyrics:打造高效专业的云音乐歌词获取与处理终极方案
深度解析163MusicLyrics:打造高效专业的云音乐歌词获取与处理终极方案 【免费下载链接】163MusicLyrics 云音乐歌词获取处理工具【网易云、QQ音乐】 项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 在音乐数字化时代,精准的歌…...
ROS机器人开发实战:用tf库搞定四元数、欧拉角、旋转矩阵的6种转换(附C++/Python代码)
ROS机器人开发实战:四元数、欧拉角与旋转矩阵的高效转换指南 在机器人开发中,姿态表示就像工程师的语言——四元数、欧拉角和旋转矩阵各有其独特的语法规则。记得第一次调试机械臂时,我被这些转换搞得晕头转向,直到发现tf库这个&q…...
从玩具四轴到工业机械臂:无刷电机120度与180度导通角该怎么选?实战经验分享
从玩具四轴到工业机械臂:无刷电机120度与180度导通角该怎么选?实战经验分享 当你在设计一台需要精确控制的无人机或工业机械臂时,无刷电机的驱动策略选择往往成为决定项目成败的关键因素之一。我曾见过一个团队花费数月时间优化机械臂算法&am…...
手把手教你从零搭建Ubuntu20.04下的ROS2开发环境
1. 为什么选择Ubuntu 20.04和ROS2 机器人开发领域近年来发展迅猛,而ROS2作为第二代机器人操作系统,已经成为行业新标准。相比第一代ROS,ROS2在实时性、跨平台支持和分布式架构等方面都有显著提升。我最初接触ROS2时也经历过不少挫折ÿ…...
超图(iDesktop iServer10)实战:从OSGB倾斜摄影到TIF三维地形的全流程发布与加载
1. 超图平台三维数据处理全流程概览 第一次接触超图iDesktop和iServer10这套组合时,我被它处理三维数据的能力惊艳到了。这套工具不仅能搞定倾斜摄影OSGB数据,还能把普通的TIF地形图变成可交互的三维场景。很多刚入门的同行经常问我:"为…...
航空发动机EGT裕度实战指南:从参数解读到寿命预测(附B747案例分析)
航空发动机EGT裕度实战指南:从参数解读到寿命预测(附B747案例分析) 在航空维修领域,EGT(排气温度)裕度就像发动机的"健康晴雨表"。想象一下,当你驾驶一辆汽车爬坡时,水温表…...
避坑指南:Ascend 310芯片+CANN工具包在麒麟系统下的5个常见安装错误
Ascend 310芯片CANN工具包在麒麟系统下的5个典型安装陷阱与解决方案 当Ascend 310芯片遇上麒麟操作系统,这种国产硬件的黄金组合本应带来无缝的开发体验,但实际部署中总有几个"暗礁"让开发者措手不及。不同于常规安装教程,本文将直…...
