现在主流的前端框架Vue和React都是数据驱动式框架，大多数情况下实现页面交互和修改只需要操作数据，只有在少数情况下需要通过JS操作html中的元素实现交互效果，那么就需要了解DOM和BOM。DOM（文档对象模型）：提供操作dom节点的API；BOM（浏览器对象模型）：浏览器提供的一些API。

DOM

获取元素

搜索和遍历，所谓搜索是指以根节点向下获取元素；而遍历是指以当前元素为基准获取四周的元素。

1、基准节点

1. document: 根节点，
2. document.documentElement: html元素
3. document.head
4. document.body

2、元素搜索（方法）

1. document.querySelector('选择器'): 返回第一个匹配成功的元素;
2. document.querySelectorAll('选择器'): 返回匹配成功所有元素的集合（类数组NodeList）;
3. document.getElementById('id选择器'): 返回通过id匹配成功的元素;
4. document.getElementsByClassName('类选择器'): 返回匹配成功所有元素的集合（类数组HTMLCollection）;
5. element.closest('选择器'): 从下往上搜索元素。

3、元素遍历（属性）

获取元素：children、firstElementChild、lastElementChild、parentElement、previousElementSibling、nextElementSibling;
获取节点：childNodes、firstChild、lastChild、parentNode、previousSibling、nextSibling。

注：元素和节点的区别，元素指html文件中一个标签对于的对象，而节点更细化，有元素节点、文本节点、文档节点等等。元素用得更多。

获取元素节点文本内容：emement.textContent，对于输入控件element.value

有用的方法：

1. node.contains(newNode): 判断newNode是否是Node的子节点
2. node.matches('选择器'): 判断node与传入的选择器是否匹配

修改样式

1、直接修改

el.style.styleName = "value"，CSS以-分割的要写驼峰式。

2、通过类名修改

使用el.classList的几个方法对类名的增删（常用），el.className赋值一个字符串。

1. add(): 添加类名
2. remove()：删除类名
3. taggle(): 存在就删除，不存在就添加
4. contains(): 判断classList是否包含某个类名
5. replace(): 替换里面的某个类名（不常用）

存储数据

1、通过对象的方式

DOM元素本身是一个对象，可以通过el.xxx=xxx的形式直接存储数据。

2、通过自定义属性

为HTML标签添加自定义属性，约定以data-开头的数据为自定义属性，js赋值通过el.dataset.xxx=xxx，在页面中节点上会显示data-xxx。

元素创建、添加、删除

1. 创建元素：document.createElement('标签名')
2. 添加元素：parent.append(el)
3. 删除元素：el.remove()
4. 替换元素：old.replaceWith(new)

注：append是追加元素，还有在其它位置插入元素的方法。查看更多

元素大小

1. el.getBoundingClientReact()：获取当前元素距离视窗的距离。
2. offsetWidth：元素占据空间的大小，包括滚动条。
3. clientWidth：元素可利用区域大小，不包含滚动条。
4. scrollWidth：元素内容占据空间的大小。

注：offset、client、scroll对应还有以Height、Left、Top为后缀的属性值。

事件

1、事件部署

1. 通过DOM属性部署on+事件名称，即el.onEventName = function。
2. 通过window.addEventListener()添加事件监听。

2、事件移除

1. 通过DOM属性部署on+事件名称，即el.onEventName = null。
2. 通过window.removeEventListener()移除事件监听。

3、常见事件

1. 鼠标事件：click、mousedown、mouseup、mousemove
2. 键盘事件：keydown、keyup
3. 表单事件：input、change、focus、blur
4. 特殊事件：load(浏览器加载完资源)、DOMContentLoaded(加载完HEML并构建DOM树，只能使用事件监听器部署)
5. 自定义事件：new Event('事件名')创建事件，el.dispatchEvent()

注：在事件回调函数中第一个参数默认为事件对象，通过e.target获取触发事件的元素。使用e.preventDefault()取消浏览器默认行为（比如右键菜单）

4、事件代理（事件委托）

利用事件冒泡的原理，将相同行为事件部署到父元素上，通过e.target判断触发的元素，执行不同的操作。

BOM

window

全局对象，提供了一些api，常见的有定时器、事件侦听器、窗口交互等。比较常用的有：

1. 窗口滚动：scrollTo()，可以用来实现点击回到页面顶部
2. 事件：resize（窗口大小的改变）、scroll（监听页面滚动）
3. 视窗大小：.scrollX，.scrollY
4. 设备像素比(dpr)：devicePixelRatio

screen

屏幕对象，常用判断横屏或竖屏。 screen.orientation.onchage 监听横屏竖屏的切换。

history

控制页面跳转和查看历史记录。

navigator

浏览器信息，包括剪切板，地理位置等。

lacation

地址栏，获取url信息。

数据存储

1、浏览器存储

强缓存和协商缓存

2、前端存储

cookie、storage、数据库

网络请求（ajax）

注：BOM对象有很多属性，但一般情况下不会使用，获取详细属性可以在控制台输出相应对象查看获取，没必要完全记住。由于现在使用原生js开发的情况特别少，在vue框架下，几乎不用操作DOM元素，各种方法只需要掌握一个够用就行，遇到兼容性问题查月MDN等权威网站资料。后续还会更新补充，我觉得这种内容的更新局限于基础知识的掌握，在应用方面并不能提供很多的参考。为此更关注于实际开发中困难及可复用代码的分享。