JavaScript提高，BOM编程，DOM编程
程序员文章站
2022-05-08 08:44:14
...
第1章 BOM编程
1.1 BOM编程概述
1.1.1 BOM编程的概念
BOM：Browser Object Model 浏览器对象模型
1.1.2 BOM编程的作用
用于操作浏览器中的各种对象，不同浏览器定义上是有差别的，实现方式也会有不同。以下是Chrome浏览器各个BOM对象。
1.1.3 BOM常用的对
BOM常用对象 作用
window 浏览器窗体对象
location 浏览器地址栏对象
history 历史记录对象
1.2 window对象
BOM的核心对象是window，它表示浏览器的一个实例。
注:只要是window的方法和属性，window对象名都可以省略
1.2.1 与对话框有关的方法
window中与对话框有关的方法 作用
alert(“提示信息”) 弹出一个确认按钮的信息框
string prompt(“提示信息”,"默认值”) 弹出一个输入信息框，返回字符串类型
boolean confirm("提示信息") 弹出一个信息框，有确定和取消按钮。
如果点确定，返回true，点取消返回false
1.2.2 与计时有关的方法
indow中与计时有关的方法 作用
setTimeout(函数名, 间隔毫秒数) 在指定的时间后调用1次函数，只执行1
次，单位是毫秒。
返回值：返回一个整数类型的计时器
函数调用有两种写法：
1) setTimeout("函数名(参数)",
1000);
2) setTimeout(函数名,1000, 参
数);
注意方式二：没有引号，没有括号。
setInterval(函数名, 间隔毫秒数)
每过指定的时间调用1次函数，不停的调
用函数，单位是毫秒。
返回值：返回一个整数类型的计时器。
clearInterval(计时器) 清除setInterval()方法创建的计时器
clearTimeout(计时器) 清除setTimeout创建的计时器
1.2.3 修改元素内容的几个方法和属性
方法：document.getElementById("id") 通过id得到一个元素，如果有同名的元素则得到第1个
属性：innerHTML
获得：元素内部的HTML
设置：修改元素内部的HTML
属性：innerText
获得：元素内部的文本
设置：修改元素内部的纯文本，其中的html标签不起作用
1.2.4 案例：会动的时钟
案例需求：
页面上有两个按钮，一个开始按钮，一个暂停按钮。点开始按钮时间开始走动，点暂停按钮，时间不动。再点开始按钮，时间继续走动。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF‐8">
<title>会动的时钟</title>
<style type="text/css">
#clock {
color: green;
font‐size: 30px;
}
</style>
</head>
<body>
<script type="text/javascript">
var timer;
//开始调用
function start () {
//先清除上一个计时器，再开启一个计时器
window.clearInterval(timer);
//1000毫秒调用begin()
timer = window.setInterval("begin()", 1000);
}
//思路：每过1秒钟调用1次时间，并且将时间显示在某个元素内部
function begin () {
//得到现在的时间
var time = new Date();
//得到h1元素
var clock = document.getElementById("clock");
//将时间显示在h1中
clock.innerHTML = time.toLocaleString();
}
//暂停
function pause () {
//清除计时器
window.clearInterval(timer);
}
</script>
<h1 id="clock">我是时间</h1>
<input type="button" value="开始" onclick="start()" />
<input type="button" value="暂停" onclick="pause()" />
</body>
</html>
1.3 location对象
1.3.1 location是什么
代表浏览器的地址栏对象
1.3.2 location常用的属性
href属性 作用
获取href属性 获得当前地址栏访问的地址
设置href属性 用于页面的跳转，跳转到一个新的页面
1.3.3 location常用的方法
location的方法 描述
reload() 重新加载当前的页面，相当于浏览器上的刷新按钮
1.3.4 代码的演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF‐8">
<title>location对象</title>
</head>
<body>
<input type="button" value="跳转到传智" onclick="jump()" />
<script type="text/javascript">
//获得属性
//document.write("获得href属性：" + location.href + "<br/>");
//设置属性
function jump () {
location.href = "http://www.itcast.cn";
}
</script>
</body>
</html>
1.4 history对象
1.4.1 作用
访问浏览器之前已经访问过的页面
1.4.2 方法
方法 作用
forward() 类似于浏览器上前进按钮
back() 类似于浏览器上后退按钮
go() 正数或负数，go(1)相当于forward()，go(-1)相当于bac()
第2章 DOM编程
2.1 DOM编程概述
2.1.1 DOM编程的基本概念
Document Object Model 文档对象模型，用于操作网页中元素
2.1.2 DOM编程的作用
个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树，我们通过编写JS代码就可以访问这棵树上任何一个节点，并且对节点进行操作。通过 DOM模型，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。新创建的元素对象，要挂到DOM树上才可以在网页上显示出来。
2.2 查找节点
2.2.1 查找节点的方法
document.getElementById 通过id获得一个元素
document.getElementsByName 通过标签的name属性获得一组元素
document.getElementsByClassName 通过标签的class属性获得一组元素
document.getElementsByTagName 通过标签的名称获得一组元素
2.2.2 查找节点的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF‐8">
<title>根据标签的属性找元素</title>
<script type="text/javascript">
window.onload = function () {
//根据标签名找元素
var b2 = document.getElementById("b2");
b2.onclick = function () {
//返回的是一个数组对象
var aNodes = document.getElementsByTagName("a");
for (var index = 0; index < aNodes.length; index++) {
aNodes[index].href = "http://www.itcast.cn";
}
}
//根据name的属性值找
var b3 = document.getElementById("b3");
b3.onclick = function () {
//根据name的属性值找元素，返回一个数组对象
var divs = document.getElementsByName("one");
for (var index = 0; index < divs.length; index++) {
divs[index].innerHTML = "<a href='#'>黑马程序员</a>";
}
}
var b4 = document.getElementById("b4");
b4.onclick = function () {
//根据class的属性值找元素，返回一个数组对象
var divs = document.getElementsByClassName("two")
for (var index = 0; index < divs.length; index++) {
divs[index].innerHTML = "<a href='#'>JavaEE开发</a>";
}
}
}
</script>
</head>
<body>
<input type="button" value="(通过标签名)给a链接添加地址" id="b2"/>
<input type="button" value="(通过name属性)给div设值" id="b3"/>
<input type="button" value="(通过类名)给div设值" id="b4"/>
<hr/>
<a>传智播客</a><br/>
<a>传智播客</a><br/>
<a>传智播客</a><br/>
<hr/>
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<hr/>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</body>
</html>
2.2.3 案例：实现全选/全不选，商品结算的功能
案例需求：
页面上有5件商品，前面都有复选框，名字叫item，value是商品的价格。下面有一个"全选/全不选"的复选框，id是"all"，点它实现全选或全不选的功能，还有个反选的按钮，点它实现反选的功能。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF‐8">
<title></title>
<script type="text/javascript">
//全选/全不选
function selectAll () {
//得到下面复选框的状态
var all = document.getElementById("all");
//得到上面所有的复选框
var items = document.getElementsByName("item");
for (var i = 0; i < items.length; i++) {
items[i].checked = all.checked;
}
}
//反选
function reverseSelect () {
//得到上面所有的复选框
var items = document.getElementsByName("item");
for (var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
}
}
</script>
</head>
<body>
<h3>商品价格列表</h3>
<input type="checkbox" name="item" value="1500" /> 山地自行车1500<br />
<input type="checkbox" name="item" value="200" /> 时尚女装200<br />
<input type="checkbox" name="item" value="3000" /> 笔记本电脑3000元<br />
<input type="checkbox" name="item" value="800" /> 情侣手表800<br />
<input type="checkbox" name="item" value="2000" /> 桑塔纳2000<br />
<hr/>
<input type="checkbox" id="all" onclick="selectAll()" />全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>
</body>
</html>
2.2.4 案例：省市级联的操作
案例需求：
有两个下拉列表，左边选择相应的省份，右边出现相应省份的城市列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF‐8">
<title>省市级联</title>
<script type="text/javascript">
//每个省份对应的数组
var citys = new Array(5);
citys[0] = [];
citys[1] = ["哈尔滨","齐齐哈尔","大庆","佳木斯"];
citys[2] = ["长春市","吉林市","四平市","通化市"];
citys[3] = ["沈阳市","锦州市","大连市","铁岭市"];
citys[4] = ["郑州市","洛阳市","安阳市","南阳市"];
function selectCity(pNode) {
//获取到当前省份所选择到的索引值
var index = pNode.selectedIndex;
//根据索引值取出该 省份对应 的城市
var cityData = citys[index]; //一维数组
//清除原来城市下拉选下的所有子元素且初始化
var options = "<option>‐‐请选择市‐‐</option>"
//遍历一维城市数组，每个城市就是一个option。
for (var index = 0; index < cityData.length; index++) {
var cityName = cityData[index];
options += "<option>" + cityName + "</option>";
}
//把这些所有的城市添加到cityselect框下。
var cityNode = document.getElementById("cityId");
cityNode.innerHTML = options;
}
</script>
</head>
<body>
<select id="provinceId" onchange="selectCity(this)">
<option>‐请选择‐</option>
<option>黑龙江</option>
<option>吉林</option>
<option>辽宁</option>
<option>河南</option>
</select>
<select id="cityId">
<option value="">‐‐请选择市‐‐</option>
</select>
</body>
</html>
案例代码-第二种方式(扩展)：
这种方式需要用到html的dom操作方式(参考w3cschool的XML DOM操作),使用到的方法和属性有如下几个:
方法名称 作用
document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
元素对象.appendChild() 向节点的子节点列表末尾添加新的子节点
元素对象.removeChild() 删除子节点
元素对象.hasChildNodes() 返回元素是否拥有子节点
属性名称 作用
元素对象.firstChild 返回元素的首个子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF‐8">
<title>省市级联</title>
<script type="text/javascript">
//每个省份对应的数组
var citys = new Array(5);
citys[0] = [];
citys[1] = ["哈尔滨","齐齐哈尔","大庆","佳木斯"];
citys[2] = ["长春市","吉林市","四平市","通化市"];
citys[3] = ["沈阳市","锦州市","大连市","铁岭市"];
citys[4] = ["郑州市","洛阳市","安阳市","南阳市"];
function selectCity(pNode) {
//获取到当前省份所选择到的索引值
var index = pNode.selectedIndex;
//根据索引值取出该 省份对应 的城市
var cityData = citys[index]; //一维数组
//获取城市下拉选框
var cityNode = document.getElementById("cityId");
//清除原来城市下拉选下的所有子元素.循环删除当前元素下的子元素
while(cityNode.hasChildNodes()){
cityNode.removeChild(cityNode.firstChild);
}
//初始化城市下拉选框
var optionObj = document.createElement("option");
var textObj = document.createTextNode("‐‐请选择市‐‐");
//将文本节点添加到option标签中
optionObj.appendChild(textObj);
//将option节点添加到城市下拉选中
cityNode.appendChild(optionObj);
//遍历一维城市数组，每个城市就是一个option。
for (var index = 0; index < cityData.length; index++) {
var optionObj = document.createElement("option");
var textObj = document.createTextNode(cityData[index]);
//将文本节点添加到option标签中
optionObj.appendChild(textObj);
//将option节点添加到城市下拉选中
cityNode.appendChild(optionObj);
}
}
</script>
</head>
<body>
<select id="provinceId" onchange="selectCity(this)">
<option>‐请选择‐</option>
<option>黑龙江</option>
<option>吉林</option>
<option>辽宁</option>
<option>河南</option>
</select>
<select id="cityId">
<option value="">‐‐请选择市‐‐</option>
</select>
</body>
</html>
2.3. js操作css样式
2.3.1 在JS中操作CSS属性命名上的区别
以前css直接写死在html中，现在可以通过js脚本去动态修改一个标签的样式。
CSS中写法 JS中的写法 说明
color color 一个单词的样式写法是相同
font-size fontSize 驼峰命名法，首字母小写，第二个单词以后首字母大写
2.3.2 方式一：
元素.style.样式名 = "样式值";
2.3.3 方式二：
元素.className = "类名";
2.3.4 JS修改CSS的示例代码
案例需求：
点按钮，修改p标签的字体、颜色、大小
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF‐8">
<title></title>
<style type="text/css">
.two {
color: red;
font‐size: 45px;
font‐family: 隶书;
}
</style>
</head>
<script type="text/javascript">
//方式一：修改多个样式属性
function changeCss () {
//color: blue; font‐size: 30px; font‐family: 楷体;
//得到first这个p
var p1 = document.getElementById("first");
//语法：元素.style.样式名=样式值;
p1.style.color = "blue";
p1.style.fontSize = "30px";
p1.style.fontFamily = "楷体";
}
//方式二：首先创建一个类样式，然后一条语句一次性修改所有的样式
function changeClass () {
var p2 = document.getElementById("second");
//语法：元素.className = "类名";
p2.className = "two";
}
</script>
<body>
<p id="first">
这是第一自然段
</p>
<p id="second">
这是第二自然段
</p>
<input type="button" value="改变几个样式" onclick="changeCss()"/>
<input type="button" value="改变类样式" onclick="changeClass()"/>
</body>
</html>
2.3.5 案例：使用JS修改表格行的背景色
案例需求：
使用JS修改表格行的背景色，产生隔行变色的效果，鼠标移上去的时候这一行变成其它颜色，移出去的时候还原成之前的背景色.
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF‐8">
<title></title>
<style type="text/css">
table {
margin: auto;
border‐collapse: collapse;
}
tr {
text‐align: center;
height: 32px;
}
.redStyle {
background: lightpink;
}
.yellowStyle {
background: lightyellow;
}
.greenStyle {
background: lightgreen;
}
</style>
<script type="text/javascript">
//记录颜色
var color = "";
window.onload = function () {
//获取所有行
var trNodes = document.getElementsByTagName("tr");
//遍历所有的行，如果是偶数，则设置为浅黄色
for (var index = 1; index < trNodes.length; index++) {
if (index % 2 == 0) {
trNodes[index].className = "yellowStyle";
} else {
trNodes[index].className = "redStyle";
}
//鼠标经过的事件
trNodes[index].onmouseover = function () {
//记录没有换颜色之前的颜色
color = this.className;
this.className = "greenStyle";
}
//鼠标移出事件
trNodes[index].onmouseout = function () {
//如果鼠标移出之后，要回到原来的颜色。
this.className = color;
}
}
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr style="background‐color: #ccc;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
第3章 表单检验
一个表单内容填完之后,我们需要对表单中的信息进行校验,校验通过了才能提交表单,要做表单校验需要先学习下js中的一个内置对象:正则对象
3.1 正则对象
3.1.1 创建的方式
方式1：
正则表达式是JS中是一个类：RegExp = Regular Expression 正则表达式
var reg = new RegExp("正则表达式");
方式2：
以/开头，以/结尾，中间的部分就是正则表达式
var reg = /正则表达式/;
两种方式的区别：
1 在js中，正则表达式的两种声明方式对于“\d、\D”之类的匹配模式中，前者需要转义，而后者无需转义
2.前者支持字符串拼接，支持变量，更加灵活；后者对于固定的表达式，书写起来方便快捷、更加直观。
匹配模式：
i 忽略大小写进行比较，两种写法：
var reg = new RegExp("正则表达式", "匹配模式");
var reg = /正则表达式/匹配模式;
注意:在开发中我们一般不会自己去编写正则表达式 , 一般会使用别人已写好的正则表达式 , 在这里只需大家能读得懂基本的正则表达式和会使用正则表达式即可.
3.1.2 常用的方法
JS中正则表达式的方法 说明
boolean test("字符串") 如果正则表达式匹配字符串，返回true，否则返回false
基本使用示例：
//方式一：RegExp
var reg = new RegExp("\\d{3}");
//方式二：/正则表达式/
var reg = /\d{3}/;
//判断是否匹配
var flag = reg.test("123");
//ignore忽略
var reg = new RegExp("cat","i");
var reg = /cat/i;
var flag = reg.test("CAT");
document.write("结果：" + flag);
3.1.3 注意
Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配，只要字符串包含了正则表达式的内容就返回true
正则表达式 匹配字符串 Java中匹配结果 JavaScript中匹配结果
\d{3} a123b false true
^\d{3} 123b false true
\d{3}$ a123 false true
^\d{3}$ 123 true true
3.2 案例：校验表单
案例需求：
用户注册，需要进行如下验证，请在JS中使用正则表达式进行验证。
1.用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
2.密码： 大小写字母和数字6-20个字符
3.确认密码：两次密码要相同
4.电子邮箱: 符合邮箱地址的格式 /^\aaa@qq.com\w+(.[a-zA-Z]{2,3}){1,2}$/
5.手机号：/^1[34578]\d{9}$/
6.生日：生日的年份在1900～2009之间，生日格式为1980-5-12或1988-05-04的形式，/^((19\d{2})|(200\d))-
(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>验证注册页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font‐size: 12px;
line‐height: 20px;
}
.main {
width: 525px;
margin‐left: auto;
margin‐right: auto;
}
.hr_1 {
font‐size: 14px;
font‐weight: bold;
color: #3275c3;
height: 35px;
border‐bottom‐width: 2px;
border‐bottom‐style: solid;
border‐bottom‐color: #3275c3;
vertical‐align: bottom;
padding‐left: 12px;
}
.left {
text‐align: right;
width: 80px;
height: 25px;
padding‐right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font‐weight: bold;
}
div {
color: #F00;
}
</style>
<script type="text/javascript">
//验证表单中所有的项
function checkAll () {
//所有的方法都返回true，这个方法才返回true
return checkUser() && checkMail();
}
//验证用户名
function checkUser () {
//1. 创建正则表达式
var reg = /^[a‐zA‐Z][a‐zA‐Z0‐9]{3,15}$/;
//2. 得到文本框中输入的值
var value = document.getElementById("user").value;
//3. 如果不匹配，在后面的span中显示错误信息，返回false
if (reg.test(value)==false) {
document.getElementById("userInfo").innerHTML = "用户名不正确";
return false;
}
//4. 如果匹配，在后面的span中显示一个打勾图片，返回true
else {
document.getElementById("userInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
return true;
}
}
//验证邮箱
function checkMail () {
//1. 创建正则表达式
var reg = /^\aaa@qq.com\w+(\.[a‐zA‐Z]{2,3}){1,2}$/;
//2. 得到文本框中输入的值
var value = document.getElementById("email").value;
//3. 如果不匹配，在后面的span中显示错误信息，返回false
if (reg.test(value)==false) {
document.getElementById("emailInfo").innerHTML = "邮箱格式不正确";
return false;
}
//4. 如果匹配，在后面的span中显示一个打勾图片，返回true
else {
document.getElementById("emailInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
return true;
}
}
</script>
</head>
<body>
<form action="server" method="post" id="myform" onsubmit="return checkAll()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
</tr>
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!‐‐ 长度为4～16个字符，并且以英文字母开头 ‐‐>
<td class="left">用户名：</td>
<td class="center">
<input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
<span style="color: red" id="userInfo"></span>
</td>
</tr>
<tr>
<!‐‐ 不能为空， 输入长度大于6个字符 ‐‐>
<td class="left">密码：</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" />
</td>
</tr>
<tr>
<!‐‐ 不能为空， 与密码相同 ‐‐>
<td class="left">确认密码：</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in"/>
</td>
</tr>
<tr>
<!‐‐ 不能为空， 邮箱格式要正确 ‐‐>
<td class="left">电子邮箱：</td>
<td class="center">
<input id="email" name="email" type="text" class="in" onblur="checkMail()"/>
<span id="emailInfo" style="color: red;"></span>
</td>
</tr>
<tr>
<!‐‐ 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 ‐‐>
<td class="left">手机号码：</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in"/>
</td>
</tr>
<tr>
<!‐‐ 不能为空， 要正确的日期格式 ‐‐>
<td class="left">生日：</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in"/>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input name="" type="image" src="img/register.jpg" />
</td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
推荐阅读