【js基础】学习笔记day07（DOM）

已于 2022-02-19 14:51:41 修改
阅读量336 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
于 2022-02-16 15:31:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58214412/article/details/122947578
版权

目录

91.DOM简介

92.事件的简介

93.文档的加载

94.DOM查询一

95.图片切换的练习

96.DOM查询二

97.DOM查询三

98.全选练习（上）

99.全选练习（中）

100.全选练习（下）

101.DOM查询剩余方法

102.DOM增删改

103.添加删除练习--删除

104.添加删除练习--添加

105.添加删除练习--添加方法优化

106.a的索引问题

107.操作内联样式

108.获取元素样式

109.getStyle()方法

110.其他样式相关的属性

91.DOM简介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			
			/*
			 * 浏览器已经为我们提供 文档节点 对象这个对象是window属性
			 * 	可以在页面中直接使用，文档节点代表的是整个网页
			 */
			//console.log(document);
			
			//获取到button对象
			var btn = document.getElementById("btn");
			
			//修改按钮的文字
			btn.innerHTML = "I'm Button";
			
			
		</script>
	</body>
</html>

92.事件的简介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			我们可以在事件对应的属性中设置一些js代码，
				这样当事件被触发时，这些代码将会执行
				
			这种写法我们称为结构和行为耦合，不方便维护，不推荐使用	
		-->
		<!--<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>-->
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			
			/*
			 * 事件，就是用户和浏览器之间的交互行为，
			 * 	比如：点击按钮，鼠标移动、关闭窗口。。。
			 */
			
			
			
			//获取按钮对象
			var btn = document.getElementById("btn");
			
			/*
			 * 可以为按钮的对应事件绑定处理函数的形式来响应事件
			 * 	这样当事件被触发时，其对应的函数将会被调用
			 */
			
			//绑定一个单击事件
			//像这种为单击事件绑定的函数，我们称为单击响应函数
			btn.onclick = function(){
				alert("你还点~~~");
			};
			
			
		</script>
	</body>
</html>

93.文档的加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
			 * 	读取到一行就运行一行,如果将script标签写到页面的上边，
			 * 	在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
			 * 	会导致无法获取到DOM对象
			 */
			
			
			
			/*
			 * onload事件会在整个页面加载完成之后才触发
			 * 为window绑定一个onload事件
			 * 		该事件对应的响应函数将会在页面加载完成之后执行，
			 * 		这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
			 * 	
			 */
			window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn">点我一下</button>
		
		<!--<script type="text/javascript">
			
			/*
			 * 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
			 */
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function(){
				alert("hello");
			};
			
		</script>-->
		
	</body>
</html>

94.DOM查询一

<!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(){
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//alert(inputs.length);
					
					for(var i=0 ; i<inputs.length ; i++){
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签，这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性，
						 * 	直接使用 元素.属性名
						 * 		例子：元素.id 元素.name 元素.value
						 * 		注意：class属性不能采用这种方式，
						 * 			读取class属性时需要使用 元素.className
						 */
						alert(inputs[i].className);
					}
				};
				
				
				
				//查找#city下所有li节点
				//返回#city的所有子节点
				//返回#phone的第一个子节点
				//返回#bj的父节点
				//返回#android的前一个兄弟节点
				//读取#username的value属性值
				//设置#username的value属性值
				//返回#bj的文本值
				
			};
			
		
		</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>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

