BOM和DOM
BOM---->Browser Object Model
-浏览器对象模型，浏览器的操作内容都是在对象的方法操作
-浏览器顶级对象window
- 在全局中定义的变量其实就是在window身上作为属性
- 全局中this 指向window
- 全局中的top 指向window
- 全局中的name属性在window上有，属性值是字符串
浏览器的尺寸
-innerWidth（宽）、innerHeight（高） 获取浏览可视窗口的宽高(包含了滚动条)
弹出层
1、alert() 提示弹框 没有返回值
2、confirm() 询问弹窗
- 当我们点确定的时候返回true
- 当我们点取消的时候返回false
3、prompt() 提示输入弹窗
- 当点击取消的时候返回null
- 当输入并点击确定的返回输入的内容(如果啥也没写返回空字符串)
浏览器的地址
- location 对象中就存储而来浏览器的地址信息
1.location.href
- location对象中href属性就是浏览器访问的完整地址
-会将地址中的中文转码为url中的编码格式
-也可以通过设置location.href属性来实现浏览器的跳转 会直接跳转到指定的url地址
2.location.reload() 重新加载页面
- 这个方法不要写在全局中
3.loaction中的其他属性
- hash 地址中#后面的东西
- host是访问地址主机的地址 localhost
- search是浏览器中?后面的内容
History
- 在对象history上记录了浏览器的历史记录
- 前提是要有历史记录,
- history对象中的lenght属性 如果为1表示没有历史记录
1.history.back() 回到历史记录的上一个页面
2.history.forward()去到历史记录中的下一个页面
3.history.go(n) 去到历史记录中指定的页面
- 括号里为负数相当于回到上一个页面
- 括号里为正数相当于回到下一个页面
浏览器的版本信息
- 在对象navigator中记录了浏览器的各种信息
语法：navigator.属性值
-appName获取到浏览器的名字 html5的兼容问题 不一定有效
-appversion浏览器的版本 不一定有效
-platform 浏览器运行的环境版本 不一定有效
-userAgent 获取浏览器的版本信息
浏览器事件
1. 浏览器的滚动事件 scroll 当滚动条动起来的时候触发的事件
-浏览器页面的滚动距离，浏览器卷去的距离
-通过scrollTop和scrollLeft获取垂直和水平卷去的距离
- 获取页面卷去的距离 会有兼容问题
-document.body.scrollTop 当页面没有使用DOCTYPE声明的时候可以获取到
-document.documentElement.scrollTop当页面有使用DOCTYPE声明的时候可以获取到
2. 浏览器的页面加载事件 load
- 当浏览器页面中的内容(页面结构,文本，图片,css,js等资源)全部加载完毕后会触发的事件
3. 浏览器的页面可视窗口变化事件 resize
-当浏览器窗口大小变化的时候会触发
定时器分两种：
- 定时器都有一个返回值：返回定时器的标识id(就是数字标识)
1. 间隔定时器 setInterval()
语法： setInterval(函数,时间); 时间单位是毫秒
-每隔一段时间就运行一次函数
-返回定时器标识id
2. 倒计时定时器（爆炸定时器）
- 语法：setTimeout(函数,时间) 时间单位是毫秒
-过一段时间会执行函数
-返回定时器标识id
如何清除定时器
-语法：clearInterval(定时器标识) 关闭对应的定时器
- 语法：clearTimeout(定时器标识) 关闭对应的定时器
定时的执行是异步代码执行：
-同步执行：代码按顺序执行
-异步执行：代码不按顺序执行，先执行同步代码，当所有同步代码执行完毕，才开始执行异步代码
DOM --->Document Object Model
文档 对象 模型
-文档对象模型: 操作页面中的节点
-doucument是DOM中的顶级对象其上一级是window对象
-获取页面中的特殊标签
-document.body 页面中body标签
-获取 页面中的 head 标签
- document.head
-获取页面中的title,也可设置页面的title
-document.title
获取DOM中的标签元素的方法
1. 通过id获取
-语法：document.getElementById(标签的id值)
- 返回对应的标签元素
-如果没有这个标签，则返回null
2. 通过类名获取 class的值
- 语法：document.getElementsByClassName(类名)
-返回对对应类名的标签组成 伪数组
-如果没有对应的类名 则返回空的伪数组
3. 通过标签名获取元素
-语法：document.getElementsByTagName(标签名)
//返回一个伪数组，里面是匹配的标签
//如果没有匹配到 则返回空的伪数组
4. 通过选择器获取元素querySelector()
- 语法:
document.querySelector(选择器)
- 选择器的写法和css中一样一样的
- 返回选择器匹配的第一个元素
- 如果选择器匹配不到元素 null
- 返回选择器匹配的所有元素的一个伪数组
5. 通过选择器获取元素querySelectorAll()
-语法：document.querySelectorAll(选择器)
-选择器的写法和css中一样一样的
-返回选择器匹配的所有元素的一个伪数组
-如果选择器选择不到，则返回空的伪数组
不建议直接通过id属性值作为标签元素在js使用
// console.log(one);//不建议使用
操作DOM属性
1.操作标签的内容
-innerText 获取设置标签的文本（不识别html标签）
-innerHTML 获取设置标签的超文本(识别html标签)
-设置都是覆盖性的设置
2. 操作标签属性
-getAttribute(属性名) 获取标签的属性值
-setAttribute(属性名,属性值) 设置标签的属性
-removeAttribute(属性名) 移除标签的属性
3. 标签的css样式操作
-style 获取到标签的所有行内样式
-style.样式名 获取设置标签的行内样式值
4. 操作标签的类名
- className 获取设置标签的类名
- 设置是覆盖性设置
