今日内容
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>
740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
