Web前端学习之路（五）DOM与事件

最新推荐文章于 2025-06-03 16:01:39 发布

原创最新推荐文章于 2025-06-03 16:01:39 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #DOM #事件

Web前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了DOM（Document Object Model）的基本概念，包括常见的DOM操作方法如getElementById、getElementsByClassName等，以及如何通过这些方法操作HTML元素。此外，还深入探讨了事件的概念，列举了常用的鼠标事件、键盘事件和表单事件，并提供了具体的示例代码，展示了如何在实际应用中使用这些事件。

一、DOM

定义

DOM，全称Document Object Model，是一种将文档（页面）表现为结构化的表示方法，使每一个页面元素都是可操控的，DOM将网页和脚本以及其他的编程语言联系了起来。

DOM树

PS. 图仅供参考。

常见DOM操作

方法	说明
getElementById	返回带有指定ID的元素
getElementsByName	返回拥有相同名称的元素的节点列表
getElementsByTagName	返回包含带有指定标签名称的所有元素的节点列表
getElementsByClassName	返回包含带有指定类名的所有元素的节点列表

二、事件

定义

事件是指被程序发现的行为或发生的事情，而且它可能会被程序处理。

常用事件

鼠标事件

事件名	说明
onclick	在用户单击主鼠标按钮（一般是左边的按钮）或按下回车键时触发
ondblclick	在用户双击主鼠标按钮时触发
onmouseover	在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发
onmouseout	在鼠标指针位于一个元素上方，然后用户将其移动到另一个元素时触发
onmousedown	在用户按下了任意鼠标按钮时触发

键盘事件

事件名	说明
onkeydown	按下键盘键
onkeyup	紧接着`keydown`事件触发（只有按下字符键时触发）
keypress	释放键盘键

表单事件

事件名	说明
onfoucs	获得焦点时触发
onsubmit	点击提交按钮时触发
onblur	失去焦点时触发
onchange	值发生改变的时候触发

三、操作表单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作表单</title>
	<script type="text/javascript" src="index.js"></script>
</head>
<body onload="init()">
	<form>
		姓名：<input type="text" name="username">
		密码：<input type="password" name="userpassword">
		<input type="button" name="btn" value="确认">
		<br>
		性别：
		<input type="radio" name="sex" value="0">女
		<input type="radio" name="sex" value="1" checked="checked">男
		<br>
		生日：
		<select id="year" name="year"></select>年
		<!-- 事件第1种调用方法 -->
		<select id="month" name="month" onchange="selectYmd()"></select>月
		<select id="day" name="day"></select>日
		<br>
		爱好：
		<input type="checkbox" name="hobby" value="read">阅读
		<input type="checkbox" name="hobby" value="run">跑步
		<input type="checkbox" name="hobby" value="anime">动漫
		<input type="checkbox" name="hobby" value="game">游戏
		<input type="button"  id="btn" name="hobbybtn" value="全选">
	</form>
</body>
</html>

/*
初始化
*/
var flag=true;	// 全选与否控制
function init() {
	var inputName = document.getElementsByName('username');
	// inputPasswd = document.getElementsByName("userpassword");

	var btn = document.getElementById("btn");
	var interest = document.getElementsByName("hobby");

	inputName[0].value = "大爷，留下你的大名吧！"

	birdyInit();

	// 事件第2种调用方法
	btn.onclick= function(){
		
		for(i=0;i<interest.length;i++){
			interest[i].checked=flag;
		}
		if(flag){
			btn.value="全不选";
		}else{
			btn.value="全选";
		}
		flag=!flag;//开关变量
	}
}

/*生日*/
function birdyInit(){
	var yyyy=document.getElementById("year");
	var mm=document.getElementById("month");
	var dd=document.getElementById("day");

	var date=new Date();
	var year=parseInt(date.getFullYear());

	initSelect(yyyy,1999,year);
	initSelect(mm,1,12);
	initSelect(dd,1,31);
	// 获取列表框的长度
	var n=yyyy.length;
	// 列表框选中某一个条目
	yyyy.selectedIndex=Math.round(n/2);
}

/*自动添加年月日*/
function initSelect(obj,start,end){
   for(var i=start;i<=end;i++){
		obj.options.add(new Option(i,i));
	}
}

/*确定每月天数*/
function selectYmd(){
	var yyyy=document.getElementById("year");
	var mm=document.getElementById("month");
	var dd=document.getElementById("day");
	var m=parseInt(mm.value);
	var dayEnd;
	if(m==4 || m==6 || m==9 || m==11){
		dayEnd=30;
	}else if(m==2){
		dayEnd=28;
		y=parseInt(yyyy.value);
		if((y % 4==0 && y % 100 !=0) || y % 400 ==0){
			dayEnd=29;
		}
	}else{
		dayEnd=31;
	}
	dd.options.length=0;
	initSelect(dd,1,dayEnd);
}