DOM与BOM核心用法解析
1.DOM
1.1 概念
DOM也称为文档对象模型，用于操作HTML/XML的内容、样式、结构。DOM把网页看成一个文档(document)，页面中的标签为元素(element)，网页的所有的内容都是节点(node)。每一个节点都是DOM对象。并且DOM是W3C 统一标准，各浏览器实现基本一致。
1.2 使用
常用的DOM成员：document(文档)、element(标签)、text(标签中的文字)、attr(标签上的属性)，
常见的方法：getElementById、 getElementsBy*、querySelector、querySelectorAll、createElement、appendChild、addEventListener。
扩展：querySelector(All)和getElementById / getElementsBy*的区别
- 语法：querySelector(All)('选择器')支持任意 CSS 选择器字符串(包括
#box li:first-child)去获取DOM对象；而getElement*('')只能按 id、tag、name、class 单一条件获取DOM对象。 - 返回类型：querySelector(All)返回静态 NodeList（querySelectorAll）或单个 Element（querySelector）；而getElement*返回单个 Element（ById）或实时 HTMLCollection（ByTagName/Name/Class）
- 性能和兼容性：querySelector(All)性能较慢，并且只支持IE8+的浏览器；getElement*性能较快，兼容性好。
- 使用场景：querySelector(All) 返回静态列表，语法灵活适合DOM 动态增删；getElement* 返回实时集合，简单场景更快。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>document</title></head><body><div class="box"><input type="text" placeholder="请输入评论" id="input" /><button id="btn">发布评论</button><ul id="ul"></ul></div><script>// 获取DOM对象const input = document.getElementById("input");const btn = document.getElementById("btn");const ul= document.querySelector("#box")const box = document.querySelector(".box")</script></body>
</html>
2.BOM
2.1 概念
浏览器对象模型，提供了独立于内容而是与浏览器窗口进行交互的对象，核心对象是window，把浏览器当作一个对象。 操作浏览器窗口及浏览环境本身。下图是BOM的构成：
window对象：是JS访问浏览器窗口的一个接口，并且是一个全局对象，可以使用所有的属性和方法。
2.2 使用
window.onload = function() {}事件：会等待所有文档内容加载完成后才触发其中的函数，该事件只能触发一次，若有多个则以最后一个为准。setTimeout()定时器：调用时可以省略window，语法：setTimeout(function() {}, 延迟时间)，clearTimeout(定时器ID)清除定时器。只调用一次函数setInterval()定时器：每隔一段时间，就调用一次回调函数，语法：setInterval(function() {}, 延迟时间)location对象：window对象提供了location属性去获取URL(统一资源定位符)
location.href属性：获取或设置整个URL，可以进行跳转。location.assign()方法：重定向页面location.reload()方法：重新加载页面，相当于强制刷新
navigator对象：包含浏览器的信息，常用的是
userAgent，该属性可以返回user-agent头部的值history对象：与浏览器的历史记录进行交互
back()：后退功能
forward()：前进功能
go(参数)：前进后退都行，参数为1是前进，参数为-1是后退