前面我已经讲过，js就是运用ECMAScript去操作宿主环境的API来实现不同的功能的，如果js运行在浏览器上，则去操作D0M(Document Object Model)和BOM。
D0M(Document Object Model)
文档对象模型，是JS操作网页的接口。提供了与文档进行交互的对象，它的标准是由W3C定义的，是用来操作页面的。我们可以这样理解，只要是有操作页面的就和DOM有关。
<div id="box"></div>
<script>
const div=document.querySelector("div"); //{1}
div.innerHTML='黄小腿';//{2}
div.style.background='red';//{3}
console.dir(div);/{4}
<script>
我们通过了DOM提供的方法也就是api(document.querySelector),拿到了div行{1}。行{2}通过DOM提供的一个属性innerHTML,给div赋值。同时也可以通过DOM提供的style属性来操作背景颜色（background）行{3},这些都是对页面进行操作，但凡我们只要与页面打交道就必须和页面打交道。而DOM提供的这些方法属性都是对象。我们可以通过console.dir(div)行{4}可以看到DOM的大量属性，也可以看到它的原型__proto__以及它的构造函数HTMLDivElement
Node节点对象
我们知道一个页面的架构是由html标签组成的，而他们也就被称为网页中的骨架，而我们平常说的js操作网页，也就是用js去操作这些标签，而这些标签的专业名称就叫Node（节点），也叫Node节点对象，它有一下两大特点：
1、它不是一个构造函数，不能用new生成实例；
2、所有的节点都继承它的共享属性与共享方法；
Node对象的继承关系
Node对象的构造函数是EventTarget
共享属性（实例属性）
1、nodeName
2、nodeType
3、nodeValue
4、textContent
5、ownerDocument
6、childNodes
7、firstChild
8、lastChild
9、nextSibling
10、previousSibling
11、parentNode
12、parentElement
共享方法（实例方法）
1、appendChild()
2、insertBefore()
3、removeChild()
4、replaceChild()
5、cloneNode()
注意：前4个方法文档类型节点、属性节点、文本节点、注释节点没有
参考地址
https://developer.mozilla.org/en-US/docs/Web/API/Node
DOM中共有7种节点
1、Document（文档节点） 整个文档树的顶层节点（也代表整个文档）
2、DocumentType（文档类型节点） doctype标签（<!DOCTYPE html>）
3、Element（元素节点） HTML标签
4、Attr（属性节点） 标签的属性（class="right"）
5、Text（文本节点） 文本
6、Comment（注释节点） 注释
7、DocumentFragment（文档片段节点）文档片段
