JS中DOM节点的CRUD

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//获取body标签//var body = document.getElementsByTagName("body")[0];/** 在document中有一个属性body，它保存的是body的引用*/var body = document.body;/** document.documentElement保存的是html根标签*/var html = document.documentElement;//console.log(html);/** document.all代表页面中所有的元素*/var all = document.all;//console.log(all.length);/*for(var i=0 ; i<all.length ; i++){console.log(all[i]);}*///all = document.getElementsByTagName("*");//console.log(all.length);/** 根据元素的class属性值查询一组元素节点对象* getElementsByClassName()可以根据class属性值获取一组元素节点对象，* 	但是该方法不支持IE8及以下的浏览器*///var box1 = document.getElementsByClassName("box1");//console.log(box1.length);//获取页面中的所有的div//var divs = document.getElementsByTagName("div");//获取class为box1中的所有的div//.box1 div/** document.querySelector()* 	- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象* 	- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替* 	- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个*/var div = document.querySelector(".box1 div");var box1 = document.querySelector(".box1")//console.log(div.innerHTML);//console.log(box1.innerHTML);/** document.querySelectorAll()* 	- 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回* 	- 即使符合条件的元素只有一个，它也会返回数组*/box1 = document.querySelectorAll(".box1");box1 = document.querySelectorAll("#box2");console.log(box1);};</script></head><body><div id="box2"></div>	<div class="box1">我是第一个box1	 <div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div></div></body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function() {//创建一个"广州"节点,添加到#city下myClick("btn01",function(){//创建广州节点 <li>广州</li>//创建li元素节点/** document.createElement()* 	可以用于创建一个元素节点对象，* 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，* 	并将创建好的对象作为返回值返回*/document.createElement("di");var li = document.createElement("li");//创建广州文本节点/** document.createTextNode()* 	可以用来创建一个文本节点对象*  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回*/var gzText = document.createTextNode("广州");//将gzText设置li的子节点/** appendChild()* 	 - 向一个父节点中添加一个新的子节点* 	 - 用法：父节点.appendChild(子节点);*/li.appendChild(gzText);//获取id为city的节点var city = document.getElementById("city");//将广州添加到city下city.appendChild(li);});//将"广州"节点插入到#bj前面myClick("btn02",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** insertBefore()* 	- 可以在指定的子节点前插入新的子节点*  - 语法：* 		父节点.insertBefore(新节点,旧节点);*/city.insertBefore(li , bj);});//使用"广州"节点替换#bj节点myClick("btn03",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** replaceChild()* 	- 可以使用指定的子节点替换已有的子节点* 	- 语法：父节点.replaceChild(新节点,旧节点);*/city.replaceChild(li , bj);});//删除#bj节点myClick("btn04",function(){//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** removeChild()* 	- 可以删除一个子节点* 	- 语法：父节点.removeChild(子节点);* 		* 		子节点.parentNode.removeChild(子节点);*///city.removeChild(bj);bj.parentNode.removeChild(bj);});//读取#city内的HTML代码myClick("btn05",function(){//获取cityvar city = document.getElementById("city");alert(city.innerHTML);});//设置#bj内的HTML代码myClick("btn06" , function(){//获取bjvar bj = document.getElementById("bj");bj.innerHTML = "昌平";});myClick("btn07",function(){//向city中添加广州var city = document.getElementById("city");/** 使用innerHTML也可以完成DOM的增删改的相关操作* 一般我们会两种方式结合使用*///city.innerHTML += "<li>广州</li>";//创建一个livar li = document.createElement("li");//向li中设置文本li.innerHTML = "广州";//将li添加到city中city.appendChild(li);});};function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun;}</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul></div></div><div id="btnList"><div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div><div><button id="btn02">将"广州"节点插入到#bj前面</button></div><div><button id="btn03">使用"广州"节点替换#bj节点</button></div><div><button id="btn04">删除#bj节点</button></div><div><button id="btn05">读取#city内的HTML代码</button></div><div><button id="btn06">设置#bj内的HTML代码</button></div><div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div></div></body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深入.net框架

深入.net框架

