JS 梳理DOM的定义和操作

        嗨，我是小路。今天主要和大家分享的主题是“js dom的使用”。        

目前使用的框架都是渐进式框架，像VUE、React等，都是通过数据去操作dom，而在原生的js中，更多的是使用原生的dom,今天主要梳理下对于原生dom的理解和操作

一、定义和类型

1.文档对象模型

定义：文档对象模型，简称DOM，是html和xml的编程接口。对文档进行结构化描述，主要是树形结构。

节点类型	元素
元素节点	div、p
文本节点	text
属性节点	style、width、height

 

2.常见的操作

节点类型	操作
元素节点	创建 createElement、createDocumentFragment(插入子孙节点) 查询 querySelector(首个-单个)、querySelectorAll(包含元素-列表)，getElementById 更新 innerHTML(修改内部) 添加 appendChild(父节点的最后一个子节点)、insertBefore（插入指定位置前面）、 删除 removeChild(删除节点，先获取父节点，然后用父节点删除自身)
文本节点	创建 createTextNode 查询 更新 (只改文本内容，不改html) innerText(不返回元素)、 textContent(返回所有文本) 添加 删除
属性节点	创建 createAttribute 查询 更新 style(改css属性)，setAttribute(设置属性) 添加 删除

都看到这里了，记得【点赞】+【关注】哟。