JS基础总结（5）—— Bom与Dom

1. Bom

1.1 window

Bom 的核心对象是 window ，它既表示浏览器的一个实例，用于访问浏览器窗口的一个接口，又是js的全局对象，所有全局作用域定义的方法和变量都会成为其属性。
注意点：

1. 成为 window 对象属性的方法和变量无法使用 delete 删除
2. 访问未定义的变量会报错，而使用 window 间接访问则不会（仅限 var 定义的）

1.2 iframe

1. 每个 iframe 都拥有自己的 window 对象， window 对象有一个 name 属性。可通过 window.frames[index] 或者 window.frames[frameName] 来访问对应的 window 对象。

2. 由于每个 iframe 中的 window 都指向当前 iframe 的 window 对象，因此引入了一个 top 对象，改对象始终指向最外层的框架，即浏览器窗口。

3. 与top 对象相对的则是 parent 对象，该对象指向了当前 iframe 的直接上层框架，如果没有则与 top 对象相等。

4. 为了与上述对象相对应，引入了一个 self 对象，就是 window 对象本身，可以互换使用。

所以防止页面被 iframe 有如下方法：

window.onload = function () {
    if (top !== self) { // 判断当前window是否在最上层即可
        top.location.href = self.location.href
    }
};

1.3 location

提供了当前窗口中夹植的文档的有用信息以及一些导航功能。
常用的属性以和方法：

属性或方法	说明
hash	URL中#后面的内容
host	URL的域名和端口号
protocol	URL中的http协议
href	完整的URL路径
search	URL中?后面的内容
assign()	与location.href = 'xxx’相同
replace()	打开新页面且不可返回
reload()	重新打开当前页面

1.4 其他

1. navigator：用于检测浏览器以及系统信息
2. screen：获取屏幕以及窗口信息
3. history：用于记录窗口浏览信息

出于安全，history 中的 url 无法获取，只能调用 go() 或 back()' 或forward()` 来进行前进与后退。

H5提供了 pushState 和 popState 事件，用于操控 history 记录栈

如下代码可以阻止浏览器回退：

window.onload = function () {
    pushState ()
    window.addEventListener('popstate', function (e) {
        pushState ()
    })
};

function pushState () {
    const state = {
        title: 'title',
        url: '#'
    }
    window.history.pushState(state, 'title', '#')
}

2. Dom

2.1 Node 类型

比较常用的就如下几种：

1. document类型：docment 本身即是，表示整个文档
2. element类型：用于表示HTML元素
3. text 类型：表示纯文本，不是很常用，一般用element类型调用innerHTML或innerText实现
4. documentFragment类型：用于储存Dom节点，用于一次性添加Dom操作，提高性能

所有类型的 Node 可以访问或调用其拥有的属性或方法

2.2 操作方法

只列常用的

属性或方法	说明
querySelector()	类似CSS选择器
children	获取所有子元素
classList	获取元素的类，可通过add, contains, remove, toggle进行操作
innerHTML/innerText	获取或修改元素内部的HTML或Text
document.readyState	两个值loading和complete，用于监听文档加载状态
offsetWidth/offsetHeight	获取元素的实际宽高
offsetWidth/offsetHeight	获取元素的内容宽高(不包含边框)
offsetTop/offsetLeft	获取元素距离父元素的距离
getBoundingClientRect()	获取元素距离页面视口的位置已经元素的宽高（包边框）

2.3 遍历

2.3.1 深度优先

1. NodeIterator
   参数： 遍历起始节点，访问节点的类型，节点过滤器

const iterator = document.createNodeIterator(document.documentElement, NodeFilter.SHOW_ELEMENT, null)
let node = iterator.nextNode()
while (node) {
    console.log(node.tagName)
    node = iterator.nextNode()
}

2. TreeWalker
   参数，同上
   使用方法：同上
   除了nextNode() 和previousNode() 方法外，额外提供了 parentNode() 、firstChild() 、 lastChild 、nextSibling()、previousSibling()等方法，用于提供各个方向的遍历，不再局限于深度优先

2.3.2 广度优先

const nodeList = [document.documentElement]
while (nodeList.length) {
    const node = nodeList.shift()
    nodeList.push(...node.children)
    console.log(node.tagName)
}

3. 事件

事件提供了Javascript 与 HTML文档间的交互功能，是文档或浏览器中发现一些特定交互的瞬间，可以用侦听器来预订，是一种观察者模式的设计模型。

3.1 事件流

描述了从页面中接收事件的顺序。

1. 事件冒泡：从触发事件开始时的元素逐层向上级传播至顶层的过程
2. 事件捕获：从最顶层开始逐层向下传播至触发事件的元素的过程
3. 事件流：顺序依次为事件捕获阶段，处于目标阶段，事件冒泡阶段

3.2 事件处理程序

1. Dom0级：后面定义的覆盖前面

const btn = document.getElementById('btn')
btn.onclick = function () {
    console.log(1)
}
btn.onclick = function () {
    console.log(2) // 2
}

删除事件：

btn.onclick = null

2. Dom2级：绑定多个可以同时触发，触发顺序为定义顺序

const btn = document.getElementById('btn')
btn.addEventListener('click', function () {
    console.log(1) // 1
})
// true表示捕获阶段触发，btn是事件触发起始元素，不存在捕获冒泡阶段，仍然按定义顺序触发
btn.addEventListener('click', click, true) 
function click() {
    console.log(2) // 2
}

删除事件：

// 匿名函数定义的事件无法移除
btn.removeEventListener('click', click)

3.3 事件对象

属性或方法	说明
currentTarget	绑定事件处理函数的元素
target	触发事件的元素
preventDefault()	阻止默认事件触发
stopPropagation()	阻止事件冒泡
eventPhase	获取事件所处阶段。1.捕获，2.目标，3.冒泡

3.4 事件类型

只罗列几个常用的页面级事件

事件方法	说明
window.onload()	页面加载完触发，包括图像，文件等资源
document.DOMContentLoaded	Dom构建完成后触发（浏览器刷新按钮也是）
window.beforeunload	页面卸载前触发
window.hashchange	页面URL中hash发生变化时触发

3.5 事件委托

指定一个事件处理程序来管理一种类型的所有事件，利用事件冒泡来解决事件处理程序过多的问题。

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
document.getElementById('ul').addEventListener('click', function (e) {
    console.log(e.target.innerText)
})

3.6 事件模拟

模拟流程：创建事件 => 初始化事件对象 => 触发事件

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
const ul = document.getElementById('ul')
ul.addEventListener('click', function (e) {
    console.log(e.target.innerText)
})
const event = document.createEvent('MouseEvents')
event.initEvent('click', true, true)
ul.firstElementChild.dispatchEvent(event)