DOM day_04(7.12)BOM、打开新页面（延迟打开）、地址栏操作、浏览器信息读取、历史操作

复习

1.冒泡机制

（1）当子元素上发生事件时, 可以传递其父元素

（2）事件委托:

• 通过父元素帮助子元素完成事件
• 适合场景: 动态新增的子元素

（3）事件参数

• target: 此属性存储触发事件的 当事元素
• stopPropagation: 阻止冒泡事件

2.阻止默认事件: 事件参数中的 preventDefault. 主要用于超链接

3.鼠标点击的事件参数, 几组坐标值

• screenX, screenY: 相对屏幕左上角
• x, y: 相对浏览器内容区域的左上角
• offsetX, offsetY : 相较于点击事件发生的当事元素左上角

4.页面滚动事件: onscroll

• 读取偏移量: document.documentElement.scrollTop || document.body.scrollTop

5.属性的旧版本操作

• getAttribute: 获取某属性的值
• setAttribute: 设置某属性的值

6.JS方式创建DOM元素

（1）追求极致性能: 放弃用HTML代码来书写, 直接用JS代码

document.createElement(标签名)

（2）文档片段: 提高 遍历创建DOM元素时的性能消耗

把遍历生成的DOM的元素先放在片段里, 最后把片段放到页面上

7.DOM的封装(选修)

• 利用函数的封装技巧, 把原生DOM进行了简化.
• document.querySelectorAll -> $
• 提供了更多的原型方法, 自动实现遍历
• 这套思想就是 jQuery 的封装思想

• • 这套思想就是 jQuery 的封装思想

DOM的套路就两点:

• 先找到要操作的元素

  • 多个元素, 则需要遍历

• 操作元素的属性

一、BOM

Browser Object Model: 浏览器对象模型

• 用于操作浏览器上的各种属性

 二、打开新页面

 三、地址栏操作

 

 四、浏览器信息读取

 五、历史操作