用js操作dom节点的一些方法
一、获取节点
document.getElementById(id);
返回拥有指定 id 的第一个节点
document.getElementsByName(name);
返回带有指定名称的节点集合
document.getElementsByTagName(tagname);
返回带有指定标签名的节点集合
document.getElementsByClassName(classname);
返回带有指定class名称的节点集合
document.querySelector("css选择器");
返回匹配指定的CSS选择器的第一个节点
document.querySelectorAll("css选择器");
返回匹配指定CSS选择器的所有节点集合
parentNode.firstChild:已知节点的第一个子节点
parentNode.lastChild:已知节点的最后一个子节点
parentNode.childNodes:已知节点的所有子节点
childNode.parentNode:已知节点的父节点
neborNode.previousSibling:返回某个节点的上一个兄弟节点(包括文本节点、注释节点)
neborNode.previousElementSibling :返回某个节点的上一个兄弟元素节点(不包括文本节点、注释节点)
neborNode.nextSibling :返回某个节点的下一个兄弟节点(包括文本节点、注释节点)
neborNode.nextElementSibling :返回某个节点的下一个兄弟元素节点(不包括文本节点、注释节点)
二、创建节点
document.createElement(eleName);
创建元素节点
document.createTextNode(text);
创建文本节点
document.createAttribute(attrName);
创建一个指定名称的属性,并返回Attr对象属性。例子:
var att=document.createAttribute("class");
att.value="democlass";
document.getElementsByTagName("H1")[0].setAttributeNode(att);
三、添加节点
parentNode.appendChild(newNode);
给某个节点添加子节点
parentNode.insertBefore(newNode,existNode);
在已有的子节点前插入一个新的子节点,也可以利用已知的子节点获取其父节点:existNode.parentNode.insertBefore(newNode,existNode);
四、删除节点
parentNode.removeChild(node)
删除某个节点的子节点,node是要删除的节点
五、复制节点
domNode.cloneNode(true | false);
复制节点domNode。如果传递的参数是 true,将递归复制当前节点的所有子孙节点。否则,只复制当前节点(没有子孙节点)。例子:
var itm=document.getElementById("myList2").lastChild;
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
六、替换节点
parentNode.replaceChild(newNode,oldNode);
将某个子节点替换为另一个新节点,新节点可以是已存在的,也可以是新创建的。
七、节点属性操作
domNode.getAttribute(attrName);
获取节点domNode的指定属性名称的属性值
domNode.setAttribute(attrName,attrValue);
设置或者修改节点domNode的指定属性的值
domNode.removeAttribute(attrName);
删除节点domNode的某个属性
记录于:2024-5-10。
相关文章:
用js操作dom节点的一些方法
一、获取节点 document.getElementById(id); 返回拥有指定 id 的第一个节点 document.getElementsByName(name); 返回带有指定名称的节点集合 document.getElementsByTagName(tagname); 返回带有指定标签名的节点集合 document.getElementsByClassName(classname); 返回带有…...
electron 中拦截内嵌页面 beforeunload 的弹窗提示
window 的 beforeunload 事件提示在electron 不兼容,弹窗提示不出来,还会导致莫名其妙的假死问题,下面记录一下解决方法。 1. 如果仅需要拦截弹窗: win.webContents.on(will-prevent-unload, (event) > {event.preventDefault(…...
hcip-datacom英文词汇积累简述3
序号 词汇 中文 1 port link-type access 端口链路类型为接入 2 batch 批量 3 vlan batch 2 3 虚拟局域网批量2和3 4 Default 默认 5 port default vlan 2 端口默认虚拟局域网2 6 trunk 主干 7 port link-type trunk 端口链路类型为主干 8 allow-pass 全部过关 9 port trunk al…...
什么是新能源汽车热管理?
前言 新能源汽车热管理是指针对电动汽车等新型动力系统所涉及的热量控制和调节技术,其包括散热、冷却、加热、温度控制等方面。在新能源汽车中,电池、电动机、控制器等部件都会产生一定的热量,如果不进行有效的热管理,将会影响汽…...
iOS plist文件增删改查
一. plist简介 plist文件,即属性列表文件,全名是Property List,这种文件的扩展名为.plist,因此,通常被叫做plist文件。它是一种用来存储串行化后的对象的文件,在iOS开发中通常用来存储用户设置,…...
docker安装与重装
docker安装与重装 docker安装 https://blog.csdn.net/lyqhf153/article/details/79585976 参考上面的方式 cat /etc/issueuname -r uname -acat /proc/versiondf -hyum list docker-ce --showduplicates | sort -r 查看docker-ce的版本列表sudo yum install -y docker 没有…...
武汉星起航引领跨境新浪潮,一站式解决方案助力卖家驰骋亚马逊
在全球化浪潮下,跨境电商已成为外贸发展的新引擎,为无数创业者提供了全新的商业机遇。而在这场跨境电商的浪潮中,武汉星起航电子商务有限公司以其专业的一站式解决方案,成为众多创业者和卖家的得力助手,引领着他们成功…...
在做题中学习(56):二维前缀和模板
【模板】二维前缀和_牛客题霸_牛客网 (nowcoder.com) 理解题意: 要求的是(x1,y1) - (x2,y2)这段区间的和。 解法:二维前缀和 1. 和一维前缀和一样,需要有一个同等规模的dp数组,用来保存一段连续区域的和。 在二维dp中࿰…...
驾驭多云环境,加速AI创新丨Animbus Cloud 8.3.0 算力调度平台升级发布
大模型开启全球新一轮AI浪潮,伴随算力规模的爆发增长以及计算技术的多元创新,需要更稳定、高效、敏捷的异构计算基础设施,才能充分发挥对算力能力的重要支撑。 作为开放智能云边架构引领者,九州未来凭借多年的技术积累、实践沉淀…...
JavaScript异步编程——02-Ajax入门和发送http请求
同步和异步回顾 同步和异步的简单理解 同步:必须等待前面的任务完成,才能继续后面的任务。 异步:不受当前任务的影响。 拿排队举例: 同步:在银行排队时,只有等到你了,才能够去处理业务。 异…...
湖仓一体 - Apache Arrow的那些事
湖仓一体 - Apache Arrow的那些事 Arrow是高性能列式内存格式标准。它的优势:高效计算:所有列存的通用优势,CPU缓存友好、SIMD向量化计算友好等;零序列化/反序列化:arrow的任何数据结构都是一段连续的内存,…...
常用的启发式算法:探索问题解决的智慧之道
启发式算法是一种通过启发式信息来引导搜索的算法,常用于解决那些在合理时间内难以找到最优解的问题。本文将介绍几种常用的启发式算法,包括贪心算法、遗传算法和模拟退火算法,并提供Java代码实现及测试,帮助读者深入理解这些算法…...
docker Harbor私有仓库部署管理
搭建本地私有仓库,但是本地私有仓库的管理和使用比较麻烦,这个原生的私有仓库并不好用,所以我们采用harbor私有仓库,也叫私服,更加人性化。 一、什么是Harbor Harbor是VWware 公司开源的企业级Docker Registry项…...
序列化的不同格式:JSON、XML、TOML、CSON、YAML
前言 这篇文章参考于知乎,进行了一些总结。 正文 首先什么是序列化,数据序列化是从一个系统获取一些信息,将其转换为其它系统可以读取的格式,然后将其传递给其它系统的过程。也就是可以让不同系统“通信”。 序列化需要满足两…...
Mapreduce | 案例
根据提供的数据文件【test.log】 数据文件格式:姓名,语文成绩,数学成绩,英语成绩 完成如下2个案例: (1)求每个学科的平均成绩 (2)将三门课程中任意一门不及格的学生过滤出来 (1)求每…...
U盘文件剪切丢失怎么办?揭秘原因并给出恢复方法
在日常生活和工作中,U盘已成为我们不可或缺的数据存储和传输工具。但有时候,我们在对U盘中的文件进行剪切操作时,会遇到文件丢失的情况。这种突如其来的数据消失往往会让人感到惊慌和困惑。那么,为什么U盘剪切时文件会丢失呢&…...
软件设计师考试---访问控制列表、堆,栈和堆栈、防火墙、数据流图、嵌入式操作、绑定方式、uml、模式、传输协议
访问控制列表 访问控制列表(Access Control List,ACL) 是一种用于控制对资源(如文件、目录、网络资源等)访问权限的方法。ACL是在计算机安全领域广泛使用的概念,它允许系统管理员定义哪些用户或系统进程有…...
vlock工具:锁定Linux终端的安全智能方法
虚拟控制台是 Linux 非常重要的功能,它们为系统用户提供 shell 提示,以非图形设置方式使用系统,该设置只能在物理机上使用,而不能远程使用。 用户只需从一个虚拟控制台切换到另一个虚拟控制台即可同时使用多个虚拟控制台会话。 …...
【Linux】Docker 安装部署 Nacos
个人简介:Java领域新星创作者;阿里云技术博主、星级博主、专家博主;正在Java学习的路上摸爬滚打,记录学习的过程~ 个人主页:.29.的博客 学习社区:进去逛一逛~ 【Linux】Docker 安装部署 Nacos docker搜索na…...
纯血鸿蒙APP实战开发——阅读翻页方式案例
介绍 本示例展示手机阅读时左右翻页,上下翻页,覆盖翻页的功能。 效果图预览 使用说明 进入模块即是左右翻页模式。点击屏幕中间区域弹出上下菜单。点击设置按钮,弹出翻页方式切换按钮,点击可切换翻页方式。左右翻页方式可点击翻…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么?1.1.2 感知机的工作原理 1.2 感知机的简单应用:基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