一、.net框架&#xff1a; 1.基础框架 2.运行环境 3.强大的类库 二、.net的两个重要组件 1.CLR&#xff1a;公共语言运行时 2.框架类库 三、CLR里面包含&#xff1a; 1.CLS&#xff1a;公共语言规范&#xff0c;包括了几种面向对象的编程语言的通用功能 2.CTS&#xff1a;通用系…
阅读更多...
.NET Core 2.0体验

.NET Core 2.0体验

.NET Core 2.0预览版及.NET Standard 2.0 Preview 这个月也就要发布了。具体相关信息可以查看之前的文章.NET Core 2.0及.NET Standard 2.0。 今天来实际体验.NET Core 2.0&#xff0c;正式版发布还需要一段时间。 .NET Core 2.0 本文使用的是 nightly .NET Core 2.0 runtim…
阅读更多...
跟我学 Java 8 新特性之 Stream 流（四）并行流

跟我学 Java 8 新特性之 Stream 流（四）并行流

转载自 跟我学 Java 8 新特性之 Stream 流&#xff08;四&#xff09;并行流 随着对流API认识的慢慢深入&#xff0c;本章我们要讨论的知识点是流API里面的并行流了。 在开始讨论并行流之前&#xff0c;我先引发一下大家的思考&#xff0c;就你看到这篇文章的时间&#xff…
阅读更多...
运算和统计

运算和统计

一、变量&#xff1a; 1.是一种内容不固定的项&#xff0c;数据内容会因程序的运行而改变。 2.将变量存在计算机内存中&#xff0c;便于程序调用 3.变量有变量类型、变量名和值。 二、变量的类型&#xff1a; 1.字符串类型&#xff1a;存储姓名&#xff0c;性别&#xff0c;一句…
阅读更多...
JS浏览器加载一个页面的过程

JS浏览器加载一个页面的过程

