第一阶段(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)