目录

  1. DOM操作
  2. DOM事件模型和事件流
  3. 事件代理(事件委托)
  4. BOM操作
    1. 定义

DOM操作

　　当网页被加载时，浏览器会创建页面的文档对象模型(DOM),我们可以认为 DOM 就是 JS 能识别的 HTML 结构，一个普通的 JS 对象或者数组。接下来我们介绍常见DOM操作：DOM基本操作

DOM事件模型和事件流

　　DOM事件模型分为捕获和冒泡。一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。
　　（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段,捕获阶段不会响应任何事件；
　　（2）目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上；
　　（3）冒泡阶段：冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点），事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；
详情：
　　冒泡和捕获

事件代理(事件委托)

　　由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。
　　我们设定一种场景，如下代码，一个<div>中包含了若干个<a>，而且还能继续增加。那如何快捷方便地为所有<a>绑定事件呢？

1
2
3
4
5
6
7
<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<button>点击增加一个 a 标签</button>

　　如果给每个<a>标签一一都绑定一个事件，那对于内存消耗是非常大的。借助事件代理，我们只需要给父容器div绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把父容器的click行为触发，然后把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而完成不同的事。

1
2
3
4
5
6
7
8
9
var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
    // e.target 可以监听到触发点击事件的元素是哪一个
    var target = e.target
    if (e.nodeName === 'A') {
        // 点击的是 <a> 元素
        alert(target.innerHTML)
    }
})

最后，使用代理的优点如下：
　　使代码简洁
　　减少浏览器的内存占用
　　动态昂定事件

BOM操作

定义

　　BOM（浏览器对象模型）是浏览器本身的一些信息的设置和获取，例如获取浏览器的宽度、高度，设置让浏览器跳转到哪个地址。

1
2
3
4
5
6
7
8
# 包含有关用户屏幕的信息
window.screen对象
# 用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面
window.location对象
# 浏览历史的前进后退等
window.history对象
# 常常用来获取浏览器信息、是否移动端访问等等
window.navigator对象

获取屏幕的宽度和高度

1
2
console.log(screen.width)
console.log(screen.height)

获取网址、协议、path、参数、hash 等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 例如当前网址是 
https://juejin.im/timeline/frontend?a=10&b=10#some

# 返回（当前页面的）整个 URL
# https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.href)  

# 返回所使用的 web 协议（http:// 或 https://）
# https:
console.log(location.protocol) 

# 属性返回 URL 的路径名
# /timeline/frontend
console.log(location.pathname) 

# ?a=10&b=10
console.log(location.search) 

# #some
console.log(location.hash)

另外，还有调用浏览器的前进、后退功能等

1
2
history.back()
history.forward()

获取浏览器特性（即俗称的UA）然后识别客户端，例如判断是不是 Chrome 浏览器

1
2
3
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

转载：
　　思否