HTML DOM+浏览器BOM

一： HTML DOM

1.HTML DOM：文档对象模型
JS操作HTML文档的接口，JS改变页面中的所有HTML元素、HTML属性、CSS样式，对所有世间做出反应;DOM是JS操作HTML和CSS的桥梁。
树型结构
eg:

2.nodeType
1 元素节点
3 文字节点
8 注释节点
9 docunment节点
10 DTD节点
3.节点的关系

二: HTML DOM 方法和属性

1.节点操作
(1)改变元素节点中的内容
innerHTML 以HTML语法设置节点中的内容
innerText 以纯文本的形式设置节点中的内容
(2)改变元素节点的CSS样式
例如：oBox.style.backgroundColor = 'blue';
(3)改变元素节点的HTML属性
打点更改即可
如果不是w3c，要使用setAttribute()和getAttribute()来设置、读取
(4)节点的创建、移除和克隆
1>创建：document.createElement()
创建出来的是孤儿节点，并没有被挂载到DOM树上，看不见，继续使用appengChild()/insertBefore()方法将孤儿节点插入到DOM树上。

父节点.appendChild(孤儿节点)；
父节点.insertBefore(孤儿节点)；

2>移动：appengChild(),insertBefore()

新父亲节点.appendChild(已经有父节的节点)；
新父亲节点.insertBefore(已经有父亲的节点，标杆子节点)

3>删除：removeChild()从DOM中删除

父节点.removeChild()

4>克隆节点:cloneNode()

var 孤儿节点 = 老节点.cloneNode()
var 孤儿节点 = 老节点.cloneNode(true),该节点的所有后代节点也都会被克隆

2.方法和属性
(1)访问元素节点常用的方法
document.getElementById() 通过ID获取元素
document.getElementByTagName() 通过标签名得到元素数组
document.getElementClassNmae() 通过类名得到元素数组
document.querySelvctor() 通过选择器得到元素
document.querySelectorAll() 通过选择器得到元素数组
(2)改变HTML元素
element.innerHTML = new html content 改变元素的inner HTML
element.attribute = new value 改变元素的inner HTML
element.setAttribute(attribute,value) 改变HTML元素的属性值
element.style.property = new style 改变HTML元素的样式
(3添加和删除元素
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流
3.事件监听
(1)onxxx,例如：onclick
document.getElementById(id).onclick=function(){code}
向onclick事件添加事件处理程序
(2)addEventListener()
(3)页面事件监听
onload 当页面/图像被完全加载
onunload 当用户退出页面
4.事件传播
盒子嵌套时事件监听的执行顺序：先从外到内，再从内到外
捕获阶段，冒泡阶段
5.事件对象
(1)鼠标位置
clientX,clientY 鼠标指针相对于浏览器的水平、垂直坐标
pageX,pageY 鼠标指针相对于整张网页的水平、垂直坐标
OffsetX,offsetY 鼠标指针相对于事件源元素的水平、垂直坐标
(2)e.preventDefault()方法，阻止事件产生的“默认动作”
6.事件委托
利用事件冒泡机制，将后代元素事件委托给祖先
e.target属性 触发此事件的最早元素，即“事件源元素”
e.currentTarget 事件处理程序附加到的元素
(1)批量添加事件监听
(2)新增元素动态绑定事件
7.定时器和延时器
setInterval()函数可以重复调用一个函数，再每次调用之间具有固定的时间间隔
例如：
setInterval(function(){ },2000)
clearInterval()消除一个定时器
延时器：setTimeout()
指定时间到了，会执行函数一次，不再重复执行
setTimeout是异步语句
函数节流：一个函数执行一次后，只有大于设定的执行周期后才允许执行第二次，借助setTimeout延时器
lock = true;

三：浏览器对象模型BOM

1.window对象：
当前JS脚本运行所处的窗口，这个窗口包含DOM结构，window.document属性就是document对象
1>全局变量是window的属性：多个JS文件之间共享全局作用域
2>内置函数普遍多是window方法 window.hasOwnProperty()
3>窗口尺寸相关属性
innerHeight,innerWidth内容区域的高度、宽度
outerHeight,outerWidth浏览器窗口的外高、外宽
获得不包括滚动条的窗口宽度用 document.documentElement.clientWidth
4>resize事件
窗口大小改变之后，就会触发resize事件，使用 window.onresize/window.addEventListener('resize')来绑定事件处理函数
5>已卷动高度
window.scrollY:垂直方向已滚动的像素值
6>scroll事件
在窗口被卷动之后，就会触发scroll事件、可以使用 window.onscrool/window.addEventListener('scroll')来绑定事件处理函
2.location对象
(1)window.location标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转
(2)重新加载当前页面
可以调用location的reload方法以重新加载当前的页面，参数true表示强制从服务器强制加载

window.location.reload(true);

(3)GET请求查询参数
window.location.search 当前浏览器的GET请求查询参数
3.history对象
window.history 模拟浏览器回退按钮
history.back() 点击浏览器回退按钮
history.forward()
历史记录长度

const historyLength = history.length

4.Navigator对象
window.navigator可以检索navigator对象，内含有用户此次活动的浏览器的相关属性和标识
1>属性
appName 浏览器官方名称
appVersion 浏览器版本
userAgent 浏览器的用户代理
platform 用户操作系统
5.Cookie
通过document.cookie，您可以读取和写入浏览器的Cookie。Cookie是一种存储在用户计算机上的小型文本文件，用于在多次访问之间存储和检索数据
读取：

const cookieValue = document.cookie

写入：

document.cookie = 'username=John;  expires=Fri,  31  Dec  2022  23:59:59  GMT; path=/';