前言

进入dom操作的学习，我们学习的js也有用武之地了，终于能跟HTML连接起来了。可以操作便签了，js的学习也将不会那么枯燥了，想实现的效果也能实现了，比如轮播图啊，选项卡啊，全选，反选等项目中常见的，但是英文单词也变得多的多，大家也是要做好准备，问题不大，难的是理解哦！

js的三大组成

js : ECMAScript + BOM + DOM

ECMA:[Ecma国际]通过ECMA-262标准化的脚本语言
BOM:browser object model 浏览器对象模型
DOM:document object model 文档对象模型

BOM

BOM介绍

BOM:浏览器对象模型，每个浏览器窗口都是一个window对象。
（前面我也说过万物皆对象，每个浏览器窗口都是一个window对象，里面包含很多属性，自有属性和自定义属性。在没打开一个浏览器时，就已经默认创建了一个window对象，注意每一个页面不共享window，每次创建的全局变量和函数都是属于window对象的属性和方法）

BOM常见的属性

navigator userAgent 会详细的显示浏览器的版本信息 console.log(navigator.userAgent);

location 地址栏(用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。)

href 整个网址
host 域名 + 端口号
hostname 域名
port 端口号
protocal 协议(http / https)
search 问号后面的一串表单提交的数据
hash 井号后面的一串锚点
assign() 跳转至新的页面
replace() 替换当前页面-- - 不会被历史记录
reload() 刷新页面(不怎么用)
history 历史记录

length 在同一个窗口打开过几个页面
forward() 前进
back() 后退
go(1 / -1) 可进可退（返回上一页，下一页）
document 文档 DOM实际上是BOM的一部分

BOM方法

open() 打开新的浏览器窗口网页重定向(默认被拦截)
close() 关闭本窗口

BOM事件

load事件：等待页面资源加载完毕之后执行用法：.onload
scroll 页面滚动时触发这个事件 --- 高频率触发的事件(后面说怎么解决（防抖和节流）) 用法：.onscroll
resize 窗口大小大声改变时触发此事件 --- 高频率触发的事件用法：.onresize
onblur 在对象失去输入焦点时触发。(切换浏览器窗口会触发)
onfocus 当对象获得焦点时触发。 注意： DOM会有延迟。页面在获取焦点的时候，会优先使用现有的资源，而失去焦点的页面的资源会延后—不等于不处理。

绑定多个事件

首先想到的肯定是通过循环遍历来绑定事件，注意：事件触发的函数是异步
获取所有的元素 getElementsByClassName() 元素集合
this：在事件处理函数中使用，代表点击的那个对象（常用，理解清楚）

简单说说JavaScript三大组成部分

前言