js DOM模型常用方法复盘梳理

        大家好，我是资深前端之路，今天主要是在对常用的js基础知识进行复盘，回顾下最基础的知识，不断打地基。今天主要回顾的知识是以下几个内容：

1、什么是DOM

        定义：文档对象模型，操作html标签的能力，其中document是Dom的内置的对象，所以又称为dom对象。

2、获取元素

        id获取：document.getElementById；当获取到是返回值是一个对象；未获取到返回null。

        class获取：document.getElementsByClassName。返回值是一个空的对象，以及长度。注意改获取方式返回的是多个对象。

        选择器获取：document.querySelector。返回值是一个对象，如果不存在，返回null。 

        标签获取：document.getElementsByTagName 。返回值是一个空的对象，以及长度。注意改获取方式返回的是多个对象。

3、操作元素

        操作属性

        setAttribute:设置元素的属性值。setAttribute(属性名，属性值)。如果该属性不存在，会新增一个同名属性。

        removeAttribute:移除属性。removeAttribute(属性名)。

        dataset:代表对象上的data-属性。主要的特点是直观，方便。

        delete：来删除dataset属性,如 delete box.dataset.id。

        操作文本

        innerHTML：获取对象的子级html内容，在赋值值也可以设置到标签内容。

        innerText：获取对象的子级的所有文本内容，不包含html标签。注意赋值时，也只能赋值到文本内容，不能修改标签。

        value:只有标签标签内部有value。同时可以读取和赋值。

        操作样式

        style:结尾为.号时，只能获取行内样式，css中的样式获取不到。其它的样式可以用[]中括号加属性名，再或者使用驼峰写法来获取。如box.style.backgroundColor。

        getComputedStyle:获取指定对象节点所有的样式。getComputedStyle("#id")，注意使用时有版本兼容性问题。尽量少用。

        操作元素类名

        主要是用来批量的修改类名，修改整体的样式。

        className:设置类名。没有就添加一个类名，如果存在，就修改原来的类名。

        classList:设置类名。如果有相同的类名，会自动的去重。

        calssList.remove:移除类名，注意在使用时，需要一个个进行移除。

        toggle:判断样式是否存在，如果存在就切换，不如不存在就添加。

4、获取节点        

        dom节点一共分为三大类：元素节点、属性节点、文本节点。

        元素节点：标签对应的元素的html就是元素节点。

        属性节点：属性对应的节点。注意没有所谓的父子关系。

        文本节点：文本内容对应的的内容就是文本节点。通过innerText获取到的节点，包含换行和空格。

        document是根节点，html是根元素节点。

        注意：注释的内容也是一个节点，定义为注释节点，在文本中不显示出来。

        获取的方法：

        children:获取节点内所有的文本节点。

        childNodes:获取节点内的所有子元素节点。包含文本节点、元素节点、注释节点。

        firstChild:获取节点内第一个子文本节点。

        firstElementChild:获取节点内第一个子元素的元素节点。

        lastChild:获取节点内最后一个子文本节点。

        lastElementChild:获取节点内最后一个子元素节点。

        previousSibling:获取上一个兄弟文本节点。

        previousElementSibling:获取上一个兄弟元素节点。

        nextSibling:获取下一个兄弟文本节点。

        nextElementSibling:获取下一个兄弟元素节点。

        parentNode和parentElement:都是一样的获取的都是元素节点。

5、操作节点

        操作无非就是：增删改查（CRUD）。

        createElement:创建一个元素节点，createElement(标签名称)。

        appendChild:在节点内末尾追加一个节点。

        insertBefore:在节点前追加一个节点。insertBefore(插入的内容，插入的位置前面)。

        removeChild:移除一个节点的子元素节点，removeChild(删除的节点)。

        remove:删除自己，不仅仅删除子元素节点，也删除节点本身。

        replaceChild:替换子元素节点。

        cloneNode：克隆节点。cloneNode(是否克隆后代)，默认为false，当传参数true时，就会克隆子元素文本。

 6、节点的属性

        dom节点分为三大类，各一个类都有个字的属性值，这个属性值可以看下表。

7、归纳总结    

        今天主要回顾了什么是dom节点，dom节点的类型，如何修改不同类型的dom节点以及如何删除dom节点。整个逻辑分为dom是什么、dom如何使用运用两部分。以后还会整理更多关于js的基础知识，喜欢的朋友帮忙点赞+关注哟！