使用DOM的方法和属性，实现简单的单击事件

最新推荐文章于 2022-07-26 10:56:34 发布

meng_hc

最新推荐文章于 2022-07-26 10:56:34 发布

阅读量343

点赞数

分类专栏： Javaweb 文章标签： dom javascript

本文链接：https://blog.csdn.net/qq_47888755/article/details/119647610

版权

Javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用DOM的方法和属性，实现简单的单击事件

JavaScript的常用事件

（1）JavaScript的常用事件主要为以下5个：
onload 加载完成事件：页面加载完成之后，常用做页面js代码的初始化操作。
onclick 单击事件：常用与按钮的单击响应事件。
onblur 失去焦点事件：常用于输入框失去焦点后，验证其输入内容是否合法。
onchange 内容发生改变事件：常用于下拉列表框和输入框中内容是否发生改变后才做。
onsubmit 表达单提交事件：常用于表单提交前，验证所有表单项是否合法。

（2）事件的绑定（注册）分为两种：
①静态注册：通过HTML标签的事件属性，直接赋予事件响应后的代码。
②动态注册：先通过js 代码得到标签的DOM对象，然后再通过DOM对象 . 事件名 = function（）{ }，这种形式赋予事件响应后的代码。

实现的效果

使用DOM的常用的属性，例如childNodes、previousSibling、innerhtml、innerText等；以及DOM的常用方法，例如getelementbyid、getelementbyname、getelementbytagname等，来实现对于下面情景的单击事件的功能实现。
在这里插入图片描述

代码

实现的完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj节点
		//是将动态注册的两个步骤合为一个步骤了
		document.getElementById("btn01").onclick = function () {
			 var bjObj = document.getElementById("bj");
			 alert(bjObj.innerHTML);
        }


		//2.查找所有li节点
        //按照标签名查找
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			var lis = document.getElementsByTagName("li");//集合
			alert(lis.length);
		};
		//3.查找name=gender的所有节点
        //是一个复选框
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			var genders = document.getElementsByName("gender");
			alert(genders.length);
		};
		//4.查找#city下所有li节点
        //按照两个步骤来查
		var btn04Ele = document.getElementById("btn04");
        btn04Ele.onclick = function(){
            //1、获取id为city的节点
            //2、通过city节点，调用getElementsByTagName()实现按照标签名查找子节点
            var lis = document.getElementById("city").getElementsByTagName("li");
            alert(lis.length);
		};


		//5.返回#city的所有子节点
        //使用的是：childNodes
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			alert(document.getElementById("city").childNodes.length);//9：空白字符，解析的时候表现为空格。也是字符串，就也算一个节点
		};


		//6.返回#phone的第一个子节点
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			alert(document.getElementById("phone").firstChild.innerHTML );
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			alert(document.getElementById("bj").parentNode.innerHTML);
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
		    alert(document.getElementById("android").previousSibling.innerHTML);
			
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value);
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
            document.getElementById("username").value = "国哥牛逼";
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert(document.getElementById("bj").innerHTML);
		};
	};
</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 type="radio" name="gender" value="male"/>
		Male
		<input 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>

行百里者，半九十！
坚持下去，才能迎来胜利！！！

meng_hc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用DOM的方法和属性，实现简单的单击事件

使用DOM的方法和属性，实现简单的单击事件实现的效果代码实现的效果使用DOM的常用的属性，例如childNodes、previousSibling、innerhtml、innerText等；以及DOM的常用方法，例如getelementbyid、getelementbyname、getelementbytagname等，来实现对于下面情景的单击事件的功能实现。代码实现的完整代码如下：<!DOCTYPE html><html><head><meta
复制链接

扫一扫