十二、JavaScript的DOM特效
在web浏览器上，window对象是一个全局对象，代表web浏览器中一个打开的窗口（包括选项卡、地址栏、收藏夹、和网页等），所以，每个打开的窗口都是一个window对象，document是window对象的一个属性，由于document属性的取值是一个对象，所以document属性是一个对象类型的属性，其取值叫做document对象，document对象是一个web浏览器宿主对象，代表当前窗口中的整个网页，保存了网页上所有的内容，通过document对象就可以操作网页上的内容了，DOM的全称是Document Object Model（文档对象模型），代表了document对象（整个网页）的树状结构的模型，DOM 定义了访问和操作 HTML文档（网页）的标准方法，所以，学习DOM就是学习如何通过document对象操作网页上的内容，在JS中，HTML标签就叫做DOM元素，使用document的时候前面可以省略window，document对象调用它的getElementById方法可以返回在此页面上所找到的传入id名称字符串所指代的DOM元素，由于id名称不可以重复，所以当找到了此DOM元素时，返回值是一个将此DOM元素包装成的对象（是被浏览器宿主对象HTMLDivElement包装的），当找不到此DOM元素时，返回值是null，例如“let oDiv = document.getElementById (“box”);”，由于类名、name值、和标签名称是可以重复的，所以document对象调用它的getElementsByClassName/getElementsByName/getElementsByTagName方法可以返回在此页面上所找到的传入类名/name值/标签名称字符串所指代的所有DOM元素所组成的伪数组，当找不到此DOM元素时，返回值是一个空数组，但getElementsByName方法在不同web浏览器中工作方式是不同的，在IE和Opera中，所返回的数组中还包括那些id属性为指定值的DOM元素，document对象调用它的querySelector/querySelectorAll方法（推荐）可以返回在此页面上所找到的传入选择器（标签/id/类/后代选择器...）字符串所指代的首个DOM元素/所有DOM元素所组成的伪数组，当找不到此DOM元素时，返回值是null/空数组，例如“let oDiv = document.querySelector (“#box”);”，“let oDiv = document.querySelector (“div>form”);”，“let oDivs = document.querySelectorAll (“.father”);”，DOM元素访问它的tagName属性可以返回此DOM元素的名称字符串，DOM元素访问它的children/childNodes属性可以返回此DOM元素内部所有子DOM元素/节点对象所组成的伪数组（节点就是DOM元素/属性节点/文本，但这里的“子节点对象”指的是DOM元素和文本对象），例如“let oDiv = document.querySelector (“div”); console.log (oDiv.children);”，节点对象访问它的nodeType属性可以返回此节点类型的数值代号，1代表DOM元素，3代表文本，例如“for (let node of oDiv.childNodes) {console.log (node.nodeType);}”，数值1可以用“Node.ELEMENT_NODE;(//返回值是1)”来表示，节点对象访问它的nodeName/nodeValue属性可以返回此节点的节点名称/取值字符串（nodeName属性的返回值可以是DOM元素名称/属性节点字符串/“#text”，nodeValue属性的返回值可以是null/属性节点值/“文本内容”），DOM元素访问它的firstChild/lastChild属性可以返回此DOM元素内部的首个/最后一个子节点对象，例如“let oDiv = document.querySelector (“div”); console.log (oDiv.firstChild);”，DOM元素访问它的firstElementChild/lastElementChild属性可以返回此DOM元素内部的首个/最后一个子DOM元素，DOM元素访问它的parentElement/parentNode属性可以返回此DOM元素的父DOM元素/节点对象，但在火狐9之前，只支持parentNode属性，不支持parentElement属性，所以，当想要做兼容性处理时，示例为“let oUl = oLi.parentElement || oLi.parentNode;”，DOM元素访问它的previousSibling/nextSibling属性可以返回此DOM元素的上/下一个节点对象，DOM元素访问它的previousElementSibling/nextElementSibling属性可以返回此DOM元素的上/下一个DOM元素，document对象调用它的createElement方法可以返回所创建的传入DOM元素名称字符串所指代的DOM元素，格式为“let oDiv = document.createElement (“div”);”，DOM元素调用它的appendChild方法可以在此DOM元素内部的最后位置添加所传入的DOM元素，例如“oUl.appendChild (oLi);”，DOM元素调用它的insertBefore方法可以将参数1DOM元素添加到此DOM元素内部的参数2DOM元素的前面，格式为“oUl.insertBefore (oLi1, oLi2);”，DOM元素调用它的removeChild方法可以删除此DOM元素内部所传入的子DOM元素，格式为“oDiv.removeChild (oP);(//当不传参/删除不存在的DOM元素时，就会报错，当想要让某个DOM元素自我删除时，可以让此DOM元素的parentElement/parentNode对象调用它的removeChild方法，并传入此DOM元素)”，DOM元素调用它的cloneNode方法可以返回被克隆的此DOM元素（当传入true时包括此DOM元素内部的子DOM元素，当传入false/不传参时则不包括），由于调用querySelector/createElement方法所返回/创建的DOM元素，系统都会将它包装成一个对象，并且会将它的属性和方法都添加给这个对象，所以，可以利用DOM元素来访问/调用它的属性/方法，通过“console.dir ();”可以在控制台显示一个对象所有的属性和方法，DOM元素访问它的属性节点名称可以返回/修改/删除此DOM元素系统自带属性节点的取值（当访问的是class属性时，要改写成className，这是因为class在ES6中是一个用于定义类的声明符，所以为了避免产生冲突就改用了className作为JS属性的名称，对于取值跟属性相同的属性节点，当给它赋值true时，就代表新增此属性节点，当给它赋值false时，就代表删除此属性节点），格式为“console.log (oDiv.title);”，“oDiv.title = “hello world”;(//没有就新增)”，“oDiv.title = “”;(//只会删除取值，属性节点还在)”，DOM元素调用它的getAttribute/setAttribute/removeAttribute方法可以返回/修改/删除此DOM元素的传入系统自带/自定义属性节点字符串的取值，格式为“console.log (oDiv.getAttribute (“title”) );(//另外，当给某个DOM元素设置了data-xxx这种形式的自定义属性节点时，可以使用“oDiv.dataset.xxx;”的形式返回此属性节点的取值)”，“oDiv.setAttribute (“title”, “hello world”);(//没有就新增)”，“oDiv.removeAttribute (“title”);(//会将属性节点和取值同时删除)”，DOM元素访问它的innerHTML/innerText属性既可以返回此DOM元素内部包含/不包含两端空格和HTML标签的内容字符串，也可以给此DOM元素设置包含HTML标签/普通（即出现HTML标签时会当成普通的字符串）的内容字符串，DOM元素访问它的textContent属性既可以返回此DOM元素内部包含两端空格但不包含HTML标签的内容字符串，也可以给此DOM元素设置普通的内容字符串，DOM元素访问它的style属性可以返回此DOM元素的行内样式对象，此行内样式对象访问它的行内样式属性名称可以返回/设置此DOM元素相应行内样式属性的取值字符串（优先级最高，兼容任何浏览器，当设置时，取值别忘了加引号和单位名称，当行内样式属性的名称带有中划线时，要改成驼峰命名），格式为“oDiv.style.lineHeight = “30px”;”，或者我们可以先用一个自定义类名设置好CSS样式，再利用DOM元素访问它的className属性来给此DOM元素设置此类名即可，DOM元素访问它的classList属性可以返回一个只读的DOMTokenList 对象（包含了此DOM元素所有类名的对象），DOMTokenList对象调用它的add/remove/toggle方法可以给调用者添加/删除一/多个所传入的类名字符串/切换add和remove的状态，当调用者拥有所传入的类名时，add方法不会重复去添加，DOMTokenList对象调用它的item方法可以返回传入索引值所对应的类名字符串，当索引值在区间范围之外时，返回值是null，DOMTokenList对象调用它的contains方法可以判断调用者是否拥有所传入的类名字符串，返回值是true/false，window对象调用它的getComputedStyle方法或DOM元素访问它的currentStyle属性都可以返回此DOM元素的样式对象，格式为“getComputedStyle (oDiv);(//只支持高级浏览器)”，“oDiv.currentStyle;(//只支持低级浏览器)”，此样式对象访问此DOM元素的行内样式/CSS属性名称只可以返回（只读属性，无法设置）相应属性的取值字符串，格式为“console.log (getComputedStyle (oDiv).lineHeight);(//只支持高级浏览器)”，“console.log (oDiv.currentStyle.lineHeight);(//只支持低级浏览器)”，offset、client、和scroll类的JS属性统称为JS的三大家族，DOM元素访问它的offsetWidth/offsetHeight属性只可以返回（只读属性，无法设置）此DOM元素整体（即border+padding+内容）的宽/高度值（无论是通过行内样式还是CSS属性设置的，兼容任何浏览器），DOM元素访问它的offsetLeft/offsetTop属性可以返回此DOM元素的左/上边缘与其最近的定位流上级DOM元素的左/上边缘的距离值（即“偏移位”值），当其不存在定位流的上级DOM元素时，就以body元素作为默认的参考点（注意不存在offsetRight/offsetBottom属性），DOM元素访问它的offsetParent属性可以返回跟此DOM元素最近的定位流的上级DOM元素，当其不存在定位流的上级DOM元素时，返回值是body对象，DOM元素访问它的clientWidth/clientHeight属性可以返回此DOM元素除了border部分以外整体的宽/高度值，DOM元素访问它的clientLeft/clientTop属性可以返回此DOM元素border-left/top-width的数值（注意不存在clientRight/clientBottom属性），DOM元素访问它的scrollWidth/scrollHeight属性可以返回此DOM元素的clientWidth/clientHeight值与超出clientWidth/clientHeight范围的内容的宽/高度值之和，DOM元素访问它的scrollLeft/scrollTop属性可以返回此DOM元素的横/竖向滚动条滚出的距离值，document对象访问它的compatMode属性可以返回此html网页在此web浏览器上的渲染模式字符串，“CSS1Compat”代表标准模式（默认），“BackCompat”代表混杂（怪异）模式，当网页没有书写文档声明时，就会按照混杂（怪异）模式来进行渲染，window对象访问它的innerWidth/innerHeight属性可以返回此web浏览器窗口当前的宽/高度值，可随窗口大小的变化而变化，当存在滚动条时，滚动条的宽度值也算在内，支持高级浏览器的各种模式，document对象访问它的documentElement属性可以返回html元素（即整个网页），html/body元素访问它的clientWidth/clientHeight属性也可以返回此web浏览器窗口当前的宽/高度值，可随窗口大小的变化而变化，当存在滚动条时，滚动条的宽度值不算在内，例如“document.documentElement.clientWidth;(//支持低级浏览器的标准模式)”，“document.body.clientWidth;(//支持低级浏览器的混杂模式)”，当想要做兼容性处理时，可以自己封装一个获取此web浏览器窗口当前的宽/高度值的函数，例如“function getScreen () {let width, height; if (window.innerWidth) {width = window.innerWidth; height = window.innerHeight;} else if (document.compatMode === “BackCompat”) {width = document.body.clientWidth; height = document.body.clientHeight;} else {width = document.documentElement.clientWidth; height = document.documentElement.clientHeight;} return {width: width, height: height} }”，window对象访问它的pageXOffset/pageYOffset属性可以返回此web浏览器窗口的横/竖向滚动条滚出的距离值（支持高级浏览器的各种模式），html/body元素访问它的scrollLeft/scrollTop属性可以返回/设置此web浏览器窗口的横/竖向滚动条滚出的距离值，例如“document.documentElement.scrollTop;(//支持低级浏览器的标准模式)”，“document.body.scrollTop;(//支持低级浏览器的混杂模式)”，当想要做兼容性处理时，可以自己封装一个获取此web浏览器窗口的横/竖向滚动条滚出的距离值的函数，例如“function getPageScroll () {let x, y; if (window.pageXOffset) {x = window.pageXOffset; y = window.pageYOffset;} else if (document.compatMode === “BackCompat”) {x = document.body.scrollLeft; y = document.body.scrollTop;} else {x = document.documentElement.scrollLeft; y = document.documentElement.scrollTop;} return {x: x, y: y} }”，window对象调用它的scrollTo方法可以分别让此web浏览器窗口的横竖滚动条滚出所传入的距离值，格式为“window.scrollTo (x, y);(//x表示横向距离值，y表示竖向距离值)”，在谷歌浏览器中，默认情况下不允许在播放本地audio文件时进行播放进度的跳转，也就是在播放本地audio文件时设置其currentTime值是无效的，只有把应用程序部署到web服务器，然后通过web服务器的URL打开此html网页，然后再设置相应audio文件的currentTime值才有效（也就是说只有在http协议下才有效），默认情况下也不允许自动播放audio，只有用户和网页交互之后才可以播放audio，但我们可以通过修改谷歌浏览器的设置来自动播放audio，先在地址栏输入“chrome://flags/”并敲回车，然后在搜索框输入“autoplay”并敲回车，最后把“Autoplay policy”选项的设置改为“no user gesture is required”即可，
十三、JavaScript的小示例
关闭广告效果的核心思想是只要onclick“关闭按钮”，就removeChild广告的那个DOM元素，详见“10-JavaScript-关闭广告.html”，图片展示效果的核心思想是当onclick每一个小元素时，就将此小
元素的src值赋值给大
元素的src属性，详见“11-JavaScript-图片展示.html”，手动简易轮播图的核心思想是当onclick“下一张”/“上一张”按钮时，就将数组中“下一张”/“上一张”相应的
元素的src值赋值给
元素的src属性，但是需要两个if语句规定一下当点到头了时怎么办（即安全校验），详见“12-JavaScript-简易轮播图.html”，商品展示的核心思想是使用for of循环给每一个小
元素都绑定上onmouseenter和onmouseleave事件，当onmouseenter时，给嵌套小
元素的li元素增加border，并将小
元素的src值赋值给大
元素，当onmouseleave时，就移除border，详见“15-JavaScript-商品展示.html”，Tab选项卡的核心思想是使用for of循环给每一个选项卡的按钮都绑定上onclick事件，只要触发此事件，就清空上一次所对应元素的对应样式，例如“oItems[previousIndex].className = “”; oDivs[previousIndex].style.display = “none”;”，并设置当前所对应元素的对应样式，例如“this.className = “current”; oDivs[i].style.display = “block”;”，并保存当前的索引值，例如“previousIndex = i;”，详见“19-JavaScript-Tab选项卡下.html”，全选和反选的核心思想是只要onclick“全选”按钮，就利用input多选框数组对象调用它的forEach方法，将此数组中每一个元素的checked值改为true，取消全选是改为false，反选是“item.checked = !item.checked;”，详见“27-JavaScript-全选反选.html”，时钟效果的核心思想是将时针`rotate(${date.getHours () * 30}deg)`，分针和秒针都将乘以30改为乘以6，详见“31-JavaScript-时钟效果.html”，缓动动画（先快后慢）的步长的公式为“(结束位置 - 开始位置) * 缓动系数”，缓动系数为一个0到1之间的小数，详见animation2.js，手动无限轮播图要在所有img的最后再增加一张跟第一张一模一样的img，一旦点击到最后一张img，当再点击时，就要瞬间跳转到第一张同时让索引值自增1，由于都是一模一样的img，所以跳转的过程肉眼根本看不出来，反向也是同样的道理，例如“oRight.onclick = function () {currentIndex++; if (currentIndex > oItems.length - 1) {currentIndex = 0; oUl.style.marginLeft = -currentIndex * imgWidth + “px”; currentIndex++;} easeAnimation (oUl, -currentIndex * imgWidth);}”，详见“36-JavaScript-无论播图.html”，自动无限轮播图可以通过手动无限轮播图来改造，增加一个setInterval，在里面调用“右箭头onclick事件”即可，只要onmouseenter就clearInterval此setInterval，onmouseleave就重新开启一个setInterval，详见“37-JavaScript-自动轮播.html”，佩奇跟我走的核心思想是使用了event.clientX和event.clientY，详见“46-JavaScript-佩奇跟我走.html”，星空背景的核心思想是使用for循环给所createElement的一定数量的小星星添加随机位置、随机scale、和随机animationDelay，小星星闪烁就做一个opacity从0到1的animation，详见“59-JavaScript-星空背景.html”，吸顶效果的核心思想是当window.onscroll时，只要竖向滚动条滚出的距离值大于等于顶部logo的高度，就将导航部分“oNav.style.position = “fixed”;”，否则就“oNav.style.position = “”;”，详见“65-JavaScript-吸顶效果.html”
十四、JavaScript的BOM特效
BOM（Browser Object Model）就是浏览器对象模型，是一套操作浏览器的API（接口/方法/属性），window对象中有navigator、location、history、screen等属性，它们都是对象类型的属性，navigator对象代表此web浏览器的信息，navigator对象访问它的userAgent属性可以返回此web浏览器的类型信息字符串，例如“/chrome/i.test (navigator.userAgent);(//判断是否是谷歌浏览器)”，“/msie/i.test (navigator.userAgent);(//判断是否是低级IE浏览器)”，““ActiveXObject”in window;(//判断是否是高级IE浏览器)”，location对象代表此web浏览器地址栏的信息，location对象访问它的href属性可以返回/设置此web浏览器地址栏当前完整的URL字符串，location对象访问它的pathname属性可以返回/设置此web浏览器地址栏当前URL的路径部分字符串，location对象访问它的hash属性可以返回/设置此web浏览器地址栏当前URL尾部从#开始的字符串（即哈希），返回的值包含#，设置时不用写#，系统会自动添加#，hash也叫哈希，给此web浏览器地址栏当前的URL设置一个哈希也叫种一个哈希，可以代替cookie实现当前这个html文件上页码的记录，即当前在哪一页刷新之后还在哪一页，cookie的弊端是只能在当前这个浏览器中使用，一旦换一个浏览器就失效了，这时改用哈希就可以了，详见“index（13-weibo）.js”，location对象调用它的reload方法可以刷新此web浏览器的页面，当传入实参true时，代表强制刷新，会更新缓存，history对象代表浏览器的历史信息，利用history对象可以实现刷新/上一步/下一步，但是出于隐私考虑，并不能获取到此web浏览器所有的历史记录，只能获取到当前的历史记录，history对象调用它的forward方法可以在此web浏览器访问过其它页面时使页面前进，history对象调用它的go方法可以在此web浏览器访问过其它页面时使页面前进/后退，还可以刷新此web浏览器的页面，传入正整数代表前进多少个页面，传入负整数代表后退多少个页面，传入0代表刷新，history对象调用它的back方法可以在此web浏览器访问过其它页面时使页面后退，screen对象代表用户的屏幕信息