加载过程->从上向下逐行进行加载 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script type"text/javascript">/** 浏览器在加载一个页面时&#xff0c;是按照自上向下的顺序加载的&…
阅读更多...
MyBatis第四天（多表查询）

MyBatis第四天（多表查询）

地址&#xff1a;引用MyBatis第四天&#xff08;多表查询&#xff09;
阅读更多...
统一的.NET文档体验发布

统一的.NET文档体验发布

Microsoft发布了新的.NET API阅读器。该阅读器可以查找所有相关的.NET文档。第一版中包括了.NET Framework、.NET Core、.NET Standard、Xamarin和Azure NuGet软件包的参考文档&#xff0c;并可根据用户反馈添加其它领域的文档。 该阅读器提供了在同一处搜索、展示、发现和浏览…
阅读更多...
深入C#数据类型

深入C#数据类型

一、类&#xff1a; 一组相同属性和方法的对象的集合 二、对象&#xff1a; 用来描述客观事物的实体 三、类和对象的关系&#xff1a; 抽象和具体的关系 四、封装&#xff1a; 隐藏内部细节&#xff0c;对外提供公共的接口&#xff0c;又称为信息隐藏。 五、封装的好处&#xf…
阅读更多...
跟我学 Java 8 新特性之 Stream 流（三）缩减操作

跟我学 Java 8 新特性之 Stream 流（三）缩减操作

转载自 跟我学 Java 8 新特性之 Stream 流&#xff08;三&#xff09;缩减操作 和前面两篇文章一起服用&#xff0c;效果会更佳。通过对流API的基础体验Demo和关键知识点的讲解&#xff0c;相信大家对流API都有一定的认识了&#xff0c;但是流API强大的功能&#xff0c;可不…
阅读更多...
JS中字符串的常用方法

JS中字符串的常用方法

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script type"text/javascript">//创建一个字符串var str "Hello Atguigu";/** 在底层字符串是以字符数组的形式保存的* ["…
阅读更多...
使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用

使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用

最近我为我自己的应用开发框架Apworks设计了一套案例应用程序&#xff0c;并以Apache 2.0开源&#xff0c;开源地址是&#xff1a;https://github.com/daxnet/apworks-examples&#xff0c;目的是为了让大家更为方便地学习和使用.NET Core、最新的前端开发框架Angular&#xff…
阅读更多...
C#使用集合组织相关数据

C#使用集合组织相关数据

一、为什么使用集合&#xff1f; 数组的长度是固定的&#xff0c;对数组中的元素进行动态添加和删除的时候很麻烦。集合可以更好的进行对元素添加和删除 二、ArrayList集合&#xff1a; 1.类似于数组&#xff0c;但是可以直观的动态维护。 2.位于System.Collections命名空间里面…
阅读更多...
IntelliJ IDEA 最常用配置详细图解，新手入门必看

IntelliJ IDEA 最常用配置详细图解，新手入门必看

转载自 IntelliJ IDEA 最常用配置详细图解&#xff0c;新手入门必看 刚刚使用IntelliJ IDEA 编辑器的时候&#xff0c;会有很多设置&#xff0c;会方便以后的开发&#xff0c;磨刀不误砍柴工。 比如&#xff1a;设置文件字体大小&#xff0c;代码自动完成提示&#xff0c;版…
阅读更多...
MyBatis（延迟加载 缓存）

MyBatis（延迟加载 缓存）

mybatis目录 一对一延迟加载 1.在SqlMapConfig.xml中配置setting标签 2.在IAccoutDao.xml中配置association标签 3.测试类 4.成功运行 一对多延迟加载 2.在IUserDao.xml中配置collection标签 缓存 一级缓存 二级缓存 1.SqlMaoConfig.xml中 2.在需要使用二级缓存的实体类的mapp…
阅读更多...
JS函数中的arguments

JS函数中的arguments

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script type"text/javascript">/** 在调用函数时&#xff0c;浏览器每次都会传递进两个隐含的参数&#xff1a;* 1.函数的上下文对象 this…
阅读更多...
剑英的区块链学习手记（二）

剑英的区块链学习手记（二）

孙子说&#xff0c;知己知彼&#xff0c;百战不殆。 咱是通过小蚁学习区块链技术的。 开工之前&#xff0c;先了解一下小蚁的资料家族。 小蚁网站 https://www.antshares.org/ 小蚁源码 https://github.com/AntShares 小蚁SDK源码 https://github.com/ANTSHARESSdk 比较集…
阅读更多...
PhotoShop基础知识

PhotoShop基础知识

一、PhotoShop&#xff1a; 1.是由Adobe Systems开发和发行的专门用于图形图像处理的软件 2.优点&#xff1a;绘制或者处理后的图像&#xff0c;颜色鲜明、形象生动&#xff0c;能够给观者很好的视觉效果。 二、PhotoShop软件应用领域&#xff1a; 1.在平面设计中的应用 2.在插…
阅读更多...
跟我学 Java 8 新特性之 Stream 流（二）关键知识点

跟我学 Java 8 新特性之 Stream 流（二）关键知识点

转载自 跟我学 Java 8 新特性之 Stream 流&#xff08;二&#xff09;关键知识点 我们的第一篇文章&#xff0c;主要是通过一个Demo&#xff0c;让大家体验了一下使用流API的那种酣畅淋漓的感觉。如果你没有实践&#xff0c;我还是再次呼吁你动手敲一敲&#xff0c;自己实实…
阅读更多...
mybatis使用注解开发

mybatis使用注解开发

Mybatis目录 注解开发的crud 1.IUserDao接口中使用注解 2.测试类 注解开发的多表查询 多对一&#xff08;一对一&#xff09; 1.IAccountDao接口中使用注解 2.Account类中&#xff08;从表类&#xff09; 3.测试类 一对多&#xff08;多对多&#xff09; 1.IUserDao接口中使用…
阅读更多...
Build 2017 | 微软开发者大会临近，今年的主题是边缘计算

Build 2017 | 微软开发者大会临近，今年的主题是边缘计算

200 多家明星企业&#xff0c;20 位著名投资机构顶级投资人共同参与&#xff01;「新智造成长榜」致力于发掘 AI 领域有 “三年十倍” 成长潜力的创新公司&#xff0c;下一波 AI 独角兽&#xff0c;会有你么&#xff1f;点击加入&#xff01; 雷锋网按&#xff1a;微软首席执行…
阅读更多...
最新文章

Copyright @ 2022~2023