一、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>年
<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');
var btn = document.getElementById("btn");
var interest = document.getElementsByName("hobby");
inputName[0].value = "大爷,留下你的大名吧!"
birdyInit();
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);
}