DOM&&BOM

1. BOM

BOM: Browser Object Model 浏览器对象模型
Browser：浏览器
以车为例子简单解释
什么是BOM?
BOM是js的组成之一，他提供了独立与【内容与浏览器窗口】进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。
【BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。 】
2. BOM核心 【window对象【重重点】】
BOM 的核心对象是 window ，它表示浏览器的一个实例
在浏览器中， window 对象有双重角色，
它既是通过 js 访问浏览器窗口的一个接口，又是js的 全局（Global） 对象

window

1.属性
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

2.方法
prompt( ) 显示可提示用户输入的对话框
alert( ) 显示带有一个提示信息和一个确定按钮的警示框
confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框
close( ) 关闭浏览器窗口
open( ) 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( ) 在指定的毫秒数后调用函数或计算表达式
setInterval( ) 按照指定的周期（以毫秒计）来调用函数或表达式
window.onload = function(){};
window.onresize = function(){};
window.onscroll = function(){};
window.scrollTo(x,y)

3.事件
onload 一个页面或一幅图像完成加载
onmouseover 鼠标移到某元素之上
onclick 当用户单击某个对象时发生的单击事件
onkeydown 某个键盘按键被按下
onchange 域的内容被改变

history

1.属性：length

2.方法：
back() 加载 history 对象列表中的前一个url
forward() 加载 history 对象列表中的下一个url
go() 加载 history 对象列表中的某个具体url

location

1.属性
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL

2.方法
reload() 重新加载当前文档
replace() 用新的文档替换当前文档

document

1.常用的4中获取方式
document.getElementById(“id名字”) =》根据元素id来获取元素节点
document.getElementsByClassName(“className”)=>类名为className的标签，多个Element组成的集合【伪数组】
document.getElementsByTagName(“tagName”)
getElementByName(name):name属性

2.根据层次获取节点
textContent：textContent属性返回当前节点和它的所有后代节点的文本内容。返回：文本字符串【不是文本节点对象】
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
children: 获取子节点不包括文本节点【只读】返回：dom伪数组
firstElementChild 返回节点的第一个子节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点

3.操作节点
新增节点
createElement(tagName) 按照给定的标签名称创建一个新的元素节点
appendChild(nodeName) 向已存在节点列表的末尾添加新的子节点
dom.append() 可以用字符串代替文本节点。
insertBefore(newNode,oldNode) 向指定的节点之前插入一个新的子节点
cloneNode(deep) 复制某个指定的节点
删除节点
removeChild()：删除节点
replaceChild() ：替换节点

4.属性操作
getAttribute
setAttribute
removeAttribute
DOM.属性

5.样式操作
DOM.style = “”
DOM.style.属性 = “”
DOM.className=""
6.内容操作
innerHTML
innerText