DOM树（提交事件、变化事件）、DOM树（元素的创建及删除）、 for - in 循环、for -of循环

最新推荐文章于 2024-08-08 22:51:45 发布

怪咖i！

最新推荐文章于 2024-08-08 22:51:45 发布

阅读量333

点赞数

分类专栏：基础语法元素的创建删除 for in循环 for of循环文章标签： dom操作点击事件

本文链接：https://blog.csdn.net/weixin_52231266/article/details/111874043

版权

基础语法同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

元素的创建删除

1 篇文章 0 订阅

订阅专栏

for in循环 for of循环

1 篇文章 0 订阅

订阅专栏

事件是DOM树操作中比较重要，今天要说一下其中的提交事件与变化事件。

提交事件：

其中用到的一个属性为：onsubmit
注意：onsubmit事件需要一个boolean类型的返回值作为表单是否提交的依据

语法：onsubmit = "这里需要一个boolean类型的返回值作为表单是否提交的依据"

下面我们通过代码来看一下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>	
							<!--这里需要一个boolean类型的返回值作为表单是否提交的依据  -->
		<form action="" onsubmit="return check()">
			用户名： <input type="text" name = "uname">
			密码： <input type="password" name="pwd">
			<input type="submit" value="登录">
		</form>
		<script type="text/javascript">
			//先获取元素
		   let inNodes = document.getElementsByTagName("input");
		   //提交事件时执行的任务
		   function check(){
			   let unameVal = inNodes[0].value;
			   if(unameVal == ""){
				   return false;
			   }
			   return true;
		   }
		</script>
	</body>
</html>

表单的提交事件是比较重要的，希望能帮助到各位。

变化事件：

变化事件一般用于下拉框。
语法：onchange ="执行的任务";

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--   变化事件 -->
		<select name="pro" id="" onchange ="changeMethod(this)">
			<option value ="henan">河南省</option>
			<option value ="hebei">河北省</option>
			<option value="hu">呼伦贝尔</option>
		</select>
		<script type="text/javascript">
			/* select标签中提供了一个属性-selectedindex（获取当前选中的下拉框中的下标）*/
			function changeMethod(obj){
				console.log("----",obj.selectedIndex,obj.value);
			}
			
		</script>
	</body>
</html>

元素创建删除：

创建元素： document.createElement(“标签名”);
使用元素的创建及删除的时候一定要确定要删除的元素是不是在那个元素中包括。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<button type="button" style="width: 120px;" >create Element </button>
		<div style="border: 1px solid black;"> </div>
		<script type="text/javascript">
			//获取元素
			let btn = document.getElementsByTagName("button")[0];
			// 添加点击事件
			btn.onclick = function(){
				// 创建元素   document.createElement("标签名");
				let aNode = document.createElement("a");
				//给创建好的元素（标签）添加内容及相关的属性
				aNode.innerHTML = "百度新闻";
				aNode.href  = "http://news.baidu.com";
				//先找到想要在那个地方显示
				let divNode = document.getElementsByTagName("div")[0];
				//将创建好的标签放到指定的页面位置中 父类元素.appendChild(子类元素)
				divNode.appendChild(aNode);
			}
			
			
		</script>
	</body>
</html>

for - in 循环：

for-in循环通常用于带有下标的集合数据的遍历。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				for-in循环，通常用于带有下标的集合数据的遍历，例如：数组
			*/
		   let array = ["李白","杜甫","苏轼"];
		   /*  普通遍历*/
		  /* for(let i =0 ; i<array.length ; i++){
			   console.log(array[i]);
		   }*/
		   for(let index in array){
			   /*index 相当于数组的下标*/
				console.log(array[index]);
		   } 
		</script>
	</body>
</html>

for - of 循环：

for - in 循环与 for - of 的不同点：
for in循环还可以遍历JSON对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*  for-of 循环可以遍历JSON对象*/
			let array = ["蔡文姬","澜","大鲨鱼","司马懿"];
			for (let s of array) {
				console.log(s)
			}
			
			let userJsonsArr = [
				{"id":1,"uname":"haha","password":"12345","sex":"男"}
			]
			for (let a of userJsonsArr) {
				console.log(a.id)  //获取到  1
				}
		</script>
	</body>
</html>