今日内容
ECMAScript
BOM
DOM
BOM 浏览器对象模型
概念: Browser Object Model
组成:
Window:浏览器窗口对象
Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象
Location:地址栏对象
Window:浏览器窗口对象
创建
不用创建,直接使用Window对象中的属性和方法
方法的使用
与弹出框有关的方法
alert():显示带有一段消息和一个确认按钮的警告框。
confirm() :显示带有一段消息以及确认按钮和取消按钮的对话框。 重点关注
如果点击确认,那么该方法返回一个true值
如果点击取消,那么该方法返回一个false值
prompt():显示可提示用户输入的对话框。
如果点击确认,那么该方法返回输入框中输入的值
如果点击取消,那么该方法就不返回输入框输入的值
与打开与关闭浏览器窗口的方法
close() : 关闭浏览器窗口。
open(): 打开一个新的浏览器窗口或查找一个已命名的窗口。
与定时器相关的方法
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
属性的使用
获取其他的BOM对象
history
location
Navigator
Screen
获取DOM对象
document:文档对象
对象的特点
window对象不需要创建,直接使用,window.属性名/方法名 ,前面的window还可以省略不写
可以通过window对象获取其他的BOM对象和DOM对象
Location地址栏对象
Location 对象包含有关当前 URL 的信息。
创建: 通过window对象来获取 window.location,前面的window可以省略不写
属性:
href 设置或返回完整的 URL。
hostname 获取当前url指定的服务器主机名
方法:
-
reload() 重新加载当前文档。 刷新动作
-
replace() 用新的文档替换当前文档。
History历史记录对象
-
创建 : 通过window对象来获取历史记录对象 window.history,前面的window可以省略不写
-
方法:
forward() 加载 history 列表中的下一个 URL。
back() 加载 history 列表中的前一个 URL。
go() 加载 history 列表中的某个具体页面。
-
属性
length 返回浏览器历史列表中的 URL 数量。
DOM对象
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
核心DOM内容
Document---文档对象
Element---元素对象
Attribute----属性对象
Text-----文本对象
Comment---注释对象
Node----节点对象
XML DOM内容 -- 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
Document 文档对象
-
创建
通过window对象获取文档对象 window.document,windom可以省略不写。
-
方法
获取Element元素对象:
-
getElementById() 通过id名称获取id名称对应的元素对象。ID属性值一般唯一。
-
getElementsByTagName() 通过标签名称获取对应的元素对象。 返回的是一个对象数组
-
getElementsByClassName() 通过class属性值获取对应的元素对象。返回的是一个对象数组。
-
getElementsByName() 通过name属性值获取对应的元素对象。返回的是一个对象数组。
-
创建其他DOM对象
-
createComment() 创建注释节点。
-
createElement() 创建元素节点。
-
createTextNode() 创建文本节点。
-
createAttribute(name) 创建拥有指定名称的属性节点,并返回新的 Attr 对象。
-
-
属性
-
特点
编译器代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出框操作</title>
<script>
/*
alert(); 显示带有一段消息和一个确认按钮的警告框。
confirm() :显示带有一段消息以及确认按钮和取消按钮的对话框
prompt():显示可提示用户输入的对话框。
*/
//window.alert("我被弹出了,你必须确认,否则信息阻塞");
//var flag = window.confirm("你确定要删除吗?");// 根据该条的id值进行删除
/*if (flag) {
// 关联后台 执行删除动作
//alert("删除成功!")
} else {
// false 不做任何操作
//alert("删除失败!")
}*/
// prompt():显示可提示用户输入的对话框。
var result = window.prompt("请输入你需要查询的(关键字)信息");// 用户信息 姓张的用户信息
if (result == "张") {
// 关联后台,查询姓张的用户信息
alert("查到了姓张的用户信息");
} else {
alert("无任何信息!");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>窗口操作</title>
</head>
<body>
<a href="./06_History历史记录对象操作.html">返回06页面</a>
<a href="./03_定时器操作.html">前进03页面</a>
<input type="button" id="openBtn" value="打开新窗口">
<input type="button" id="closeBtn" value="关闭窗口">
<input type="button" id="back" value="返回">
<script>
var input = document.getElementById("back");
// 事件绑定
input.onclick = function() {
// 返回上一个URL地址
window.history.back();
}
</script>
<script>
/*
- close() : 关闭浏览器窗口。
- open(): 打开一个新的浏览器窗口或查找一个已命名的窗口。
var id对应的标签 = document.getElementById("id名称"); // Element
事件绑定 onclick 点击事件
*/
var input = document.getElementById("openBtn");
//alert(input);
/* function onclick() {
}*/
var newWindow;
input.onclick = function() {
// 打开一个新窗口
newWindow = window.open(); // open() --->生成一个新窗口Window对象
}
// close() : 关闭浏览器窗口。
var closeBtn = document.getElementById("closeBtn");
// 给该标签绑定一个点击事件
closeBtn.onclick = function() {
// 关闭一个窗口
newWindow.close(); // window指代就是当前的窗口
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器操作</title>
</head>
<body>
<p id="boom" style="color: red;text-align: center;font-size: 40px;">10</p>
<input type="button" id="back" value="返回开始的位置">
<script>
/*
go()
*/
var input = document.getElementById("back");
input.onclick = function() {
window.history.go(-2);
}
</script>
<script>
/*
- setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
需要两个参数:
1. 定时器加载的方法体内容
2. 定时器间隔时间执行 毫秒数
有返回值:就是该定时器的唯一时间标识 timeID
- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
需要两个参数:
1. 定时器加载的方法体内容
2. 定时器间隔时间执行 毫秒数
有返回值:就是该定时器的唯一时间标识 timeID
- clearInterval() 取消由 setInterval() 设置的 timeout。
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
*/
// 一次性的定时器
// 炸弹 间隔5秒钟之后,弹出一个框框 显示诈弹爆炸了
//window.setTimeout("alert('爆炸了!!')",5000);
var boom = document.getElementById("boom");
var timeID = window.setTimeout(explosion, 10000);
// 会把定时器中的方法体内容封装一个方法 建议把定时器中的方法体内容封装一个方法
function explosion() {
alert('爆炸了!!');
}
// 定义一个时间值变量
var time = 10;
var timeID02 = window.setInterval(countdown, 1000);
// 循环定时器方法体内容
function countdown() {
time--; // 时间递减1
if(time == 5) {
clearTimeout(timeID);
alert("炸弹被拆除了!!");
}
// 当时间值为0秒的时候,关闭周期性函数
if(time == 0) {
clearInterval(timeID02);
}
boom.innerText = time + "";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<title>轮播图操作</title>
</head>
<body style="height: 100%;overflow: hidden;">
<img id="image" src="./image/1.jpg" width="100%" height="100%">
<script>
/*
setInterval()
参数1:方法体内容 封装为一个方法
参数2:间隔时间 毫秒数
src 设置或返回图像的 URL。
document.getElementById("id名称"); Element
*/
// 1. 通过id找到图像对应的标签对象
var image = document.getElementById("image");
// 2. 定义一个数组 存储图像的路径
var arr = ["image/1.jpg", "image/2.jpg", "image/3.jpg", "image/4.jpg"];
// 3. 定义一个自增变量
var i = 0;
// 4. 定义一个方法 实现图片的切换
function changeImage() {
i++;
// 5. 当获取数组当中的最后一个元素 还原成第一个
if(i == 4) {
i = 0;
}
image.src = arr[i];
}
// 定时器
setInterval(changeImage, 3000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location地址栏对象</title>
<script>
/*
href 设置或返回完整的 URL。
*/
// 获取Location对象
/*var location = window.location;
var url = location.href;*/
// 展示URL信息 获取当前的URL信息
//alert(url);
// 设置URL信息
// 重新再加载一次
window.onload = function() {
// 1. 通过id获取到input标签
var input = document.getElementById("goBaidu");
// 2. 事件绑定 点击事件
input.onclick = function() {
// 设置URL信息
location.href = "http://www.baidu.com";
//document.write(location.hostname + "<br>");// localhost
}
// 1. 通过id找到input标签
var input02 = document.getElementById("refresh");
// 2. 事件绑定 点击事件 onclick
input02.onclick = function() {
// 让页面刷新一下
location.reload();
}
// 1. 通过id找到对应的input标签
var input03 = document.getElementById("replace");
// 2. 事件绑定 双击事件 ondblclick
var url = "https://cn.bing.com/";
input03.ondblclick = function() {
location.replace(url);
}
}
</script>
</head>
<body>
<a>百度一下</a>
<input id="goBaidu" type="button" value="去百度">
<input id="refresh" type="button" value="刷新">
<input id="replace" type="button" value="更换页面">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>History历史记录对象操作</title>
</head>
<body>
<h1>这是你开始的地址</h1>
<a href="./02_窗口操作.html">去02页面</a>
<input id="next" type="button" value="前往下一个页面">
<script>
/*
- forward() 加载 history 列表中的下一个 URL。
- back() 加载 history 列表中的前一个 URL。
- go() 加载 history 列表中的某个具体页面。
数字参数 number
正数: 1 前进下一个url地址 2 前进下两个url地址
负数:-1 返回上一个url地址 -2 倒退前两个url地址
*/
var input = document.getElementById("next");
// 事件绑定
input.onclick = function () {
window.history.forward();
}
// 获取当前窗口的url历史记录数
alert("当前窗口的历史记录数为:" + window.history.length);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档对象</title>
</head>
<body>
<a href="https://www.baidu.com">我的链接</a>
<h1>我的标题</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取document元素内容方式</title>
<!--
1. 使用history历史记录对象实现轮播图
2. 使用window对象实现间隔几秒钟自动跳转到首页 index.html
3. 使用内置对象画一个电子表
4. 扩展题:画一个动态表格
-->
</head>
<body>
<input class="btn" value="按钮">
<input id="btn" class="btn" value="按钮">
<input class="btn" name="btn" value="按钮">
<input class="btn" value="按钮">
<input class="btn" value="按钮">
<script>
/*
1. getElementById() 通过id名称获取id名称对应的元素对象。ID属性值一般唯一。
2. getElementsByTagName() 通过标签名称获取对应的元素对象。 返回的是一个对象数组
3. getElementsByClassName() 通过class属性值获取对应的元素对象。返回的是一个对象数组。
4. getElementsByName() 通过name属性值获取对应的元素对象。返回的是一个对象数组。
*/
// getElementById() 通过id名称获取id名称对应的元素对象。ID属性值一般唯一。
var btn = document.getElementById("btn");
//alert(btn);
btn.value = "我是被更改的内容";
</script>
</body>
</html>