95.图片切换的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				/*设置文本居中*/
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮切换图片
				 */
				
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				/*
				 * 要切换图片就是要修改img标签的src属性
				 */
				
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//创建一个数组，用来保存图片的路径
				var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
				
				//创建一个变量，来保存当前正在显示的图片的索引
				var index = 0;
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//设置提示文字
				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				
				
				//分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					
					/*
					 * 切换到上一张，索引自减
					 */
					index--;
					
					//判断index是否小于0
					if(index < 0){
						index = imgArr.length - 1;
					}
					
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				};
				
				next.onclick = function(){
					
					/*
					 * 切换到下一张是index自增
					 */
					index++;
					
					if(index > imgArr.length - 1){
						index = 0;
					}
					
					//切换图片就是修改img的src属性
					//要修改一个元素的属性 元素.属性 = 属性值
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="outer">
			
			<p id="info"></p>
			
			<img src="img/1.jpg" alt="冰棍" />
			
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
			
		</div>
	</body>
</html>

96.DOM查询二

<!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(){
				
				
				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					
					//获取id为city的元素
					var city = document.getElementById("city");
					
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
					
				};
				
				//为id为btn05的按钮绑定一个单击响应函数
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					/*
					 * childNodes属性会获取包括文本节点在呢的所有节点
					 * 根据DOM标签标签间空白也会当成文本节点
					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
					 */
					var cns = city.childNodes;
					
					//alert(cns.length);
					
					/*for(var i=0 ; i<cns.length ; i++){
						alert(cns[i]);
					}*/
					
					/*
					 * children属性可以获取当前元素的所有子元素
					 */
					var cns2 = city.children;
					alert(cns2.length);
				};
				
				//为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					//获取id为phone的元素
					var phone = document.getElementById("phone");
					//返回#phone的第一个子节点
					//phone.childNodes[0];
					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
					var fir = phone.firstChild;
					
					//firstElementChild获取当前元素的第一个子元素
					/*
					 * firstElementChild不支持IE8及以下的浏览器，
					 * 	如果需要兼容他们尽量不要使用
					 */
					//fir = phone.firstElementChild;
					
					alert(fir);
				};
				
		
			
		
		</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>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text&#
