JavaScript基础9

最新推荐文章于 2024-08-13 22:07:58 发布

折翼天使【*-*】

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量86

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52188375/article/details/110073439

版权

本文介绍了JavaScript中DOM对象的使用，包括控制HTML元素、属性、CSS以及事件处理。详细阐述了各种事件如onclick、onchange、onfocus、onblur、onmouseover、onmouseout、onsubmit、onkeydown等的用法，并讲解了如何创建和删除HTML元素。

摘要由CSDN通过智能技术生成

JavaScript_9

Javascript中的dom对象

1. 控制html元素

2. 控制html元素的属性

3. 控制css

4. 控制事件

4.1 按钮点击事件 onclick

1. 具体用法一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testClick(){
				alert("按钮点击事件");
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试按钮点击事件" onclick="testClick();"/>
	</body>
</html>

2. 具体用法二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var  but1=document.getElementById("but1");//object HTMLInputElement
				but1.onclick=function(){
					alert("按钮点击事件2");
				}
			}
			
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试按钮点击事件2" />
	</body>
</html>

4.2 页面初始化事件

1. 具体用法一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testOnload(){
				alert("页面初始化事件");
			}
		</script>
	</head>
	<body  onload="testOnload();">
	</body>
</html>

2. 具体用法二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//通过window对象调用onload事件
			window.onload=function(){
				alert("页面初始化事件");
			}
		</script>
	</head>
	<body>
	</body>
</html>

4.3 onchange 事件，当用户改变输入字段的内容时触发

1.具体用法一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testonchange(){
				alert("输入内容被改变是触发");
			}
		</script>
	</head>
	<body>
		<input type="text"  value="hello" onchange="testonchange();" />
	</body>
</html>

2.具体用法二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var text1=document.getElementById("text1");
				text1.onchange=function(){
					ale

最低0.47元/天解锁文章

折翼天使【*-*】

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础9

JavaScript_9Javascript中的dom对象 1. 控制html元素 2. 控制html元素的属性 3. 控制css 4. 控制事件 4.1 按钮点击事件 onclick 1. 具体用法一<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script&g...
复制链接

扫一扫