本文深入探讨JavaScript的DOM操作，包括获取元素、事件绑定、BOM对象的使用，如Window、Location、History等。同时介绍了DOM模型和事件监听机制，提供多个实战案例，如电灯开关、轮播图、表格全选等。
目录
JavaScript基础中提到，JavaScript可分为两部分学习：ECMAScript + JavaScript特有内容(BOM+DOM)。本文将学习后半部分BOM+DOM，在深入探讨前，为了能实现简单的案例，先粗略地学习一下DOM和事件，然后再学习BOM+DOM的细节。
一、初见DOM
功能：通过js控制html文档的内容。
通用步骤：
1.获取页面标签(元素)对象：Element
document.getElementById(“id值”):通过元素的id获取元素对象
2.操作Element对象：
具体的对象和有哪些属性可操作，可以参考：js参考书。
获取到对象之后，一般可以进行两种修改，标签的属性值或标签体：
- 修改属性值
改变该元素的属性：
效果：弹窗之后图片完成了切换——
-
修改标签体内容：
使用innerHTML属性修改标签体内容
效果就是文本会实现替换。
以上就是一些基本但是又很常用的DOM操作。
二、初见事件
功能： 某些组件被执行了某些操作后，触发某些代码的执行。
比如队友触发了送一血，触发了其他队友开喷，这里的送一血就是一个事件。
如何绑定事件：
- 法1：直接在html标签上，指定事件的属性(操作)，属性值就是js代码
最常见的事件：onclick — 单击事件
例如：
<img id="light" src="img/off.gif" onclick="alert('我被点了！');">
点击图片后将触发onclick事件，进而执行alert代码。
优化后可以这么写:
<img id="light" src="img/off.gif" onclick="fun();">
<script>
function fun(){
alert('我被点了');
alert('我又被点了');
}
</script>
- 法2：通过js获取元素对象，指定其事件属性，设置一个函数，当事件发生时调用该函数。相比法1实现了元素和事件在编码上的解耦。
<img id="light2" src="img/off.gif">
<script>
function fun2(){
alert('咋老点我？');
}
//1.获取light2对象
var light2 = document.getElementById("light2");
//2.绑定事件
light2.onclick = fun2;
</script>
案例1：电灯开关
现在页面上有一张电灯图片，我们需要达到这样的效果——通过单击它来控制灯的开关。
分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片，如果灯是开的 on，切换图片为 off，如果灯是关的 off,切换图片为 on，使用标记flag来表示其状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
//1.获取图片对象
var light = document.getElementById("light");
var flag = false;//代表灯是灭的。 off图片
//2.绑定单击事件
light.onclick = function () {
if (flag) {
//判断如果灯是开的，则灭掉
light.src = "img/off.gif";
flag = false;
} else {
//如果灯是灭的，则打开
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
单击->
三、BOM
1、概念
Browser Object Model 浏览器对象模型
2、组成：
Window ：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History ：历史记录对象
Location ：地址栏对象
3、Window 窗口对象
Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。
1. 方法
1） 与弹出框有关的方法：
- alert() 显示带有一段消息和一个确认按钮的警告框。
- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，则方法返回false
var flag = confirm("您确定要退出吗？");
if(flag){
//退出操作
alert("欢迎再次光临！");
}else{
//提示：手别抖...
alert("手别抖...");
}
- prompt() 显示可提示用户输入的对话框。
返回值：获取用户输入的值
2）与打开关闭有关的方法：
-
close() 关闭浏览器窗口。
“谁调用我 ，我关谁” -
open() 打开一个新的浏览器窗口
返回新的Window对象
//打开新窗口
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function(){
//打开新窗口
newWindow = open("https://www.baidu.com");
}
//关闭新窗口
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
// 关闭新窗口
newWindow.close();
}
3） 与定时器有关的方法：
- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
参数：
1. js代码或者方法对象
2. 毫秒值
返回值：唯一标识，用于取消定时器 - clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
// 一次性定时器
//setTimeout("fun();",2000);
var id = setTimeout(fun,2000);
clearTimeout(id);
function fun(){
alert('boom~~');
}
- setInterval() 按照指定的周期（以毫秒计）来循环调用函数或计算表达式。
- clearInterval() 取消由 setInterval() 设置的 timeout。
function fun(){
alert('boom~~');
}
//循环定时器
var id = setInterval(fun,2000);
clearInterval(id);
案例2：轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="img" src="img/banner_1.jpg" width="100%">
<script>
/*
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
*/
//修改图片src属性
var number = 1;
function fun(){
number ++ ;
//判断number是否大于3
if(number > 3){
number = 1;
}
//获取img对象
var img = document.getElementById("img");
img.src = "img/banner_"+number+".jpg";
}
//2.定义定时器
setInterval(fun,3000);
</script>
</body>
</html>
最终页面效果是每隔三秒图片会切换，并且这个过程将循环往复，
2. 属性
- 获取其他BOM对象：
- history
var his = window.history;
- location
- Navigator
- Screen
- 获取DOM对象
document
3、Location 地址栏对象
-
创建(获取)：
- window.location
- location
-
方法：
- reload() 重新加载当前文档。刷新
- 属性
- href 可设置或返回当前完整的 URL，若设置新的URL相当于跳转
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="goWhere" value="去哪儿">
<script>
//reload方法，定义一个按钮，点击按钮，刷新当前页面
//1.获取按钮
var btn = document.getElementById("btn");
//2.绑定单击事件
btn.onclick = function(){
//3.刷新页面
location.reload();
}
//获取href
var href = location.href ;
//alert(href);
//点击按钮，去访问www.itcast.cn官网
//1.获取按钮
var goItcast = document.getElementById("goItcast");
//2.绑定单击事件
goItcast.onclick = function(){
//3.去访问www.baidu.com
location.href = "https://www.baidu.com";
}
</script>
</body>
案例3：自动跳转
实现这样的效果，倒计时后自动跳转到某个页面。
分析：
1.显示页面效果
2.倒计时读秒效果实现
定义一个方法，获取span标签，修改span标签体内容，时间–
定义一个定时器，1秒执行一次该方法
3.在方法中判断时间如果<= 0 ，则跳转到首页
实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转</title>
<style>
p{
text-align: center;
}
span{
color:red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
// 倒计时读秒效果实现
var second = 5;
var time = document.getElementById("time");
//定义一个方法，获取span标签，修改span标签体内容，时间--
function showTime(){
second -- ;
//判断时间如果<= 0 ，则跳转到首页
if(second <= 0){
//跳转到首页
location.href = "https://www.baidu.com";
}
time.innerHTML = second +"";
}
//设置定时器，1秒执行一次该方法
setInterval(showTime,1000);
</script>
</body>
</html>
4、History 历史记录对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。注意：只是单个窗口，而不是整个浏览器的记录。
-
创建(获取)：
- window.history
- history
-
方法：
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go(参数) 加载 history 列表中的某个具体页面。
参数——
正数：前进几个历史记录
负数：后退几个历史记录
- 属性：
- length 返回当前窗口历史列表中的 URL 数量。
四、DOM
Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment:注释对象
- Node：节点对象，以上对象的父对象
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
1、核心DOM模型
Document：文档对象
-
创建(获取)：在html dom模型中可以使用window对象来获取
window.document 或 document -
方法：
-
获取Element对象：
getElementById() ： 根据 id属性值获取元素对象。id属性值一般唯一
getElementsByTagName()：根据元素名称 获取元素对象们。返回值是一个数组
getElementsByClassName():根据 Class属性值获取元素对象们。返回值是一个数组
getElementsByName(): 根据name属性值 获取元素对象们。返回值是一个数组 -
创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
<!DOCTYPE html>
最低0.47元/天 解锁文章
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
