大工20春《javascript基础教程与应用》辅导资料十
JavaScript基础教程与应用辅导资料十主 题：课件第十七章 JavaScript的BOM对象学习时间：2020年6月1日－6月7日
“不忘初心、牢记使命”主题理论学习：
每周文摘：实现我们确立的奋斗目标，我们既要有“乱云飞渡仍从容”的战略定力，又要有“不到长城非好汉”的进取精神。全党全国各族人民更加紧密地团结起来，勿忘昨天的苦难辉煌，无愧今天的使命担当，不负明天的伟大梦想，下定决心，排除万难，在中国特色社会主义伟大道路上，为实现中华民族伟大复兴的中国梦，前进！
摘选自《在纪念毛泽东同志诞辰一百二十周年座谈会上的讲话》
内 容：
我们这周主要学习课件第五章JavaScript的BOM对象的相关内容，希望通过下面的内容能使同学们加深对本章相关知识点的理解。
知识脉络：
1、BOM的概念
2、window对象的概念
3、BOM包含哪些对象
重点与难点：
1、重点：BOM对象的理解，window对象概念；
2、难点：BOM包含的对象的理解。一、什么是BOM
BOM（Browser Object Model）即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。二、学习BOM学什么
我们将学到与浏览器窗口交互的一些对象，例如可以移动、调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器、操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。在这里，只介绍一些window对象等的基础知识，其中会有一些ECMAscript的知识还会说明。其他对象Location、Screen、Navigator、History不一一详细介绍了。
BOM结构图
三、window对象
window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。
?例：打开窗口 window.open(url,target,param);
//?url 要打开的地址
//target? 新窗口的位置?? _blank? _self? _parent(父框架)
//param? 新窗口的一些设置
//返回值，新窗口的句柄
关闭窗口：window.close();四、BOM相关案例
1.定时器
?延迟执行?? ? setTimeout( code, interval);
? ? ? ? ? ? ? ? clearTimeout( intervalId);1 <body>
2 <input type="button" value="closeTimerId" id="btn">
3 <script>
4 var btn = document.getElementById("btn");
5 var timerId = setTimeout(function () {
6 alert("23333");
7 }, 3000);
8 btn.onclick = function () { //在设置的时间之前（3s内）点击可以取消定时器
9 clearTimeout(timerId);
10 }
11 </script>
12 </body>
定时执行?? ? var timerId = setInterval(code, interval);
? ? ? ? ? ? ? ? ? ? ? ?clearInterval(timerId); ? ? //清除定时器
?倒计时案例：
1 <body>
2 <input type="button" value="倒计时开始10" id="btn" disabled/>
3 <script>
4 var btn = document.getElementById("btn");
5 var num = 10;
6 var timerId = setInterval(function () {
7 num--;
8 btn.value = "到时器开始" + num;
9 if (num == 0) {
10 clearInterval(timerId);
11 btn.disabled = false;
12 btn.value = "同意，可以点了";
13 }
14 },1000);
15 </script>
16 </body>2.offset系列方法
offsetWidth和offsetHeight
offsetHeight的构成
offsetHeight = height + padding + border
offsetWidth相同
?
offsetHeight和style.height的区别
1. demo.style.height只能获取行内样式，否则无法获取到
2. .style.height是字符串（有单位px）， offsetHeight是数值（无单位）
3. .style.height可以设置行内样式，但offsetHeight是只读属性，不可设置
所以：demo.style.height获取 某元素的真实高度/宽度，用.style.height来设置高度/宽度
offsetLeft和offsetTop
offsetLeft的构成
1，到距离自身最近的（带有定位的）父元素的 左侧/顶部
2，如果所有父级元素都没有定位，则以body为准
3，offsetLeft是自身border左侧到父级padding左侧的距离
?
offsetLeft和style.left的区别
1，style.left只能获取行内样式
2，offsetLeft只读，style.left可读可写
3，offsetLeft是数值，style.left是字符串并且有单位px
4，如果没有定位，style.left获取的数值可能是无效的
5，最大的区别：offsetLeft以border左上角为基准， style.left以margin左上角为基准
offsetParent
构成
1. 返回该对象距离最近的带有定位的父级元素
2. 如果当前元素的所有父级元素都没有定位（position为absolute或relative），那么offsetParent为body
3. offsetLeft获取的就是相对于offsetParent的距离
?
与parentNode的区别
parentNode始终指向的是当前元素的最近的父元素，无论定位与否
offset示意图
3.scroll系列方法
scrollHeight和scrollWidth
对象内部的实际内容的高度/宽度（不包括border）
scrollTop和scrollLeft
被卷去部分的顶部/左侧 到 可视区域 顶部/左侧 的距离
onscroll事件
滚动条滚动触发的事件
页面滚动坐标
var scrollTop = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
scroll示意图
4.client系列
clientX和clientY ? ? 获取鼠标在可视区域的位置 ? ? clientX = width + padding，clientY = height + padding
clientLeft ? ? 边框的宽度，若有滚动条的话，包括滚动条
client示意图
转载注明 无忧答案网
页:
[1]