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

js常见问题总结-DOM节点增删改查

DOM节点的增删改查

文章目录

    • DOM节点的增删改查
      • 1.查找节点
      • 2.增加节点
        • 2.1 创建节点
        • createElement():创建一个dom节点
        • 2.2 父节点插入子节点
        • 2.3 同级插入节点
      • 3.修改节点
        • 3.1 替换节点
        • 3.2 clone节点
      • 4.删除节点
        • 4.1删除节点
      • 5.常见操作实现问题
    • 综合案例

1.查找节点

getElementById()

getElementsByClassName()

getElementsByTagName()

querySelector()

querySelectorAll()

firstChild

Children

lastChild

childNodes

someNode.previousSibling

someNode.nextSibling

someNode.parentNode

getAttribute

2.增加节点

2.1 创建节点

createElement():创建一个dom节点

document.createElement('div');

2.2 父节点插入子节点

appendChild():子节点末尾追加

const element = document.createElement('div');
element.textContent="新加的按钮";
document.body.appendChild(element);

2.3 同级插入节点

节点.insertBefore(插入的标签,参照标签)

const newNode = document.createElement('div');
document.body.insertBefore(newNode);

3.修改节点

3.1 替换节点

replaceChild():替换子节点。接受两个参数,第一个为要插入的节点,第二个为要替换的节点

const newNode=document.createElement('span');
const oldNode=document.querySelector('#root');
document.body.replaceChild(newNode,oldNode);

3.2 clone节点

var box =document.getElementById("box");
//复制box节点(浅拷贝)
var new_box1 =box.cloneNode(false);
console.log(new_box1);
//复制box节点(深拷贝)
var new_box2 =box.cloneNode(true);
console.log(new_box2);
clone

4.删除节点

4.1删除节点

removeChild():删除子节点

const element=document.querySeletor('#root');
document.body.removeChild(element);

5.常见操作实现问题

创建一个textContent=‘年薪一百万’,className=‘selected’,data_val='1000000’的div标签

创建10(i从1到10)个textContent=‘100000i’,className=‘selected’,data_val='100000i’的li标签

