JavaScript概念

  • ECMAScript
  • DOM
  • BOM

什么是BOM？

BOM ：Browser Object Model（浏览器对象模型），BOM提供了独立于内容的、能够与浏览器窗口进行滑动的对象构造，就是浏览器提供的API。

其次要对象有：

  1. window对象：BOM的外围，是js拜访浏览器的接口，也是ES规定的Global对象。

  2. location对象：提供读取和操作URL信息的属性和办法。即是window对象的属性，也是document对象的属性。

    document.location === window.location; // returns true
  3. navigation对象：提供无关浏览器的零碎信息。
  4. history对象：用于保留浏览器历史信息。
  5. screen对象：用于获取浏览器窗口及屏幕的宽低等信息。

window对象

window对象是整个浏览器对象模型的外围，其扮演着既是接口又是全局对象的角色。

window对象提供对以下内容的拜访：

  • 全局属性

    // 地位信息window.screenLeftwindow.screenTopwindow.screenX    window.screenY    // 宽高const outerHeight = window.outerHeight;const outerWidth = window.outerWidth;const innerHeight = window.innerHeight;const innerWidth = window.innerWidth;

  • 全局办法

    // 地位信息moveBy(x,y)moveTo(x,y)// 宽高resizeTo(width, height)resizeBy(width, height)// 弹窗alert()    confirm()prompt()// 定时器const timeout = setTimeout(callback, delay); // delay in msconst interval = setInterval(callback, delay); // delay in msclearTimeout(timeout);clearInterval(interval);// 其余open()    onerror()

location对象

  • location.hash 返回URL中#之后的字符串，不蕴含#
  • location.host
  • location.hostname host蕴含端口，hostname不蕴含端口
  • location.href 返回以后页面的残缺URL。 咱们也能够写入这个属性，从而重定向到新页面。
  • location.pathname 返回hostname之后的任何内容
  • location.port
  • location.protocol
  • location.search 返回URL中?之后的字符串，蕴含?
  • location.assign(url) 导航到作为参数传入的 url
  • location.replace(url) 与assign办法相似，但被替换的站点会从会话历史记录中删除
  • location.reload() 这与单击浏览器上的从新加载按钮具备雷同的成果

navigator对象

  • navigator.userAgent
  • navigator.language 浏览器首选语言
  • navigator.languages 返回用户已知语言的数组，按偏好排序：["en-GB", "en-US", "en"]
  • navigator.geolocation 返回设施的地理位置信息，对象类型
  • navigator.appName 返回浏览器名称
  • navigator.appVersion 返回浏览器版本
  • navigator.platform 返回浏览器平台名称

history对象

  • history.length 返回一个整数，示意会话历史记录中的元素数量，包含以后加载的页面，只读
  • history.go(integer)
  • history.back(integer)
  • history.forward(integer)
  • history.state 返回在history栈顶的任意值的拷贝。通过这种形式能够查看state值，不用期待popstate事件产生后再查看
  • history.pushState(object, title, url) object为随着状态保留的一个对象，title为新页面的题目，url为新的网址
  • replaceState(object, title, url) 与pushState的惟一区别在于该办法是替换掉history栈顶元素

popstate事件

当流动历史记录条目更改时，将触发popstate事件。调用history.pushState()和history.replaceState()办法不会触发。而用户点击浏览器的后退/后退按钮时会触发，调用history对象的back()、forward()、go()办法时，也会触发。popstate事件的回调函数的参数为event对象，该对象的state属性为随状态保留的那个对象。