第一阶段（A）（前端） 20天 120学时
第14章 JavaScript DOM对象和BOM对象（6）
[学习课时] 本章共需要学习 6 课时
[目的要求]
- 掌握JavaScript DOM对象
- 掌握JavaScript BOM对象
[教学内容]
浏览器对象模型 (BOM)
| document |
对 Document 对象的只读引用。 |
| history |
对 History 对象的只读引用。 |
| innerHeight |
返回窗口的文档显示区的高度。 |
| innerWidth |
返回窗口的文档显示区的宽度。 |
| location |
用于窗口或框架的 Location 对象。 |
| name |
设置或返回窗口的名称。 |
| navigator |
对 Navigator 对象的只读引用。 |
| outerHeight |
返回窗口的外部高度，包含工具条与滚动条。 |
| outerWidth |
返回窗口的外部宽度，包含工具条与滚动条。 |
| screen |
对 Screen 对象的只读引用。 |
- Window 对象
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同：
document.getElementById("header");
特殊方法
- setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval(function, milliseconds, param1, param2, ...)
- clearInterval() 取消由 setInterval() 设置的 timeout。
- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
setTimeout(function, milliseconds, param1, param2, ...)
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
Window 浏览器窗口的尺寸
有三种方法能够确定浏览器窗口的尺寸。
- 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
- 对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
- 通用
document.body.clientHeight
document.body.clientWidth
混合
实例：demo01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
var w = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
var h = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
document.write("浏览器window宽度: " + w + ", 高度: " + h + "。");
</script>
</html>
效果图
Window Screen显示器尺寸
window.screen 对象在编写时可以不使用 window 这个前缀。
显示器宽高属性：
- screen.width - 返回屏幕的总宽度，（包括Windows底部任务栏）
- screen.height - 返回屏幕的总高度，（包括Windows底部任务栏）
- screen.availWidth - 返回屏幕的高度（不包括Windows底部任务栏）
- screen.availHeight - 返回屏幕的宽度（不包括Windows底部任务栏）
- screen.colorDepth - 色彩深度
- screen.pixelDepth - 色彩分辨率
实例：demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
document.write("总宽度/高度: "+screen.width + "*" + screen.height);
document.write("<br>");
document.write("可用宽度/高度: "+screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("色彩深度: "+screen.colorDepth);
document.write("<br>");
document.write("色彩分辨率: "+screen.pixelDepth);
</script>
</html>
效果图
Window Location对象
window.location 对象在编写时可不使用 window 这个前缀。
如：
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 （80 或 443）
- location.protocol 返回所使用的 web 协议（http:// 或 https://）
- location.href返回完整的 URL（http://127.0.0.1:8020 /demo02/index.html）
- location.hash 返回一个URL的锚部分
方法：
- location.assign(url) 跳转到新文档【location.assign("http://www.baidu.com")】，可返回
- location.replace(url) 用新文档取代当前文【location.replace("http://www.baidu.com")】
- location.reload() 刷新（重新加载）当前文档【location.reload()】
实例：demo03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="location.assign('http://www.baidu.com')">
assign：跳转到新文档（百度），可以返回前地址
</button>
<br/>
<button onclick="location.replace('http://www.baidu.com')">
replace：用新文档（百度）替换，不可以返回前地址
</button>
<br/>
<button onclick="location.reload()">
reload：重新加载当前文档（刷新）
</button>
<br/>
</body>
<script>
location.href = 'http://127.0.0.1:8020/PHP/014-JS/demo03/index.html?id=1$class=c#test'
document.write("完整地址: "+location.href);
document.write("<br>");
document.write("协议: "+location.protocol);
document.write("<br>");
document.write("主机和端口: "+ location.host);
document.write("<br>");
document.write("主机地址: "+ location.hostname);
document.write("<br>");
document.write("端口: "+location.port);
document.write("<br>");
document.write("当前文件路径: "+location.pathname);
document.write("<br>");
document.write("搜索（参数）: "+location.search);
document.write("<br>");
document.write("锚点: "+location.hash);
document.write("<br>");
</script>
</html>
效果图
Window History对象
window.history对象在编写时可不使用 window 这个前缀。
如：
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击向前按钮相同
- history.go(number|URL) - 加载某个具体页面（正数：向前；负数：向后）
实例：demo04
文件一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
页面1
</div>
<a href="new_file1.html">跳转到页面1</a>
<button onclick="history.forward();">下一页面</button>
</body>
</html>
文件二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
页面2
</div>
<a href="new_file2.html">跳转到页面3</a>
<button onclick="history.back();">上一页面</button>
<button onclick="history.forward();">下一页面</button>
</body>
</html>
文件三
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
页面3
</div>
<button onclick="history.back();">返回上一页面</button>
<button onclick="history.go(-2);">返回第一页</button>
</body>
</html>
Window Navigator 对象
Window navigator对象在编写时可不使用 window 这个前缀
如：
- navigator.appCodeName - 返回浏览器的代码名
- navigator.appName - 返回浏览器的名称
- navigator.appVersion - 返回浏览器的平台和版本信息
- navigator.cookieEnabled - 返回指明浏览器中是否启用 cookie 的布尔值
- navigator.platform - 返回运行浏览器的操作系统平台
- navigator.userAgent - 返回由客户机发送服务器的user-agent 头部的值
- navigator.javaEnabled() - 指定是否在浏览器中启用Java
- navigator.taintEnabled() - 规定浏览器是否启用数据污点(data tainting)
实例：demo05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
document.write("浏览器代号: " + navigator.appCodeName + "<br/><br/>");
document.write("浏览器名称: " + navigator.appName + "<br/><br/>");
document.write("浏览器的平台和版本信息: " + navigator.appVersion + "<br/><br/>");
document.write("浏览器启用cookie: " + navigator.cookieEnabled + "<br/><br/>");
document.write("HTTP 请求的用户代理头: " + navigator.userAgent + "<br/><br/>");
</script>
</html>
效果图
文档对象（DOM）
- DOM Document 对象
| 属性 / 方法 |
描述 |
| document.addEventListener() |
向文档添加事件句柄 |
| document.removeEventListener() |
移除文档中的事件句柄(由 addEventListener() 方法添加) |
|
|
|
| document.body |
返回文档的body元素 |
| document.cookie |
设置或返回与当前文档有关的所有 cookie。 |
| document.createAttribute() |
创建一个属性节点 |
| document.createComment() |
createComment() 方法可创建注释节点。 |
| document.createElement() |
创建元素节点。 |
| document.createTextNode() |
创建文本节点。 |
|
|
|
| document.getElementsByClassName() |
返回文档中所有指定类名的元素集合，作为 NodeList 对象。 |
| document.getElementById() |
返回对拥有指定 id 的第一个对象的引用。 |
| document.getElementsByName() |
返回带有指定名称的对象集合。 |
| document.getElementsByTagName() |
返回带有指定标签名的对象集合。 |
| document.querySelector() |
返回文档中匹配指定的CSS选择器的第一元素 |
| document.querySelectorAll() |
document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
|
|
|
| document.write() |
向文档写 HTML 表达式 或 JavaScript 代码。 |
| document.writeln() |
等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
- DOM 元素对象
| 属性 / 方法 |
描述 |
| element.addEventListener() |
向指定元素添加事件句柄 |
| element.removeEventListener() |
移除由 addEventListener() 方法添加的事件句柄 |
|
|
|
| element.appendChild(node) |
为元素添加一个新的子元素 |
| element.removeChild(node) |
删除一个子元素 |
| element.insertBefore(node) |
现有的子元素之前插入一个新的子元素 |
|
|
|
| element.attributes |
返回一个元素的属性数组 |
| element.childNodes |
返回元素的一个子节点的数组，包括空文字节点 |
| element.children |
返回元素的一个子节点的数组，不包括空文字节点 |
| element.classList |
返回元素的类数组，可用add(class1, class2, ...)、contains(class)、item(index)、remove(class1, class2, ...)、toggle(class) |
| element.className |
设置或返回元素的class属性值 |
| element.id |
设置或者返回元素的 id。 |
| element.innerHTML |
设置或者返回元素的内容。 |
| element.getAttribute(name) |
返回指定元素的属性值 |
| element.getAttributeNode(name) |
返回指定属性节点对象，name：属性名；value：属性值 |
| element.hasAttribute(name) |
判断元素中是否存在指定的属性返回 true，否则返回false。 |
| element.hasAttributes() |
判断元素是否有任何属性返回true，否则返回false。 |
| element.hasChildNodes() |
判断元素是否具有任何子元素 |
|
|
|
| element.clientHeight |
在页面上返回内容的可视高度（不包括边框，边距或滚动条） |
| element.clientWidth |
在页面上返回内容的可视宽度（不包括边框，边距或滚动条） |
| element.offsetHeight |
返回，任何一个元素的高度包括边框和填充，但不是边距 |
| element.offsetWidth |
返回元素的宽度，包括边框和填充，但不是边距 |
| element.scrollHeight |
返回整个元素的高度（包括带滚动条的隐蔽的地方） |
| element.scrollLeft |
返回当前视图中的实际元素的左边缘和左边缘之间的距离 |
| element.scrollTop |
返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离 |
| element.scrollWidth |
返回元素的整个宽度（包括带滚动条的隐蔽的地方） |
|
|
|
| element.cloneNode(boolean) |
克隆某个元素，true：克隆子元素；false：不包括子元素 |
| element.firstChild |
返回元素的第一个子节点 |
| element.lastChild |
返回的最后一个子元素 |
| element.nextSibling |
返回该元素紧跟的一个节点 |
| element.parentNode |
返回元素的父节点 |
| element.previousSibling |
返回某个元素紧接之前元素 |
| element.querySelector() |
返回匹配指定 CSS 选择器元素的第一个子元素 |
|
|
|
| element.removeAttribute() |
从元素中删除指定的属性 |
| element.removeAttributeNode() |
删除指定属性节点并返回移除后的节点。 |
| element.setAttribute() |
设置或者改变指定属性并指定值。 |
| element.setAttributeNode() |
设置或者改变指定属性节点。 |
实例：demo06
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
.mystyle {
width: 300px;
height: 50px;
background-color: coral;
color: white;
font-size: 25px;
}
.newClassName {
width: 400px;
height: 100px;
background-color: lightblue;
text-align: center;
font-size: 25px;
color: navy;
margin-bottom: 10px;
}
</style>
</head>
<body>
<button onclick="myFunction()">点击按钮切换添加/删除类名</button>
<div id="myDIV" class="mystyle">
我是一个 DIV 元素。
</div>
<script>
function myFunction() {
document.getElementById("myDIV").classList.toggle("newClassName");
}
</script>
</body>
</html>
效果图
实例：demo07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="myList1">
<li>你好</li>
<li>哈哈</li>
</ul>
<ul id="myList2">
<li>嘎嘎</li>
<li>嘿嘿</li>
</ul>
<button onclick="myFunction()">单击按钮将项目从一个列表复制到另一个列表中</button>
<script>
function myFunction() {
var itm = document.getElementById("myList2").children;
var cln = itm[itm.length-1].cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
</script>
</body>
</html>
效果图
- DOM 事件对象
| 属性 |
此事件发生在何时... |
| onblur |
元素失去焦点。 |
| onchange |
域的内容被改变。 |
| onclick |
当用户点击某个对象时调用的事件句柄。 |
| ondblclick |
当用户双击某个对象时调用的事件句柄。 |
| onfocus |
元素获得焦点。 |
| onkeydown |
某个键盘按键被按下。 |
| onkeypress |
某个键盘按键被按下并松开。 |
| onkeyup |
某个键盘按键被松开。 |
| onload |
一张页面或一幅图像完成加载。 |
| onmousedown |
鼠标按钮被按下。 |
| onmousemove |
鼠标被移动。 |
| onmouseout |
鼠标从某元素移开。 |
| onmouseover |
鼠标移到某元素之上。 |
| onmouseup |
鼠标按键被松开。 |
| onresize |
窗口或框架被重新调整大小。 |
| onunload |
用户退出页面。 |
| onscroll |
页面滚动 |
鼠标 / 键盘属性
| 属性 |
描述 |
| clientX |
返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY |
返回当事件被触发时，鼠标指针的垂直坐标。 |
| screenX |
返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY |
返回当某个事件被触发时，鼠标指针的垂直坐标。 |
实例：demo08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
}
</style>
</head>
<body onmousemove="show_coords(event)">
</body>
<script type="text/javascript">
function show_coords(event) {
x = event.clientX;
y = event.clientY;
document.body.innerHTML= "X 坐标: " + x + ", Y 坐标: " + y;
}
</script>
</html>
效果图
[作业实验]
- 使用JS实现如下效果对话框效果，要求整体居中显示
HTML+CSS+JS-第15章 HTTP协议
- HTML+CSS+JS精细化教程（新）适合学习和巩固基础（必掌握技能）
- JAVA语言（面向对象都不是事，重点是多线程、反射、网络编程、界面编程、设计模式、工程架构、文件系统）
- JAVA WEB（MySQL、JDBC、JSP、JSTL、EL、Servlet、Spring、Struts、MyBatis、SpringData等）
- Spring Boot2（新版2.X、底层原理深入剖析、更有点餐系统、大型博客系统、商铺平台等完整项目开始视频和源码）
- Python（小白基础语法、RESTfull API开发、爬虫、Django、Linux系统、制作小工具）
- Photoshop（CS5、CS6、CC2018视频教程、海量素材、酷炫特效制作、经典案例几百集）
- Unity2D/3D（手游开发、脚本开发、3D人物模型设计、3D动画、3D塔防游戏、第一人称游戏案例视频跟着做）
- Android原生开发（大型OA系统、游戏开发、物联网开发、3D模型显示、单机游戏开发）
- IOS原生开发（各种收费应用、游戏开发、工具开发、物联网开发）
- PHP（HTML+CSS+JS+PHP+MySQL+MVC+ThinkPHP+Linux+Nginx+Redis）