1-1 DOM与Node对象

前面我已经讲过，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（文档片段节点）文档片段