1、BOM对象
BOM：browser object model 浏览器对象模型
BOM对象包括window对象、screen对象、history对象、location对象、navigator对象。
1.1 window对象
所有的浏览器都支持window对象。它表示的浏览器窗口
window对象是js中的顶层对象，所有的js函数，变量等都是window对象成员
甚至Dom的document也是window对象的属性之一
1.1.1 三种弹出框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三种弹出框</title>
</head>
<body>
<script>
// 警告框
alert("Hello");
// 确认框
var bl = confirm("你确定要删除吗？");
console.log(bl);
// 输入框--接受的内容类型为String
var str = prompt("请输入内容");
console.log(str);
console.log(typeof(str));
</script>
</body>
</html>
1.1.2 定时器
| clearInterval() | 取消由setInterval()设置的timeout |
| clearTimeout() | 取消setTimeout()设置的timeout |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
案例：让时间走动，进行开始或者停止控制
<script>
//设置一个时间周期,参数1：表示是一个调用的方法，参数2：表示的时间周期
var interval_id = window.setInterval("_setTime()",1000);
//页面一刷新，用户就可以看到时间，但是这个是静态的
window.onload = function(){
//获取id
var _time = document.getElementById("_time");
//获取当前时间
var date = new Date();
//把时间写入到span标签中
_time.innerHTML = date.toLocaleString();
}
function _setTime(){
//获取id
var _time = document.getElementById("_time");
//获取当前时间
var date = new Date();
//把时间写入到span标签中
_time.innerHTML = date.toLocaleString();
}
//停止时间
function _stopTime(){
window.clearInterval(interval_id);//获取设置时间周期的id
}
//开始时间
function _stratTime(){
interval_id = window.setInterval("_setTime()",1000);
}
</script>
</head>
<body>
<span style="color: red;" id="_time"></span>
<input type="button" value="停止时间" onclick="_stopTime()"/>
<input type="button" value="开始时间" onclick="_stratTime()"/>
</body>倒记时案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- html中有一个meta标签，可以实现页面刷新，可以看作是倒记时 -->
<meta http-equiv="refresh" content="10;url=https://www.baidu.com">
<title></title>
<!-- 通过js配合meta标签，把这个倒记时的时间，显示给用户，效果是时间递减 -->
<script>
var time = 10;
window.onload = function(){
window.setInterval("setTime()",1000);
}
function setTime(){
document.getElementById("spanid").innerHTML = time;
time--;
}
</script>
</head>
<body>
<center>
<span style="font-size: 78px; color:orange; text-align: center;" id="spanid"></span>
秒后跳转到<a href="https://www.baidu.com"> 百度</a>
</center>
<div align="center">
<img src="img/404.jpg" />
</div>
</body>
</html>1.1.3 关闭，打开浏览器
| close() | 关闭浏览器 |
| open() | 打开浏览器 |
1.2 history对象
history对象包含用户访问过的url, 注意： 一定是访问过的历史url
history是window对象的一部份，可以通过window.history属性进行访问
demo04--history对象.html
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>History对象01</title>
<script>
function after(){
history.forward();
}
</script>
</head>
<body>
<a href="demo05--history对象.html">第二页</a>
<button onclick="after()">下一页</button>
</body>
</html>demo05--history对象.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>History对象02</title>
<script>
function before(){
history.back();
}
function after(){
history.forward();
}
// history.go(1) :是返回到上一页
// history.go(-1) :是返回到下一页
// history.go(0) :是刷新页面
</script>
</head>
<body>
<a href="demo06--history对象.html">第三页</a>
<button onclick="before()">上一页</button>
<button onclick="after()">下一页</button>
</body>
</html>demo06--history对象.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>History对象03</title>
<script>
function before(){
history.back();
}
</script>
</head>
<body>
<a href="demo04--history对象.html">第一页</a>
<button onclick="before()">上一页</button>
</body>
</html>1.3 Location对象
Location对象是window对象的一部份，可以通过window.location属性来访问
location表示是当前浏览器的地址对象。浏览器的地址中主要保存的是访问某个网站的url地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象</title>
<script>
function baidu(){
location.assign("http://www.baidu.com");
}
function sina(){
location.replace("http://www.sina.com.cn");
}
</script>
</head>
<body>
<button onclick="baidu()">百度</button>
<button onclick="sina()">新浪</button>
</body>
</html>2、Dom对象
Dom对象: Document Object Model 文档对象模型
W3C组织规定：
当浏览器把一个html文件加载到内存中之后，这个html文件，就是一个Document对象。并且在浏览器加载html文件中的所有标签时，把html文件中的所有标签页加载成不同的标签对象，以及标签中的属性，也加载成属性对象，标签中的文本也加载成文本对象。
浏览器在加载某个标签时，标签的文本数据，被加载成当前标签的一个子标签。当我们把一个html文件加载完成之后，他们就得到这个html文件中的所有标签，属性，文本对象。可以使用js技术结合Document对象，对html文件中的所有标签，进行各种操作。
在浏览器把html文件加载完成之后，标签被称作标签对象（元素节点），标签中的文件称为文本节点（文本对象），标签的属性称为属性节点（属性对象）。
2.1 document对象
Document对象代表整个html文档，可用来访问页面中的所有元素，快速获取html中的页面的标签对象
| document.getElementById() | 返回指定id对象的引用 |
| document.getElementsByName() | 返回指定带有名称的对象集合 |
| document.getElementsTagName() | 返回指定带有标签名的对象集合 |
| document.getElementsByClassName() | 根据Class属性值获取元素对象们。返回值是一个数组 |
| document.querySelector(id选择器) | 根据id选择器，获取元素 |
| document.querySelectorAll(css选择器) | 根据css选择器获取元素，返回是一个数组 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document对象</title>
<script>
window.onload = function(){
// getElementById();
console.log(document.getElementById("nav").innerText);
// querySelector()
console.log(document.querySelector("#nav").innerText);
// getElementsByTagNam()
var aArray = document.getElementsByTagName("a");
console.log(aArray)
for (var s of aArray) {
console.log(s.innerText)
}
// getElementsByName()
var hobbies = document.getElementsByName("hobby");
console.log(hobbies)
for (var s of hobbies) {
console.log(s.value)
}
// getElementsByClassName()
var cls1 = document.getElementsByClassName("d1");
console.log(cls1)
for (var s of cls1) {
console.log(s.innerText)
}
// querySelectorAll(".hd1") css选择器
var cls2 = document.querySelectorAll(".d1");
console.log(cls2)
for (var s of cls2) {
console.log(s.innerText)
}
}
</script>
</head>
<body>
<div id="nav" class="d1">
111
</div>
<a href="#" class="d1">链接1</a>
<a href="#">链接2</a>
<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="rap">rap
</body>
</html>
2.2 操作内容
| 属性名 | 描述 |
| element.innerText | 获取或者修改元素的纯文本内容 |
| element.innerHTML | 获取或者修改元素的html内容 |
| element.outerHTML | 获取或者修改包含自身的html内容 |
1. innerText 获取的是纯文本 innerHTML获取的是所有html内容
2. innerText 设置到页面中的是纯文本 innerHTML设置到页面中的html会展示出外观效果
3. innerHTML不包含自身 outerHTML包含自身的html内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
#myDiv {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="myDiv">
<h4>注释</h4>
程序猿最讨厌自己写注释，
同时也最讨厌别人不写注释
</div>
<script>
//获取id
let myDiv = document.getElementById('myDiv');
//innerHTML 获取标签中所有内容，包括标签；从对象的起始位置到终止位置的全部内容
console.info(myDiv.innerHTML);
console.info(myDiv.innerHTML="拉出去");
console.info(myDiv.innerHTML+="拉出去");
// innerText 获取标签中纯文本内容，不包括标签；
console.info(myDiv.innerText);
console.info(myDiv.innerText="拉出去");
console.info(myDiv.innerText+="拉出去");
// outerHTML 获取标签本身，修改标签本身 ，添加标签本身的后面
console.info(myDiv.outerHTML);
console.info(myDiv.outerHTML="<h1>别人从不写注释，不写文档... </h1>");
console.info(myDiv.outerHTML +="<h1>别人从不写注释，不写文档... </h1>");
</script>
</body>
</html>2.3 操作节点
| createElement(标签名称) | 创建标签 |
| appendChild | 为某一个标签，去添加子标签 |
| removeChild | 为某一个标签，删除孩子标签 |
| setAttribute | 为某一个标签添属性 |
| removeAttribute | 删除某一个标签中的属性 |
2.3.1 appendChild添加子标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加子标签--appendChild</title>
</head>
<body>
<ul id="uls">
<li>jack</li>
<li>rose</li>
</ul>
<input type="button" onclick="addElement()" value="添加子标签" />
<script>
function addElement(){
// 创建标签
var lis = document.createElement("li");//<li></li>
// 给标签中添加内容
lis.innerText = "tom";
//添加到父标签中
document.getElementById("uls").appendChild(lis);
}
</script>
</body>
</html>
2.3.2 removeChild删除子标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除子标签--removeChild</title>
</head>
<body>
<ul id="uls">
<li>jack</li>
<li id="x1">rose</li>
<li>tom</li>
<li>mary</li>
</ul>
<input type="button" onclick="deleteOne()" value="删除子标签" />
<input type="button" onclick="deleteAll()" value="删除全部标签" />
<input type="button" onclick="deleteOneByOne()" value="依次删除子标签" />
<script>
// 删除指定子标签
function deleteOne(){
// 找到要删除的指定子标签
var li = document.getElementById("x1");
// 删除子标签
li.parentNode.removeChild(li);
}
// 删除全部子标签
function deleteAll(){
// 获取父元素标签
var uls = document.getElementById("uls");
// 根据父元素获取所有的子元素标签
var childs = uls.childNodes;
//删除全部，必从后往前遍历，否则无法删除全部
for(var i = childs.length - 1; i >= 0; i--){
uls.removeChild(childs[i]);
}
}
// 依次删除子标签
function deleteOneByOne(){
// 获取全部的li元素标签
var lis = document.getElementsByTagName("li");
// 获取第一个li元素标签
var li = lis[0];
// 删除第一个元素标签
li.parentNode.removeChild(li);
}
</script>
</body>
</html>
2.3.3 setAttribute添加属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加属性--setAttribute</title>
</head>
<body>
<input type="text" name="username" autocomplete="off">
<input type="text" name="username">
<input type="text" name="username">
<input type="text" name="username">
<input type="text" name="username">
<script>
window.onload = function(){
//给所有input添加 autocomplete="off"
var tagName = document.getElementsByTagName("input");
for (var i = 0; i < tagName.length; i++) {
tagName[i].setAttribute("autocomplete","off");
}
}
</script>
</body>
</html>
2.3.4 removeAttribute删除属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除属性--removeAttribute</title>
</head>
<body>
<input type="text" name="username" autocomplete="off">
<input type="text" name="username">
<input type="text" name="username">
<input type="text" name="username">
<input type="text" name="username">
<script>
window.onload = function(){
//给所有input添加 autocomplete="off"
var tagName = document.getElementsByTagName("input");
//遍历
for (var i = 0; i < tagName.length; i++) {
//移除input框中所有name属性
tagName[i].removeAttribute("name");
}
}
</script>
</body>
</html>
2.4 操作样式
设置一个css样式
js对象.style.样式名='样式值'
批量设置css样式-了解
js对象.style.cssText='属性名：属性值;...'
通过class设置样式【重点】
js对象.className='样式名称1; 样式名称2;...'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作样式</title>
<style>
.mpp {
background-color: orange;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<script>
// 1. 设置一个css样式
// 设置字体大小
p1.style.fontSize = "20px";
// 设置背景颜色
p1.style.backgroundColor = "green";
// 设置字体颜色
p1.style.color = "red";
// 2. 批量设置css样式
// 缺点：写起来太痛苦，而且还有耦合性
p2.style.cssText = "border:2px solid red; font-size:40px";
// 3. 通过class设置样式
p3.className = "mpp";
</script>
</body>
</html>
案例
案例1 表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url(./img/bg-01.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.nav{
height: 300px;
width: 500px;
/* background-color: white; */
font-size: 20px;
color: white;
margin: 200px auto;
padding-top: 10px;
}
.nav .btn{
height: 40px;
width: 100px;
font-size: 16px;
text-align: center;
line-height: 40px;
border-radius: 15px;
margin: 10px 220px;
}
table tr{
height: 40px;
line-height: 40px;
}
.in{
height: 30px;
width: 280px;
text-indent: 5px;
font-size: 15px;
}
</style>
</head>
<body>
<div class="nav">
<form action="#" onsubmit="return isSubmit()">
<table width="500px">
<tr>
<td width="200px" align="right">用户名：</td>
<td>
<input type="text" class="in" placeholder="用户名是以字母开头的3-8位的任意字符" onchange="getUsername(this)" name="username"/>
<span id="userMess"></span>
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" class="in" placeholder="密码由8-16位的字母或数字组成" onchange="getPassword(this)" name="password"/>
<span id="pwdMess"></span>
</td>
</tr>
<tr>
<td align="right">手机号：</td>
<td>
<input type="tel" class="in" placeholder="请输入手机号" onchange="getPhone(this)" name="phone"/>
<span id="telMess"></span>
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="sex" value="1" checked id="man"/><label for="man">男</label>
<input type="radio" name="sex" value="0" id="woman"/><label for="woman">女</label>
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td>
<input type="checkbox" name="hobby" id="music" checked value="music"/><label for="music">听音乐</label>
<input type="checkbox" name="hobby" id="noval" value="noval"/><label for="noval">看小说</label>
<input type="checkbox" name="hobby" id="player" value="player"/><label for="player">追剧</label>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" class="btn" id="btn"/>
</td>
</tr>
</table>
</form>
</div>
<script>
let flag1 = false;
let flag2 = false;
let flag3 = false;
function getUsername(e){
console.log(e.value)
let username = e.value;
// 用户名是以字母开头的3-8位的任意字符
var reg = /^[a-zA-Z].{2,7}$/;
// if(!reg.test(username)){
// alert("用户名是以字母开头的3-8位的任意字符");
// // 用户输错时,清除输入框
// e.value = "";
// }
// var flag = false;
if(reg.test(username)){
document.getElementById("userMess").innerHTML = "<font color = 'green'>✔</font>";
flag1 = true;
} else {
document.getElementById("userMess").innerHTML = "<font color = 'red'>✘</font>";
flag1 = false;
}
}
function getPassword(e){
console.log(e.value);
let password = e.value;
// 密码由8-16位的字母或数字组成
var reg = /^[a-zA-Z0-9]{8,16}$/;
// if(!reg.test(password)){
// alert("密码由8-16位的字母或数字组成");
// e.value = "";
// }
// var flag = false;
if(reg.test(password)){
document.getElementById("pwdMess").innerHTML = "<font color = 'green'>✔</font>";
flag2 = true;
} else {
document.getElementById("pwdMess").innerHTML = "<font color = 'red'>✘</font>";
flag2 = false;
}
}
function getPhone(e){
console.log(e.value);
let phone = e.value;
// 手机号由11为纯数字且首字母为1且第二位不为0
var reg = /^[1][1-9][0-9]{9}$/;
// if(!reg.test(phone)){
// alert("你输入的手机号不正确，请重新输入");
// e.value = "";
// }
// var flag = false;
if(reg.test(phone)){
document.getElementById("telMess").innerHTML = "<font color = 'green'>✔</font>";
flag3 = true;
} else {
document.getElementById("telMess").innerHTML = "<font color = 'red'>✘</font>";
flag3 = false;
}
}
function isSubmit(){
if (flag1 && flag2 && flag3){
return true;
}else{
return false;
}
}
</script>
</body>
</html>案例2：全选全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选全不选</title>
</head>
<body>
<input type="checkbox" id="input" onclick="checkAll()" />全选/全不选<br />
<input type="checkbox" name="hobby" value="足球" />足球<br />
<input type="checkbox" name="hobby" value="篮球" />篮球<br />
<input type="checkbox" name="hobby" value="游泳" />游泳<br />
<input type="checkbox" name="hobby" value="唱歌" />唱歌<br />
<br />
<input type="button" name="checkall" id="checkall" value="全选"/>
<input type="button" name="checkall" id="checkallNo" value="全不选" onclick="checkAllNo()"/>
<input type="button" name="checkall" id="checkReverse" value="反选" onclick="checkReverse()"/>
<script>
// 全选
window.onload = function(){
// 页面加载完毕,获取全选按钮
var checkall = document.getElementById("checkall");
checkall.onclick = function(){
// 根据name属性获取所有的复选框
var hobbies = document.getElementsByName("hobby");
// 遍历数组
for (var i = 0; i < hobbies.length; i++) {
// 为每个复选框的checked属性设置true,表示选中状态
hobbies[i].checked = true;
}
}
}
// 全不选
function checkAllNo(){
// 根据name属性获取所有的复选框
var hobbies = document.getElementsByName("hobby");
// 遍历数组
for (var i = 0; i < hobbies.length; i++) {
// 为每个复选框的checked属性设置true,表示选中状态
hobbies[i].checked = false;
}
}
// 反选
function checkReverse(){
// 根据name属性获取所有的复选框
var hobbies = document.getElementsByName("hobby");
// 遍历数组
for (var i = 0; i < hobbies.length; i++) {
// 如果为hobbies[i]true修改为false，如果为false修改为true
/* if(hobbies[i].checked == true){
hobbies[i].checked = false
}else{
hobbies[i].checked = true
} */
hobbies[i].checked = !hobbies[i].checked
}
}
// 全选/全不选
function checkAll(){
var btn = document.getElementById("input");
// 根据name属性获取所有的复选框
var hobbies = document.getElementsByName("hobby");
// 遍历数组
for (var i = 0; i < hobbies.length; i++) {
// 如果为hobbies[i]true修改为false，如果为false修改为true
/* if(btn.checked == true){
hobbies[i].checked = true
}else{
hobbies[i].checked = false
} */
hobbies[i].checked = btn.checked
}
}
</script>
</body>
</html>
