持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情。

DOM 文档对象模型

DOM: Document Object Model 文档对象模型 是页面上标签等内容在js的对象模型。通过这个模型，可以使用JS对网页上的标签进行修改

文档就是整个HTML网页文档 对象表示将网页中的每一个部分都转换为了一个对象 使用模型来表示对象之间的关系，这样方便我们获取对象

节点：Node 是构成网页的最基本部分；构成HTML最基本的单元 文档节点：整个HTML文档 元素节点：HTML文档中的HTML标签 属性节点：元素的属性 文本节点：HTML标签中的文本内容

使用 JS 操作标签的操作都叫 DOM操作；页面在被浏览器解析渲染时，会实时、自动的产生一个比较大的 JS对象，叫做 DOM树对象； DOM操作：先从DOM树对象上获取想要操作的DOM对象，让后对其进行操作。

获取DOM对象的方式：

document.getElementById()    id属性值    获取：单一的DOM对象
document.getElementsByTagName()    标签名    获取：DOM对象组成的伪数组
document.getElementsByName()    name属性值    获取：DOM对象组成的伪数组        常用于表单元素
document.getElementsByclassName()    class属性值    获取：DOM对象组成的伪数组
document.querySelector()    CSS选择器        获取：单一的DOM对象
document.querySelectorAll()    CSS选择器    获取：    DOM对象组成的伪数组

通过document对象调用，获取元素节点：
    1、getElementById() 通过id属性获取一个元素节点对象
    2、getElementsByTagName() 通过标签名获取一组元素节点对象
    3、getElementsByName() 通过name属性获取一组元素节点对象

通过具体的元素节点调用，获取元素节点的子节点：
    1、getElementsByTagName() 返回当前节点的指定标签名后代节点
    2、childNodes  -属性,表示当前节点的所有子节点
    3、firstChild  -属性,表示当前节点的第一个子节点
    4、lastChild   -属性,表示当前节点的最后一个子节点

通过具体的节点调用，获取父节点和兄弟节点：
    1、parentNode   表示当前节点的父节点
    2、previousSibling  表示当前节点的前一个兄弟节点
    3、nextSibling  表示当前节点的后一个兄弟节点

获取body标签对应的 DOM对象    document.body 直接获取
获取整个页面对应的DOM对象    document.documentElement   这是一个属性，不是方法

​    写HTML标签时，标签上的属性叫作    标签属性
​    获取DOM对象后，DOM对象的属性叫作    DOM属性
​    表单的value标签属性是指默认的内容；DOM属性value是指用户输入的内容
​    表单的checked标签属性是指默认选中；DOM属性checked是指用户当前是否选中

**创建元素节点**    document.createElement(“标签名”)
​    **添加节点**    父dom对象.appendChild(dom对象)        //在父标签的末尾添加
​            父dom对象.insertBefore(新dom对象，已经存在的dom对象)    //添加到某个节点前面，要先获取这个节点的父节点

**插入节点** 父节点.appendChild(新的子节点);    父节点最后插入一个子节点
        父节点.insertBefore(新的子节点，作为参考的子节点);    在参考节点前插入一个新的子节点，参考节点为null 在父节点最后插入
**删除节点** 父节点删除子节点：    父节点.removeChild(子节点)；
**复制节点** 要复制的节点.cloneNode();    不带参数/参数false，只复制节点本身，不复制子节点    带参数true ( 要复制的节点.cloneNode(true) ) 既复制节点本身，也复制子节点