BOM 与 DOM
BOM ：Browser Object Model 浏览器对象模型，
提供操作浏览器的相关方法
核心对象 window ,浏览器窗口对象,是JS的顶层对象
DOM ：Document Object Model 文档对象模型，
提供操作文档的相关方法
核心对象 document ，操作文档
注意 ：
window -> document //window顶层对象包含document
document.write();
window.document.write();
BOM(window对象)
1. 作用 ：浏览器窗口对象
全局变量和全局函数，都是window对象的属性和方法
window在使用时可以省略
et :
var a = 10;
window.b = 10;
console.log(a,window.b);
function sum(a,b){
}
window.sum = function (){};
sum();
window.sum();
2. 对话框
1. alert("");
警告框 window.alert();
2. prompt("");
输入框 window.prompt();
3. confirm("是否确定");
确认框 返回布尔值，只有当用户点击“确定”时，
才返回true，其他都返回False
3. 定时器方法
作用 ：按照指定的周期或者时间间隔，来调用函数或者计算表达式
1. 周期性定时器 / 间歇调用
1. 特点 ：每隔一段时间就执行一遍代码
2. 语法 ：
var timer = setInterval(fun,duration);
window.setInterval();
参数 ：
fun : 表示要执行的操作，可以是函数，
也可以直接使用匿名函数
duration ：时间间隔，
隔多少时间执行一次代码
单位是 ms （毫秒）
返回值 ：
timer : 表示当前定时器的ID ，就是一个整数，
可以区分不同的定时器，
清除定时器时使用
3. 清除定时器
clearInterval(timer);
参数 ：定时器的ID
2. 一次性定时器 / 超时调用
(1) 特点 ：在指定的时间间隔之后，执行一次操作
(2)语法 ：
var timer = setTimeout(fun,delay);
参数 ：
fun : 要执行的操作
delay : 时间间隔，隔多久再执行相应操作
返回值 :
timer ：定时器ID，在清除定时器时使用
(3)清除定时器 ：
clearTimeout(timer);
4. window中的属性
window中的属性，本身又是一个对象
1. screen对象
访问屏幕对象 ：console.log(screen);
console.log(window.screen);
作用 ：获取客户端显示器相关的信息
属性 ：
1. width /height 获取屏幕的宽高
2. availWidth /availHeight
获取屏幕实际可用的宽高（减去任务栏之后的值）
2. history 对象
作用 ： 包含当前窗口访问过的所有URL
属性&方法 ：
1. length 属性 ：获取当前窗口访问过的url
的数量
2. 方法 ：
1. back() 后退
2. forward() 前进
3. go(num) 跳转几步
num 取值为整数，可正可负
在当前网页的基础上前进/后退几步
3. location 对象
作用 ：location 保存的是浏览器地址栏的信息
属性 ：
href : 获取当前窗口正在浏览的网页url
如果给href属性赋值，就相当于页面跳转
方法 ：
reload() 重载，相当于刷新
reload(true) : 忽略缓存，从服务器端加载
reload(false) : 从缓存中加载（默认）
4. navigator 对象
作用 ：保存浏览器相关的信息
属性 ：
userAgent ：显示信息
DOM (ducument对象)
1. 介绍 ：
document对象，是DOM中的顶层对象，封装了所有的HTML元素
相关的属性，方法以及事件
2. 节点（对象）
网页在加载过程中，会自动生成一颗节点树（DOM树），DOM树会封装网页上所有的内容。网页中的每一个元素每一段文本，甚至注释，都会被封装成DOM树中单独的一个节点
1. 节点分类
1. 元素节点 - 网页中的一个元素（标签）
2. 属性节点 - 标签中的一个标签属性
3. 文本节点 - 表示标签中的文本内容
-------------------------------
4. 注释节点 - 网页中的注释
5. 文档节点 - 表示整个文档
2. 节点操作
1. 获取节点
2. 读取节点
3. 修改节点
4. 删除节点
5. 创建节点
3. 获取元素节点
1. document.getElementsByTagName('a');
通过制定的标签名获取元素节点，返回
节点列表（数组），可以根据下标获取具体的
元素节点对象
2. document.getElementsByClassName('');
根据元素class属性值查找，返回节点列表
3. document.getElementsByName('');
根据元素name属性值查找，返回节点列表
一般用于查找表单元素
4. document.getElementById('');
根据元素id属性值查找，返回具体的元素节点对象
注意 ：
脚本标签的书写位置，要放在body之后
DOM 属性：
1. innerHTML :
修改/获取元素节点中的HTML文本，可识别标签
2. innerText :
修改/获取元素节点中的普通文本，不能识别标签
3. value :
该属性只针对表单控件，允许获取或修改表单控件的值
3.DOM节点操作
1. 增加节点
1. 创建元素节点和文本节点
语法 ：
元素节点 : var div = document.createElement('div');
文本节点 : var text = document.createTextNode('');
注意 ：
属性节点可以通过元素节点的点语法直接访问和设置
2. 添加节点
DOM中对节点的插入 删除 追加操作，都由父元素执行
1. 在父元素中动态追加子节点
语法 ：
父节点.appendChild(子节点);
et :
var div = document.createElement('div');
//将div追加到body中
document.body.appendChild(div);
div.parentNode.append(div);
注意 ：文本节点也是元素的子节点
et :
var text = document.createTextNode('hello');
//追加到div中显示
div.appendChild(text);
2. 在文档的指定位置插入节点
语法 ：
parentNode.insertBefore(newElem,oldElem);
将newElem节点插入到oldElem节点之前
et:
var h1 = document.createElement('h1');
//将h1插入在div之前
document.body.insertBefore(h1,div);
3. 删除节点
1. 如果是删除body的子元素
document.body.removeChild(elem);
2. 如果元素层级结构较多，就需要通过父节点parentNode
执行删除操作
parentNode.removeChild(elem);
