【JavaScript】50_终篇_编程进阶与BOM编程概览（3k字+） - 服务器托管|北京服务器租用|机房托管租用|IDC托管租用|机房机柜带宽租用-价格及费用咨询

12、节点的复制

使用 cloneNode() 方法对节点进行复制时，它会复制节点的所有特点包括各种属性

这个方法默认只会复制当前节点，而不会复制节点的子节点

可以传递一个true作为参数，这样该方法也会将元素的子节点一起复制

在本案例中，像li是一个节点，里面的“孙悟空”是一个子节点，需要使用true来一块复制上

孙悟空

猪八戒

沙和尚

蜘蛛精

13、直接修改css样式

修改样式的方式：元素.style.样式名 = 样式值

如果样式名中含有-，则需要将样式表修改为驼峰命名法


     
     
     
     Document

14、读取css样式

getComputedStyle()

它会返回一个对象，这个对象中包含了当前元素所有的生效的样式
参数：

要获取样式的对象
要获取的伪元素

返回值：返回的一个对象，对象中存储了当前元素的样式
注意：样式对象中返回的样式值，不一定能来拿来直接计算所以使用时，一定要确保值是可以计算的才去计算


     
     
     
     Document

15、其他读取样式的方式

元素.clientHeight

元素.clientWidth

获取元素内部的宽度和高度（包括内容区和内边距）

元素.offsetHeight

元素.offsetWidth

获取元素的可见框的大小（包括内容区、内边距和边框）

元素.scrollHeight

元素.scrollWidth

- 获取元素滚动区域的大小

元素.offsetParent

获取元素的定位父元素
定位父元素：离当前元素最近的开启了定位的祖先元素，如果所有的元素都没有开启定位则返回body

元素.offsetTop

元素.offsetLeft

- 获取元素相对于其定位父元素的偏移量

元素.scrollTop

元素.scrollLeft

- 获取或设置元素滚动条的偏移量

16、间接修改css样式

除了直接修改样式外，也可以通过修改class属性来间接的修改样式

通过class修改样式的好处：

可以一次性修改多个样式
对JS和CSS进行解耦

元素.classList

是一个对象，对象中提供了对当前元素的类的各种操作方法

元素.classList.add() ：向元素中添加一个或多个class

元素.classList.remove()：移除元素中的一个或多个class

元素.classList.toggle() ：切换元素中的class

元素.classList.replace()：替换class

元素.classList.contains() ：检查class

17、事件对象

event 事件

事件对象

事件对象是有浏览器在事件触发时所创建的对象，这个对象中封装了事件相关的各种信息
通过事件对象可以获取到事件的详细信息比如：鼠标的坐标、键盘的按键..
浏览器在创建事件对象后，会将事件对象作为响应函数的参数传递，所以我们可以在事件的回调函数中定义一个形参来接收事件对象


     
     
     
     Document

18、事件的冒泡

在DOM中存在着多种不同类型的事件对象

多种事件对象有一个共同的祖先 Event

event.target 触发事件的对象
event.currentTarget 绑定事件的对象（同this）
event.stopPropagation() 停止事件的传导
event.preventDefault() 取消默认行为

事件的冒泡（bubble）

事件的冒泡就是指事件的向上传到
当元素上的某个事件被触发后，其祖先元素上的相同事件也会同时被触发
冒泡的存在大大的简化了代码的编写，但是在一些场景下我们并不希望冒泡存在不希望事件冒泡时，可以通过事件对象来取消冒泡

在事件的响应函数中：

event.target :

表示的是触发事件的对象

this 绑定事件的对象

event.stopPropagation()

取消事件的传导

BOM编程

1、初识BOM

BOM

浏览器对象模型
BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作
BOM对象：

Window —— 代表浏览器窗口（全局对象）
Navigator —— 浏览器的对象（可以用来识别浏览器）
Location —— 浏览器的地址栏信息
History —— 浏览器的历史记录（控制浏览器前进后退）
Screen —— 屏幕的信息

BOM对象都是作为window对象的属性保存的，所以可以直接在JS中访问这些对象

2、navigator

Navigator —— 浏览器的对象（可以用来识别浏览器）

userAgent

返回一个用来描述浏览器信息的字符串

3、location

location 表示的是浏览器地址栏的信息

可以直接将location的值修改为一个新的地址，这样会使得网页发生跳转
location.assign() 跳转到一个新的地址
location.replace() 跳转到一个新的地址（无法通过回退按钮回退）
location.reload() 刷新页面，可以传递一个true来强制清缓存刷新
location.href 获取当前地址

4、history

history.back()

回退按钮

history.forward()

前进按钮

history.go()

可以向前跳转也可以向后跳转

5、定时器

通过定时器，可以使代码在指定时间后执行

设置定时器的方式有两种：

setTimeout()

参数：

回调函数（要执行的代码）
间隔的时间（毫秒）

关闭定时器

clearTimeout()

setInterval()

每间隔一段时间代码就会执行一次

参数：

回调函数（要执行的代码）
间隔的时间（毫秒）

关闭定时器

clearInterval()

6、深入理解定时器

定时器的本质

就是在指定时间后将函数添加到消息队列中

setInterval() 没间隔一段时间就将函数添加到消息队列中

但是如果函数执行的速度比较慢，它是无法确保每次执行的间隔都是一样的

7、事件循环

事件循环（event loop）

函数在每次执行时，都会产生一个执行环境
执行环境负责存储函数执行时产生的一切数据
问题：函数的执行环境要存储到哪里呢？

函数的执行环境存储到了一个叫做调用栈的地方
栈，是一种数据结构，特点后进先出
队列，是一种数据结构，特点先进先出

调用栈（call stack）

- 调用栈负责存储函数的执行环境
     - 当一个函数被调用时，它的执行环境会作为一个栈帧
     插入到调用栈的栈顶，函数执行完毕其栈帧会自动从栈中弹出
     
     ```html
         
     ```

队列，是一种数据结构，特点先进先出

消息队列

消息队列负责存储将要执行的函数
当我们触发一个事件时，其响应函数并不是直接就添加到调用栈中的。

因为调用栈中有可能会存在一些还没有执行完的代码

事件触发后，JS引擎是将事件响应函数插入到消息队列中排队

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net