JavaScript必学之事件、BOM、DOM
JavaScript
文章目录
- JavaScript
-
- 学习目标
- 1 事件Event
-
- 1 事件
-
- 什么是事件？
- 作用
- 几个名词
- 2 事件类型
-
- 1 鼠标事件
- 2 键盘事件
- 3 页面事件
- 事件流和事件模型
-
- 事件冒泡
- 事件捕获
- DOM事件流
- 2 BOM
-
- 1 Window对象
-
- 系统对话框
- 打开、关闭窗口
- 时间函数
-
- setTimeout()
- setInteval()
- 2 history对象
-
- 属性
- 方法
- 3 location对象
-
- 属性
- 方法
- 3 DOM
-
- 节点
- 操作元素的节点
-
- 1 获取节点
- 2 创建节点
- 3 插入节点
- 4 查找节点
- 5 删除节点
- 4 表单
-
- 1 获取表单
- 2 获取表单元素
- 3 提交表单
- 4 表单验证
-
- 用户注册实例
学习目标
1 事件Event
1 事件
什么是事件？
事件是JavaScript应用跳动的心脏，进行交互，使网页动起来
当我们与浏览器中 Web ⻚⾯进⾏某些类型的交互时，事件就发⽣了
通过使⽤ JavaScript ，你可以监听特定事件的发⽣，并规定让某些事件发⽣以对这些事件做出响应
作用
1、验证用户输入的数据
2、增强页面的动感效果
3、增强用户的体验度
几个名词
事件源：谁触发的事件
事件名：触发了什么事件
事件监听：谁管这个事件，谁监视
事件处理：发生了怎么办
例如：
- 闯红灯：
事件源 : ⻋ ;
事件名: 闯红灯 ;
监听：摄像头、交警 ;
处理 : 扣分罚款。
- 单击按钮：
事件源 : 按钮 ;
事件名: 单击 ;
监听：窗口 ;
处理 : 执行函数。
2 事件类型
JavaScript可以处理的事件类型为：⿏标事件、键盘事件、页面事件
1 鼠标事件
Mouse事件：由⿏标或类似⽤户动作触发的事件
常见的鼠标事件有：
| 事件属性 | 描述 |
|---|---|
| onclick | 鼠标单击某个对象事件 |
| ondblclick | 鼠标双击某个对象事件 |
| onmousedown | 鼠标按钮被按下 |
| onmouseout | 鼠标从某元素移开 |
| onmousemove | 鼠标被移动 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 鼠标按键被松开 |
2 键盘事件
Keyboard事件：由键盘触发的事件
常见的键盘事件有：
| 事件属性 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键按下并松开 |
| onkeyup | 某个键盘按键被松开 |
3 页面事件
HTML事件：页面内部触发的事件
常见的页面事件有：
| 事件属性 | 描述 |
|---|---|
| onfocus | 元素获得焦点 |
| onblur | 元素失去焦点 |
| onload | 一张页面或者一个图片完成加载 |
| onabort | 图像的加载被中断 |
事件流和事件模型
我们的事件最后都有⼀个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当⼀个HTML元素产⽣⼀个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为DOM事件流
事件流：是指⻚⾯接受事件的顺序
事件顺序有两种类型：事件捕获 和 事件冒泡
冒泡和捕获其实都是事件流的不同表现
事件冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（⽂档）
如下面的页面：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScripttitle>
head>
<body>
<div id="myDiv">Click mediv>
body>
html>
如果单击了页面的元素，那么这个click事件会按照如下顺序传播：
1 div ----> 2 body ----> 3 html ----> 4 document
所有现代浏览器都⽀持事件冒泡，但在具体实现上还是有⼀些差别
事件捕获
Netscape提出的另⼀种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，⽽最具体的节点应该最后接收到事件
事件捕获的⽤意在于在事件到达预定⽬标之前捕获它
还以前⾯的例⼦为例。那么单击
1 document ----> 2 html ----> 3 body ----> 4 div
虽然事件捕获是Netscape唯⼀⽀持的事件流模式，但很多主流浏览器⽬前也都⽀持这种事件流模型
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于⽬标阶段和事件冒泡阶段。
⾸先发⽣的是事件捕获阶段，为截获事件提供了机会。
然后是实际的⽬标接收到事件。
最后⼀个阶段是冒泡阶段，可以在这个阶段对事件做出响应
2 BOM
BOM：Browser Object Model 浏览器对象模型
BOM的核⼼对象是window，它表示浏览器的⼀个实例
window对象有双重⻆⾊，它既是通过JavaScript访问浏览器窗⼝的⼀个接⼝，⼜是ECMAScript规定的Global对象
1 Window对象
系统对话框
浏览器通过（实际是window对象的⽅法）alert()、confirm()、prompt()⽅法可以调⽤系统对话框向⽤户显示消息
1、消息框：alert
alert()方法⽤于显示带有⼀条指定消息和⼀个 OK 按钮的警告框
2、输入框：prompt
prompt() ⽅法⽤于显示可提示⽤户进⾏输⼊的对话框
参数（可选）：
第⼀个参数：要在对话框中显示的纯⽂本
第⼆个参数：默认的输⼊⽂本3、确认框：confirm，返回 true/false.
confirm() ⽅法⽤于显示⼀个带有指定消息和 OK 及取消按钮的对话框。
打开、关闭窗口
window.open()⽅法既可以导航到⼀个特定的URL也可以⽤来打开⼀个新的窗⼝
window.open();//空白窗口 window.open('http://www.baidu.com','_self');//进入url
window.close()：关闭窗⼝
window.close();
时间函数
setTimeout()
setTimeout() : 在指定的毫秒数后调⽤函数或计算表达式
clearTimeout(id)： 清除指定函数的执⾏
var id = setTimeout(function,times);
clearTimeout(id);
setInteval()
setInterval()：可按照指定的周期（以毫秒计）来调⽤函数或计算表达式，也可根据返回的标识⽤来结束
clearInterval() ：关闭函数的执行
var id = setInterval(function,times);
clearInterval(id);
2 history对象
历史对象，包含用户在浏览器访问过的URL
history 对象是 window 对象的⼀部分，可通过 window.history 属性对其进⾏访问
属性
length：返回浏览器历史列表中的 URL 数量。
方法
back()：加载 history 列表中的前⼀个 URL，后退
forward()：加载历史列表中的下⼀个 URL，前进
go(number|URL): URL 参数使⽤的是要访问的 URL
number= -1 ----> 后退
number= 0 ----> 刷新
number= 1 ----> 前进
3 location对象
location 对象是window对象之⼀，提供了与当前窗⼝中加载的⽂档有关的信息，还提供了⼀些导航功
能，也可通过 window.location 属性来访问
属性
href：设置或返回完整的 URL
方法
reload()：重新加载当前⽂档
replace()：⽤新的⽂档替换当前⽂档
3 DOM
DOM：Document Object Model 文档对象模型
dom 提供了⽤程序动态控制 html 接⼝
DOM即⽂档对象模型描绘了⼀个层次化的节点树，运⾏开发⼈员添加、移除和修改⻚⾯的某⼀部分。dom 处于javascript 的核⼼地位上
每个载⼊浏览器的 HTML ⽂档都会成为 Document 对象
Document 对象使我们可以从脚本中对 HTML⻚⾯中的所有元素进⾏访问
Document 对象是 Window 对象的⼀部分，可通过 window.document 属性对其进⾏访问
节点
加载 HTML ⻚⾯时，Web 浏览器⽣成⼀个树型结构，⽤来表示⻚⾯内部结构
DOM 将这种树型结构理解为由节点组成，组成⼀个节点树。
对于⻚⾯中的元素，可以解析成以下⼏种类型的节点：
| 节点类型 | HTML内容 | 例如 |
|---|---|---|
| 文档节点 | 文档本身 | 整个⽂档 document |
| 元素节点 | 所有的HTML元素 | 、、 |
| 属性节点 | HTML元素内的属性 | id、class、name、href… |
| 文本节点 | 元素内的文本 | 文本、hello… |
| 注释节点 | HTML注释 |
操作元素的节点
当HTML⽂档在被解析为⼀颗DOM树以后，⾥⾯的每⼀个节点都可以看做是⼀个⼀个的对象，我们称为DOM对象
1 获取节点
在进⾏增、删、改的操作时，都需要指定到⼀个位置，或者找到⼀个⽬标，此时我们就可以通过Document对象提供的⽅法，查找、定位某个对象
操作 dom 必须等节点初始化完毕后，才能执⾏
处理⽅式两种:
1）把 script 调⽤标签移到html末尾即可
2）使⽤onload事件来处理JS，等待html 加载完毕再加载 onload 事件⾥的 JS
window.onload = function () { //预加载 html 后执⾏ };
4种获取方式如下：
| 方法 | 描述 |
|---|---|
| getElementByID() | 根据id获取DOM对象 |
| getElementByTagName() | 根据标签名获取DOM对象数组 |
| getElementByClassName() | 根据class类名获取DOM对象数组 |
| getElementByName() | 根据name属性获取DOM对象数组 |
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素的属性title>
<script type="text/javascript">
//根据id属性
function testById(){
console.log(document.getElementById("p1").innerText);
console.log(document.getElementById("p1").innerHTML);
//innerText：输出内部文本
//innerHTML：输出内部文本包括标签
}
//根据name属性
function testByName(){
var obj = document.getElementsByName("hobby");
for (var i = 0; i < obj.length; i++) {
console.log(obj[i].value);
}
}
//根据标签名
function testByTagName(){
var obj = document.getElementsByTagName("p");
for (var i = 0; i < obj.length; i++) {
console.log(obj[i].innerHTML);
console.log(obj[i].innerText);
}
}
//根据class属性
function testByClass(){
var obj = document.getElementsByClassName("para");
for (var i = 0; i < obj.length; i++) {
console.log(obj[i].innerHTML);
console.log(obj[i].innerText);
}
}
script>
head>
<body>
<body>
<p id="p1" class="para">这是一个段落<span>文本span>p>
<p id="p2" class="para">这是一个段落p>
<input type="text" name="txt" />
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<hr />
<a href="javascript:void(0)" onclick="testById()">按照id获取a>
<a href="javascript:void(0)" onclick="testByName()">按照name获取a>
<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取a>
<a href="javascript:void(0)" onclick="testByClass();">按照class获取a>
body>
body>
html>
注意：
href=“javascript:void(0)”：伪协议，表示不执⾏跳转，⽽执⾏指定的点击事件
2 创建节点
| 方法 | 描述 |
|---|---|
| createElement() | 创建⼀个新的节点，需要传⼊节点的标签名称，返回创建的元素对象 |
| createTextNode() | 创建⼀个⽂本节点，可以传⼊⽂本内容 |
| innerHTML | 创建直接添加到指定位置节点 |
3 插入节点
| 方法 | 描述 |
|---|---|
| write() | 将任意的字符串插⼊到⽂档中 |
| appendChild() | 向元素中添加新的⼦节点，作为最后⼀个子节点 |
| insertBefore() | 向指定的已有的节点之前插⼊新的节点newItem：要插⼊的节点exsitingItem：参考节点， 需要参考⽗节点 |
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建、更改节点title>
<script type="text/javascript">
function addPara(){
var div = document.getElementById("container");
var p = document.createElement("p");
var txt = document.createTextNode("我是一个段落标签——p标签");
div.appendChild(p);
p.appendChild(txt);
}
function addImg(){
var div = document.getElementById("container");
var img = document.createElement("img");
img.src="img/01.jpg";
div.appendChild(img);
}
function addTxt(){
var div = document.getElementById("container");
var input = document.createElement("input");
input.style.value="lisi";
div.appendChild(input);
}
function addOptions(){
var m = document.getElementsByName("music")[0];
var option = document.createElement("option");
option.value="2";
var txt = document.createTextNode("不再见");
option.appendChild(txt);
m.appendChild(option);
}
script>
head>
<body>
<body>
<button onclick="addPara();">添加段落button>
<button onclick="addImg();">添加图片button>
<button onclick="addTxt();">添加文本框button>
<button onclick="addOptions();">添加选项button>
<select name="music">
<option value="-1">你心内的一首歌option>
<option value="0">南山南option>
<option value="1">喜欢你option>
select>
<hr />
<div id="container">div>
body>
body>
html>
4 查找节点
| 方法|属性 | 描述 |
|---|---|
| childNodes | 返回元素的⼀个⼦节点的数组 |
| firstChild | 返回元素的第⼀个⼦节点 |
| lastChild | 返回元素的最后⼀个⼦节点 |
| nextSibling | 返回元素的下⼀个兄弟节点 |
| parentNode | 返回元素的⽗节点 |
| previousSibling | 返回元素的上⼀个兄弟节点 |
5 删除节点
| 方法 | 描述 |
|---|---|
| removeChild() | 从元素中移除子节点 |
4 表单
表单是我们⻚⾯向后台传输数据的⼀种⾮常常⻅的⽅式，在进⾏数据发送（请求发出）之前，我们应该现在⻚⾯进⾏⼀系列数据合法性的验证，节省不必要的错误数据的传输，以及提⾼⽤户的体验度
1 获取表单
4种常用方式
1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; 从 0 开始
2 获取表单元素
4种方式，前两种常用
1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称; name属性值
3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] // 从0开始
获取单选按钮
前提：将⼀组单选按钮设置相同的name属性值
(1)获取单选按钮组：
(2)遍历每个单选按钮，并查看单选按钮元素的checked属性
若属性值为true表示被选中，否则未被选中
选中状态设定： checked=‘checked’ 或 checked=‘true’ 或 checked
未选中状态设定： 没有checked属性 或 checked='false
获取多选按钮
操作⽅式与单选同理，不同之处在于可以多选
获取下拉选项
1、获取select对象
var ufrom = document.getElementById("ufrom");
2、获取选中项的索引
var idx = ufrom.selectedIndex;
3、获取选中项options的value值
var val = ufrom.options[idx].value;
注意：当通过options获取选中项的value属性值时，
若没有value属性，则取option标签的内容
若存在value属性，则取value属性的值
4、获取选中项options的text
var txt = ufrom.options[idx].text;
选中状态设定：selected=‘selected’、selected=true、selected
未选中状态设定：不设selected属性
3 提交表单
（1）使⽤普通button按钮+onclick事件+事件中编写代码:
获取表单.submit();
（2）使⽤submit按钮 + οnclick=“return 函数()” +函数编写代码:
最后必须返回：return true|false;
（3）使⽤submit按钮/图⽚提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:
最后必须返回：return true|false;
4 表单验证
用户注册实例
html页面：from_check.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册title>
<script src="js/from_check.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<form action="#" method="get" id="myForm">
<title>用户注册title>
用户名：<input type="text" name="uname" id="uname" /><br />
密码：<input type="password" name="pwd" id="pwd" /><br />
确认密码：<input type="password" name="cpwd" id="cpwd" /><br />
性别：<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女<br />
爱好：<input type="checkbox" name="hobby" value="学习" />学习
<input type="checkbox" name="hobby" value="运动" />运动
<input type="checkbox" name="hobby" value="电影" />电影
<input type="checkbox" name="hobby" value="游戏" />游戏<br />
来自：<select name="loc" id="loc">
<option value="0">--请选择--option>
<option value="bj">北京option>
<option value="sh">上海option>
<option value="gd">广东option>
<option value="sz">深圳option>
select><br />
<input type="submit" id="sub" onclick="return checkForm();" value="提交"/>
<input type="reset" id="rst" onclick="resetForm();" value="重置"/>
<div id="info" style="color: red;">div>
form>
body>
html>
js文件：from_check.js
// 校验表单
function checkForm() {
var flag = false;
var str = "";
//校验用户名————用户不能为空且长度为2到10个字符
var uname = document.getElementById("uname");
if (uname.value == null || uname.value.length == 0) {
str += "用户名不能为空哦！
";
flag = false;
} else if (uname.value.length < 2 || uname.value.length > 10) {
str += "用户名长度要在2到10之间哦！
";
flag = false;
} else {
flag = true;
}
//校验密码————密码只能为数字和字母且长度在4到12个字符
var pwd = document.getElementById("pwd");
if (pwd.value == null || pwd.value.length == 0) {
str += "密码不能为空哦！
";
flag = false;
} else if (pwd.value.length < 2 || pwd.value.length > 12) {
str += "密码长度要在4到12之间哦！
";
flag = false;
} else {
flag = true;
}
//校验确认密码————必须和密码一致
var cpwd = document.getElementById("cpwd");
if (cpwd.value == null || cpwd.value.length == 0) {
str += "确认密码不能为空哦！
";
flag = false;
} else if (cpwd.value != pwd.value) {
str += "两次输入的密码不一样哦！
";
flag = false;
} else {
flag = true;
}
//打印性别
var sex = document.getElementsByName("sex");
var sextxt = "";
for (var i = 0; i < sex.length; i++) {
//将选中的值放入sextxt中
if (sex[i].checked) {
sextxt = sex[i].value;
}
}
//校验爱好————至少选一个
var hobby = document.getElementsByName("hobby");
var num = 0;
var hbtxt = "";
//循环遍历选中的复选框个数
for (var i = 0; i < hobby.length; i++) {
if (hobby[i].checked) {
num++;
//将选中的复选框的值放入hbs中
hbtxt += hobby[i].value + "、";
}
}
//去除爱好后的 、
hbtxt = hbtxt.substr(0, hbtxt.length - 1);
//判断个数
if (num == 0) {
str += "你的人生真无趣呀！
";
flag = false;
} else {
flag = true;
}
//校验来自哪里————必选一个
var loc = document.getElementById("loc");
//获取选中项的索引
var idx = loc.selectedIndex;
//获取选中的options里的valeu值
var val = loc.options[idx].value;
//获取选中项的文本
var loctxt = loc.options[idx].text;
//判断value是否有值
if (val == 0) {
str += "你难道是来自火星的？
";
flag = false;
} else {
flag = true;
}
document.getElementById("info").innerHTML = str;
//打印弹出信息
if (flag) {
var str = "";
str += "您的姓名是：" + uname.value + "\n";
str += "您的密码是：" + pwd.value + "\n";
str += "您的性别是：" + sextxt + "\n";
str += "您的爱好是：" + hbtxt + "\n";
str += "您是来自于：" + loctxt + "\n";
alert(str);
// 设置表单提交的地址
myForm.action = "http://www.baidu.com";
// 提交表单
myForm.submit();
return false;
} else {
return false;
}
}
//重置info
function resetForm() {
var info = document.getElementById("info");
info.innerHTML = "";
}