最低0.47元/天 解锁文章
西西歪歪西歪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript-dom查找返回值练习
主营前端方向，技术栈是vue
01-05 683
dom查找返回值练习(1.1 查找 #bj 节点 1.2 查找所有 li 节点 1.3 查找 name=gender 的所有节点 1.4 查找 #city 下所有 li 节点 1.5 返回 #city 的所有子节点 1.6 返回 #phone 的第一个子节点 1.7 返回 #bj 的父节点 1.8 返回 #android 的前一个兄弟节点 1.9 返回 #username 的 value 属性值 1.10 设置 #username 的 value 属性值 1.11 返回 #bj 的文本值)
DOM入门及增删查改
xing_kai_kai的博客
07-10 314
什么是DOM DOM全称Document Object Model文档对象模型 Js中通过DOM来对HTML文件进行操作，只要理解DOM就可以随心所欲的操作WEB页面 文档 文档表示的就是整个HTMl网页文档 对象 对象表示将网页中的每一个部分都转换为了一个对象 模型 使用模型来表示对象之间的关系，这样方便我们获取对象 模型 HTML DOM 模型被结构化为对象树： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0nr5Kg2d-15943831242
DOM查找练习
dengfengling999的博客
01-11 277
运用知识点： 浏览器在加载一个页面的时候，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到也免得上边，在代码执行时，页面还没有加载DOM对象也没有加载，会导致无法获取到DOM对象，里面的button还没有加载，所获取到的btn对象为空 浏览器在加载一个页面的时候，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到也免得上边，在代码执行时，页面还没有加载DOM对象也没有加载，会导致无法获取到DOM对象，里面的button还没有加载，所获取到的btn对象
前端笔记 （持续更新~）
qq_43959639的博客
11-21 3694
前端笔记
DOM学习
qq_52167595的博客
05-20 163
一.概述 文档对象模型(Document Object Model) 把文档中的各个部分拆分出来，每一个都封装成了一个对象 组成： *Document：文档对象，整个树对象 *Element：标签对象 Attribute：属性对象 Text：文本对象 Comment：注释对象 *Node：节点对象 ...
【js基础】学习笔记day06（正则表达式）
weixin_58214412的博客
02-15 105
79.call和apply 80.arguments 81.Date对象 82.Math 83.包装类 84.字符串的方法 85.正则表达式 86.正则语法 87.字符串和正则相关的方法 88.正则表达式语法一 89.正则表达式语法二 90.邮件的正则 ...
初学Vue(学习笔记 一) day one
01-20
Vue.js 是一个渐进式的JavaScript框架，它设计的目标是让开发者能够轻松地构建用户界面，尤其是在Web应用开发中。Vue的核心特性包括声明式渲染、组件系统、客户端路由管理和集中式状态管理。Vue的设计使得它对熟悉...
ajax-day01.rar_达内开发学习笔记
09-20
在“ajax-day01.rar_达内开发学习笔记”这个压缩包中，包含了第一天学习Ajax的基础内容，旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术，而是一组技术的组合，...
Vue基础day3学习资料.zip
03-31
Vue的基础语法是学习Vue开发的关键，而"Vue基础day3学习资料.zip"这个压缩包提供了全面的学习资源，包括案例、笔记、PPT和作业，帮助初学者深入理解Vue的核心概念。 首先，让我们来看看"day03_Vue01-基础语法3.ppt...
Vue基础day4学习资料.zip
03-31
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、数据绑定和响应式更新为核心，大大简化了Web应用的构建。在"Vue基础day4学习资料.zip"中，我们可以找到一系列资源来深入理解和掌握Vue的基础知识，特别是...
Vue基础day2学习资料.zip
03-31
在"Vue基础day2学习资料.zip"这个压缩包中，包含了一系列的学习资源，帮助你深入理解Vue的基础语法和全家桶组件。下面，我们将详细探讨这些知识点。 首先，"day02_Vue01-基础语法3.ppt"可能是一个关于Vue基础语法的...
JavaScript知识点整理（十三）- DOM -（1）简介、获取元素、事件基础
JHY97的博客
02-17 235
目录 一、DOM简介 1.1 什么是DOM 1.2 DOM树 二、获取元素 2.1 如何获取页面元素 2.2 根据ID获取 2.3 根据标签名获取 2.4 通过HTML5新增的方法获取 2.5 获取特数元素（body，html） 三、事件基础 3.1 事件概述 3.2 执行事件的步骤 3.3 常见的鼠标事件 一、DOM简介 1.1 什么是DOM 文档类型对象，是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口 W3C已经定义了一系列的DOM接口，通过这些
DOM（三）获取元素的第二种方法
qq_45102392的博客
03-07 425
1.eventTarget . addEventListener (type, listener [，useCapture] ) 这里不需要等于号addEventListener= (type, listener [，useCapture] )传统的绑定才有等于号 eventTarget . addEventListener ()方法将指定的监听器注册到eventTarget (目标对象)上,当该对 象触发指定的事件时,就会执行事件处理函数。 该方法接收三个参数: ●type :事件类型字符串,比如cli
HashMap之getTreeNode
Frank-Fu
09-09 407
HashMap之treeifyBin前提作用业务逻辑整理源码分析getTreeNodefind 前提 jdk1.8之前HashMap的存储方式：链表+hash jdk1.8以后中HashMap的存储方式：链表+hash+红黑树算法 作用 根据key查找树结构中与之一致的对象 业务逻辑整理 1，如果table数组为空，或者大小未超过64，则重置table大小 2，如果table大小超过64，把当前链表转换成红黑树 2.1，循环链表，把每一个对象转换成红黑树，并绑定上下级关系 2.2，重置红黑树相关
JavaScript零基础入门 8：JavaScript通过document获取节点元素
学Java，找哪吒
12-25 5800
???? Java学习路线配套文章：Java学习路线总结，搬砖工逆袭Java架构师（全网最强） ???? 基础推荐：Java基础教程系列 ???? 实战推荐：Spring Boot基础教程 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 目录一、document二、onload三、获取节点元素1、innerHTML2、getElemen
JavaScript之DOM增删改查(重点)
程序猿小九九的博客
02-10 3583
DOM操作：事件、增、删、改查
DOM的增删改查
weixin_44860226的博客
08-02 993
onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数。如需向HTMLDOM添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。HTMLDOM使JavaScript有能力对HTML事件做出反应。通过HTMLDOM，您能够访问HTML元素的样式对象。访问HTMLDOM-查找HTML元素。修改HTML=改变元素、属性、样式和事件。"已启用cookie""未启用cookie"...
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 285
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
JavaScript DOM学习笔记：从基础到实践
JavaScript DOM的学习总结 JavaScript是一种广泛应用于网页和网络应用的脚本语言，由网景公司的Brendan Eich设计，最初是为了增强网页的交互性。它是一种动态类型、弱类型的语言，基于原型，其解释器通常作为浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值