BOM

浏览器作为JavaScript的重要运行环境，其本身作为一个应用程序需要对其自身进行操作，所以浏览器会有对应的对象模型BOM(Browser Object Model)

我们可以将BOM看成是连接JavaScript和浏览器窗口的桥梁

主要对象模型

  • window
  • location
  • history
  • document

window

作为全局对象

  • 在全局作用域下通过var声明的变量会添加到全局变量中
  • 全局提供了许多内置函数和对象

作为窗口对象

  • 提供大量浏览器属性

    • localStorage,console,location,history,screenX,scrollX等60+属性

  • 提供大量浏览器方法

    • alter,close,scrollTop,open等40+方法

  • 提供大量浏览器事件

    • focus,blur,load,hashchange等30+事件

  • 继承EventTarget方法

    • addEventListener,removeEventListener,dispatchEventListener

location

属性

  • hash哈希值
  • host主机地址：主机名+端口号
  • hostname主机名
  • href完整地址
  • origin源：协议+主机名+端口号
  • pathname路径
  • prot端口号
  • protocol协议
  • search查询字符串

方法

  • assign(url)跳转地址
  • replace(url)替换地址，无法回退
  • reload([boolean])重新加载页面，可选择强制加载

history

访问浏览器曾经的会话历史记录

属性

  • state当前保留的状态值
  • length会话中记录的条数

方法

  • go(number)加载历史中的某一页

  • back()返回上一页

  • forward()前进下一页

  • pushState(state,title[,url])在浏览器会话的历史堆栈中添加状态

    1. /*
    2. 可模拟跳转地址，但其实只是状态改变而不会刷新网页，路由就借此实现，通过检测状态的改变而改变组件的渲染
    3.   state:保存的状态
    4.   title:跳转后的title，已无效
    5.   url:状态的地址
    6. */
  • replaceState(state.title[,url])替换状态

DOM

DOM(Document Object Module)文档对象模型

  • DOM提供了一系列模型和对象，用来操作Web页面

22.BOM-DOM-Event - 图1

EventTarget

  • addEventListener
  • removeEventListener
  • dispatchEventListener

Node

属性

  • nodeName
  • nodeType
  • nodeValue
  • childNodes返回子节点NodeList

方法

  • appendChild()

注意

虽然document继承Node，拥有appendChild()等操作元素方法，但可能浏览器做了特殊处理，不允许直接在document里使用(可能是document里不允许增删改Node元素，只能在document.body的body元素里操作)

Document

Element

Event事件对象

事件监听方式

DOM0

  1. <!-- 方式一 -->
  2. <div onclick="foo">方式一</div>
  1. /* 方式二 */
  2. const div=document.querySelector("div")
  3. div.onclick=function(){
  4.   console.log("foo")
  5. }

DOM3

  1. /* 方式三 */
  2. const div=document.querySelector("div")
  3. div.addEventListener("click",()=>{
  4.   console.log("foo")
  5. })

事件流(事件捕获和冒泡)

早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题，但是他们采用了完全相反的事件流来对事件进行了传递

IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式

事件对象

常见属性

  • type事件种类

  • target当前事件发生元素

  • currtTarget当前事件处理元素

  • offsetX,offsetY点击元素的位置

常见方法

  • preventDefault()取消事件的默认行为
  • stopPropgation()阻止事件的进一步传递