综合案例

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>DOM CRUD</title><style></style></head><body><div id='root'></div><script>/*** 查找节点* @param {*} name* name: id,class,tagname* 调用示例 findNode('#root')或者findNode('div')*/const findNode = function(name){return document.querySelector(name)}/*** 创建一个节点* @param {*} tagName, attrObj* name: 标签名* attrObj: 属性名* 调用示例: createNode('div'), createNode('div',{id:'first',innerHTML:'helloworld'})*/const createNode = function(tagName,attrObj){let node = document.createElement(tagName);for(let key in attrObj){node[key]=attrObj[key];}return node;}/*** 插入一个节点* @param {*} parentNode,newNode* parentNode: 要插入的父节点* newNode: 要插入的节点* 调用示例: insertNode(root,node2)*/const insertNode = function(parentNode,newNode){// appendChild// insertBeforeparentNode.appendChild(newNode);}/*** 替换一个节点* @param {*} parentNode,newNode,oldNode* parentNode: 要替换节点的父节点* newNode: 替换后的节点* oldNode: 替换前的节点* 调用示例: replaceNode(root,node1,node2);* 注意:第二个参数和第三个参数不可调换位置*/const replaceNode = function(parentNode,newNode,oldNode){parentNode.replaceChild(newNode,oldNode)}/*** 移除一个节点* @param {*} sourceNode,targetNode* sourceNode: 要移除节点的父节点* targetNode: 需要被移除的节点* 调用示例: removeNode(root,node1);*/const removeNode = function(sourceNode,targetNode){sourceNode.removeChild(targetNode)}/*** 渲染一段dom* @param {*} node htmlStr* node: 需要插入的父节点* htmlStr: dom字符串* 调用示例: renderDom(findNode('#root'),'<div id="myDiv">myDiv</div>');*/const renderDom = function(node, htmlStr){node.innerHTML=htmlStr;}//测试const root=findNode('#root');const node1 = createNode('div',{id:'n1',innerHTML:'节点1'});const node2 = createNode('div',{id:'n2',innerHTML:'节点2'});const node3 = createNode('div',{id:'n3',innerHTML:'节点3'});const node4 = createNode('div',{id:'n4',innerHTML:'节点4'});const htmlStr = `<div id="myDiv">mydiv</div>`//  insertNode(root,node1);//  insertNode(root,node2);//  insertNode(root,node3);// replaceNode(root,node4,node1);// removeNode(root,node1)renderDom(findNode('#root'),htmlStr);</script></body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-35176.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

Python数学问题20:高空抛物

1. 问题描述 一球从100米高度自由落下&#xff0c;每次落地后反跳回原高度的一半&#xff1b;再落下&#xff0c;求它在第10次落地时&#xff0c;共经过多米&#xff1f;第10次反弹多高&#xff1f; 2. 实例代码 high 200 total 100 for i in range(10):high / 2total hi…...

SQL Server 执行计划(1)- 概述

在本系列文章中&#xff0c;我们将导航 SQL Server 执行计划的海洋&#xff0c;从定义执行计划的概念开始&#xff0c;遍历执行计划的类型、组件和运算符&#xff0c;分析执行计划&#xff0c;我们将完成如何保存和管理执行计划。 SQL Server 执行计划概述 当你提交一个 T-SQ…...

多域间访问之外部信任

前言&#xff1a;在同一个林内&#xff0c;通过自动建立可传递的&#xff0c;双向的信任关系&#xff0c;可以实现所有域间的相互信任。但是在不同林之间则不会自动建立信任关系&#xff0c;要实现两个林之间的访问需要手工建立信任关系。 林之间的信任关系又可分为外部信任和…...

阿里程序员的Java之路!Redis宕机数据丢失解决方案

二叉树 定义 二叉树是n(n>0)个结点的有限集合&#xff0c;该集合或者为空集&#xff08;称为空二叉树&#xff09;&#xff0c;或者由一个根结点和两棵互不相交的、分别称为根结点的左子树和右子树组成。 图解 二叉树特点 由二叉树定义以及图示分析得出二叉树有以下特点…...

最全面的 Spring 学习笔记

最全面的 Spring 学习笔记...

html基础

文章目录day01_web一、Web前端介绍1. 什么是网页2. 网页的组成3. 开发前的准备二、 HTML语法介绍1. HTML介绍2. 标签3. 使用三、常用标签介绍1. 基本结构解析2. body中常用标签3. 常用结构标签属性和属性值day01_web 一、Web前端介绍 1. 什么是网页 网页是基于浏览器的应用程…...

pt-osc工具原理与实践

MySQL在5.7版本对于online ddl支持的并不是非常优化&#xff0c;比如说将大表int字段类型修改成bigint或者对大表进行字符编码的改造。对于业务来说都是需要停业去处理的&#xff0c;对于高速发展的互联网行业来说&#xff0c;时间就是金钱&#xff0c;所以合理的应用pt-osc工具…...

elementui 自定义表头 renderHeader的写法 给增加el-tooltip的提示

<el-table-column prop"status" :render-header"renderHeader" ><template slot-scope"scope">{{scope.row.status}}</template> </el-table-column> renderHeader(h, { column}) {return [column.property,h(el-toolt...

Unity ILRuntime编译命令

C:\Windows\Microsoft.NET\Framework64\v4.0.30319\MSBuild.exe F:\UnityProjects\Test\Assets\Samples\ILRuntime\1.6.7\Demo\HotFix_Project~\HotFix_Project.csproj /t:Rebuild /p:ConfigurationRelease pause...

Ubuntu 20.04下PyCharm配置QtDesigner,PyUIC和Pyrcc

《ubuntu安装配置QtDesigner》...

34. 图解 Go 语言:静态类型与动态类型

转载自&#xff1a;&#xff1a;github.com/iswbm/GolangCodingTime 在自己学习 Golang 的这段时间里&#xff0c;我写了详细的学习笔记放在我的个人微信公众号 《Go编程时光》&#xff0c;对于 Go 语言&#xff0c;我也算是个初学者&#xff0c;因此写的东西应该会比较适合刚接…...

Keyhole Markup Language (KML)

5. KML-Keyhole Markup Language From https://developers.google.com/kml/documentation/kml_tut?hlzh-CN KML 是一种文件格式&#xff0c;用于在地球浏览器&#xff08;例如 Google 地球、Google 地图和谷歌手机地图&#xff09;中显示地理数据。KML 使用含有嵌套的元素和…...

idea复制当前行快捷键

仅作为记录&#xff0c;大佬请跳过。 在该行的任何位置&#xff0c;直接用ctrl和c即可 参考 感谢大佬博主文章&#xff1a;传送门...

不抛弃异常值的几种情况

异常数据是数据分布的常态,处于特定分布区域或范围之外的数据 通常会被定义为异常或“噪音”。产生数据“噪音”的原因很多,例如业务 运营操作、数据采集问题、数据同步问题等。对异常数据进行处理前, 需要先辨别出到底哪些是真正的数据异常。 从数据异常的状态看分为两 种…...

23种设计模式

一、什么是设计模式 设计模式&#xff08;Design pattern&#xff09;是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问&#xff0c;设计模式于己于他人于系统都是多…...

Nacos 2.0.2正式版发布

一、介绍Nacos Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了一组简单易用的特性集&#xff0c;帮助您快速实现动态服务发现、服务配置、服务元数据及流量管理。 Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。 Nacos 是构建以“服务”为中心的现代应用…...

spring框架的各种注解基本意思

//在 spring 配置文件中开启生成代理对象 <!-- 开启 Aspect 生成代理对象--> <aop:aspectj-autoproxy></aop:aspectj-autoproxy>Autowired //根据属性类型进行自动装配 Aspect //生成代理对象 Qualifier //根据名称进行注 Resource //可以根据类型注…...

【Java45】旅游案例:数据回显,注销/退出,首页类别显示,精选

文章目录1.登陆数据回显1.1 前端2.登陆案例_注销/退出3.首页类别显示3.1 web3.2 service3.3 dao4.精选4.1 web4.2 service4.3 dao4.4 前端1.登陆数据回显 如上前端写在header.html中。 1.1 前端 //header.html <!-- 头部 start --><header id"header2"&g…...

axios跨域问题

项目配置 vue-cli3vue2element-ui-2.15.3 在网上找了很多方案&#xff0c;但是都没有生效&#xff0c;最后是前端添加了一段代码&#xff0c;后台添加了一段代码 解决了 添加了headers的配置 const instance axios.create({// baseURL: http://mall.huolida.com/,// baseUR…...

原创-Kafka原理

Kafka原理 2017年09月22日 22:39:45317人阅读 评论(0) 收藏 举报 分类&#xff1a; Kafka&#xff08;1&#xff09; 目录(?)[] Kafka 这段时间研究RabbitMQ、Kafka、RocketMQ消息队列&#xff0c;发现对她们原理的介绍都过于简单&#xff0c;所以整理了众多资料&…...

高瓴张磊:从学渣到投资大佬,也曾多次犯错

当年差点考不上初中的他&#xff0c;如今管理着超过5000亿元的资金。 来 源 | 财经新知&#xff08;ID&#xff1a;caijingxinzhi&#xff09; 作 者 | 端木清树 编 辑 | 伊页 1972年&#xff0c;河南省驻马店市的一对夫妻诞下一个男孩&#xff0c;并给他取了一个在当年绝对烂…...

UDP和TCP的特点和区别

1、UDP 和 TCP 的特点与区别 用户数据报协议 UDP&#xff08;User Datagram Protocol&#xff09; 是无连接的&#xff0c;尽最大可能交付&#xff0c;没有拥塞控制&#xff0c;面向报文&#xff08;对于应用程序传下来的报文不合并也不拆分&#xff0c;只是添加 UDP 首部&…...

Centos7启动Eclipse Ditto项目

Centos7启动Eclipse Ditto项目1.安装Oracle VM VirtualBox虚拟机&#xff0c;并安装centos7详细安装记录2.安装Docker3.Eclipse Ditto1.安装Oracle VM VirtualBox虚拟机&#xff0c;并安装centos7详细安装记录 详见win10安装oracle vm virtualbox&#xff0c;并安装centos7详细…...

webui自动化测试框架(2)——对基本操作进行封装common

接上篇&#xff1a;webui自动化测试框架&#xff08;1&#xff09;——框架介绍 封装driver.py: driver的初始化&#xff0c;查找元素&#xff0c;点击元素&#xff0c;输入内容&#xff0c;切换iframe&#xff0c;切换Windows等 1.类&#xff0c;构造函数init里面适配浏览器…...

vue——父子组件的数据传递

父子组件的数据传递 1、 父>子&#xff08;通过属性的形式&#xff09;&#xff1a; &#xff08;1&#xff09;在子组件的标签里设置属性【如 :count“0” 】。给属性前面加上冒号&#xff0c;参数‘0’会变成数字格式&#xff08;变为一个js表达式&#xff09;&#xff…...

spring-boot-starter-redis和spring-boot-starter-data-redis的依赖的区别

spring-boot-starter-redis 1.4.1.RELEASE版本 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-redis</artifactId><version>1.4.1.RELEASE</version></dependency> 具体引入的依…...

elementui 自定义表头 renderHeader的写法 给增加el-tooltip的提示

<el-table-column prop"status" :render-header"renderHeader" ><template slot-scope"scope">{{scope.row.status}}</template> </el-table-column> renderHeader(h, { column}) {return [column.property,h(el-toolt...

潇洒郎:Python建立自己的包与发布自己的包供他人使用

1、建立自己的包&#xff1a; 2、发布包&#xff1a; 3、安装包&#xff1a; 4、 安装包...

.Net Core 5 查看当前CPU 占用比例

class Program{public static async Task Main(string[] args){var task Task.Run(() > ConsumeCPU(50));while (true){await Task.Delay(2000);var cpuUsage await GetCpuUsageForProcess();Console.WriteLine(cpuUsage);}}public static void ConsumeCPU(int percentag...

element-ui 中使用 table 根据状态设置某一行的复选框选择为禁用状态

element-ui 中使用 table表格时根据某一行数据状态设置复选框 选择是否为禁用状态如图中表格&#xff0c;状态为1时可以勾选复选框在el-table-column 复选框行中增加 :selectable“selectable” 属性 <el-table-column type"selection" :selectable"selectab…...

60岁首席工程师被SpaceX边缘化,主管:我怕他退休或死了

金磊 发自 凹非寺量子位 | 公众号 QbitAI在SpaceX&#xff0c;连首席工程师竟也能遭遇职场边缘化。故事的主人公叫做John Johnson&#xff08;姑且叫他“逊哥”&#xff09;&#xff0c;他在2018年加入SpaceX。当时的逊哥已经58岁&#xff0c;但在光学工程领域可谓颇有建树。刚…...

html网页图片下方空隙太大,网页制作中图片上下间为什么会有空隙?解决办法...

尽管已经是老掉牙的东西了&#xff0c;而且IMG在html中出现空隙的老式浏览器好多已经一去不复返了&#xff0c;但还是要给大家普及一下原因及原理。造成图片在IE下与容器下边界有空隙的原因图片文字等inline元素默认是和父级元素的baseline对齐的&#xff0c;而baseline又和父级…...

[附源码]JAVA毕业设计酒店订房系统(系统+LW)

[附源码]JAVA毕业设计酒店订房系统&#xff08;系统LW&#xff09; 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&…...

深度学习模型权重

深度学习模型权重 .pt是pytroch框架的 .weights是Darknet框架的 .ckpt是tenseflow框架的 .h5是keras框架的...

二进制权重

问题对于64或者32位无符号整数x&#xff0c;如0b111权值为3&#xff0c;找到一个权值一样&#xff0c;但是两数相减绝对值最小的数。 通过几个小样例测试发现规律&#xff0c;当两数的二进制位相邻值不同时&#xff0c;交换两数位置&#xff0c;即可以得到最近值 def closestW…...

预训练权重加载

一般为了缩短网络训练时间&#xff0c;并且希望达到更好的精度&#xff0c;我们一般加载预训练权重进行网络的训练。 加载的过程中可能会遇到&#xff0c;网络权重与网络层命名不同的情况。 目录一、 网络结构与权重完全对应二、网络结构相同&#xff0c;网络层命名不同一、 网…...

unity 蒙皮混合权重

other-blend weights...

机器学习:样本权重的理解

样本权重 在feed data的过程中&#xff0c;我们总是会用到samle_weight,样本权重的直观理解为&#xff1a;样本权重给出了各个样本的重要性。 具体是怎么体现的了&#xff0c;首先样本权重不是把样本乘以一个系数&#xff0c;这样的话feature值不就改变了&#xff0c;他改变的…...

nginx负载均衡(权重)

nginx负载均衡的配置。把请求通过nginx的反向代理分发到多台服务器处理&#xff0c;可以减轻单台服务器的处理压力&#xff0c;提高访问速度。 1、增加nginx负载均衡代码 #服务器分发池列表(注意server只填IP端口&#xff0c;要写入http里面&#xff0c;名字可以随便取&#x…...

Android 关于Android权重的真正理解

1.首先声明只有在Linearlayout中&#xff0c;layout_weight属性才有效。 在这里我们设置三个的权重比为 蓝1&#xff1a;黄2&#xff1a;红2那么它的效果是不是 蓝1&#xff1a;黄2&#xff1a;红2呢 <TextViewandroid:layout_weight"1"android:layout_width&quo…...

python networkx 边权重_Python/NetworkX:动态计算边权重

我有一个用networkx创建的未加权图&#xff0c;我想根据边出现的计数/频率计算节点之间的边的权重。图中的一条边可以出现多次&#xff0c;但是边出现的频率是事先不知道的。其目的是基于连接节点之间移动的权重(例如计数/频率)来可视化边缘。本质上&#xff0c;我想创建一个连…...

选择符的权重

1、选择符的权重 css中用四位数字表示权重&#xff0c;权重的表达方式如&#xff1a;0&#xff0c;0&#xff0c;0&#xff0c;0 &#xff08;元素&#xff09;类型选择符的权重为 0001 伪元素选择符的权重为 0001 class选择符的权重为 0010 属性选择符的权重为 0010 伪类选择符…...

010. 递增子序列

1.题目链接&#xff1a; 491. 递增子序列 2.解题思路&#xff1a; 2.1.题目要求&#xff1a; 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 &#xff08;数组可能有重复的元素&#xff0c;相等的元素排…...

网站权重是什么?

什么是权重 网站权重是指搜索引擎给网站&#xff08;包括网页&#xff09;赋予一定的权威值&#xff0c;对网站&#xff08;含网页&#xff09;权威的评估评价。权重越高&#xff0c;在搜索引擎所占的份量越大&#xff0c;在搜索引擎排名就越好。也是5118站长工具、爱站工具赋…...

人工智能作业及答案

人工智能作业人工智能简介语义网络知识图谱遗传算法熟悉和计算卷积操作人工智能简介 1、什么是人工智能 答&#xff1a;人工智能简称AI&#xff0c;是研究、开发用于模拟人脑的理论、方法技术的学科。它试图了解智能的实质&#xff0c;并铲出一种能以人类智能相似的方式做出反…...

计算机毕业设计Java基层党支部建设平台(源码+系统+mysql数据库+lw文档)

计算机毕业设计Java基层党支部建设平台(源码系统mysql数据库lw文档) 计算机毕业设计Java基层党支部建设平台(源码系统mysql数据库lw文档)本源码技术栈&#xff1a; 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 开发软件&#xff1a;idea eclipse 前端技术&a…...

android launchmode(四种启动模式)应用场景及实例

我们在开发项目的过程中&#xff0c;会涉及到该应用中多个Activity组件之间的跳转&#xff0c;或者夹带其它应用的可复用的Activity。例如我们可能希望跳转到原来某个Activity实例&#xff0c;而不是产生大量重复的 Activity。这样就需要我们为 Activity 配置特定的加载模式&am…...

最经典的java 23种设计模式及具体例子

设计模式&#xff08;Design pattern&#xff09;是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代 码可靠性。 毫无疑问&#xff0c;设计模式于己于他人于系统都是多赢的&#xff0c;设计…...

安卓常用6种设计模式总结

转载自https://blog.csdn.net/u012583459/article/details/47079529 和https://blog.csdn.net/u012583459/article/details/47079549 由于项目变更的频繁性&#xff0c;作为一名程序员&#xff0c;我们需要掌握设计模式的必要性&#xff0c;就不言而喻~~&#xff0c;下面就是一…...

GOF设计模式(概念、原则、场景、优点、缺点、应用)

设计模式是软件大师们根据多年来的软件开发经验&#xff0c;对软件开发领域包括合理复用、提高健壮性、减少BUG等各方面作的抽象总结&#xff0c;不同的设计模式方法适合于不同的应用场景&#xff0c;是汇结了他们最宝贵的经验总结。最早的开发模式是1994年GOF四人共同完成的《…...