从零开始学习DOM-BOM(一)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

前言

我们都知道，Javascript是由ECMAScript，DOM，BOM组成的。但是很多开发小伙伴对DOM，BOM缺乏一个系统的认识，今天这篇文章主要讲述DOM和BOM的体系化知识。

ECMAScript，描述了该语言的语法和基本对象，如类型、运算、流程控制、面向对象、异常等。 文档对象模型（DOM），描述处理网页内容的方法和接口。 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

BOM

认识BOM

• JavaScript有一个非常重要的运行环境就是浏览器，而且浏览器本身又作为一个应用程序需要对其本身进行操作，所以通常浏览器会有对 应的对象模型(BOM，Browser Object Model)。
  • 我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。
• BOM主要包括一下的对象模型:
  • window:包括全局属性、方法，控制浏览器窗口相关的属性、方法;
  • location:浏览器连接到的对象的位置(URL);
  • history:操作浏览器的历史;
  • document:当前窗口操作文档的对象;
• window对象在浏览器中有两个身份:
  • 身份一:全局对象。 我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global; 在浏览器中就是window对象;
  • 身份二:浏览器窗口对象。 作为浏览器窗口时，提供了对浏览器操作的相关的API;

Window全局对象

在浏览器中，window对象就是之前经常提到的全局对象，也就是我们之前提到过GO对象:

• 比如在全局通过var声明的变量，会被添加到全局环境变量中，也就是会被添加到window上;
• 比如window默认给我们提供了全局的函数和类:setTimeout、Math、Date、Object等;

var message = 'hello'
function foo(){
    console.log("foo")
}
console.log(window.message)
window.foo()

 window.setTimeout(()=>{
     console.log('setTimout')
 })
 
 const obj = new window.Object()
 console.log(obj)

Window窗口对象

window是一个复杂的大对象，包含了大量的对象和方法

• 第一:包含大量的属性，localStorage、console、location、history、screenX、scrollX等等(大概60+个属性);
• 第二:包含大量的方法，alert、close、scrollTo、open等等(大概40+个方法);
• 第三:包含大量的事件，focus、blur、load、hashchange等等(大概30+个事件);
• 第四:包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法; 参考地址：MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window

image.png

window常见的属性

// screenX和screenY属性返回窗口相对于屏幕的X和Y坐标。
console.log(window.screenX)
console.log(window.screenY)

// 监听滚动
window.addEventListener("scroll", () => {
   console.log(window.scrollX, window.scrollY)
})
// 获取窗口的宽度与高度：
console.log(window.outerHeight)
console.log(window.innerHeight)

window常见的方法

const scrollBtn = document.querySelector("#scroll")
scrollBtn.onclick = function() {
    //1.scrollTo
    window.scrollTo({ top: 2000 })

    //2.close
    window.close()

    // 3.open
    window.open("http://www.baidu.com", "_self")
}

window常见的事件

// 整个页面以及所有资源加载完成
window.onload = function() {
  console.log("window窗口加载完毕~")
}

window.onfocus = function() {
  console.log("window窗口获取焦点~")
}

window.onblur = function() {
  console.log("window窗口失去焦点~")
}

//hash 改变
const hashChangeBtn = document.querySelector("#hashchange")
hashChangeBtn.onclick = function() {
  location.hash = "aaaa"
}
window.onhashchange = function() {
  console.log("hash发生了改变")
}

Navigator 对象

Navigator 对象包含有关浏览器的信息。

Navigator 对象常见的属性

window.navigator.appCodeName
//返回浏览器的代码名   'Mozilla'
window.navigator.appName
//返回浏览器的名称 'Netscape'
window.navigator.appVersion
//返回浏览器的平台和版本信息
//'5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'
window.navigator.cookieEnabled
//返回指明浏览器中是否启用 cookie 的布尔值 true
window.navigator.platform
//返回运行浏览器的操作系统平台 'MacIntel'
window.navigator.userAgent
//返回由客户机发送服务器的user-agent 头部的值
//'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36'

Location 对象常见的属性

• href: 当前window对应的超链接URL, 整个URL;
• protocol: 当前的协议;
• host: 主机地址;
• hostname: 主机地址(不带端口);
• port: 端口;
• pathname: 路径;
• search: 查询字符串;
• hash: 哈希值;
• username:URL中的username(很多浏览器已经禁用);
• password:URL中的password(很多浏览器已经禁用); Location 对象常见的方法

Location 对象常见的方法

• assign:赋值一个新的URL，并且跳转到该URL中;
• replace:打开一个新的URL，并且跳转到该URL中(不同的是不会在浏览记录中留下之前的记录);
• reload:重新加载页面，可以传入一个Boolean类型;如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。

location.assign("http://www.baidu.com")
location.href = "http://www.baidu.com"

location.replace("http://www.baidu.com")
location.reload(false)
 

history 对象

history对象允许我们访问浏览器曾经的会话历史记录。

history对象有两个属性

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

history对象有五个方法:

• back():返回上一页，等价于history.go(-1);
• forward():前进下一页，等价于history.go(1);
• go():加载历史中的某一页;
• pushState():打开一个指定的地址;
• replaceState():打开一个新的地址，并且使用replace;

总结

BOM 对象常用的就这些，后面我们会继续介绍DOM对象，一般不建议去背记这些api，只需要建立一个系统的知识体系，当下次再次遇到，有印象，去MDN查找相关文档，我想这就是有意义的。