文档对象模型DOM

由于vue react 框架的应用广泛，封装好了DOM操作，但是还是要熟悉的

1，DOM的本质：

DOM可以理解为浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型

当网页被加载时，浏览器会创建页面的文档对象模型

1. javascript能改变页面中的所有HTML元素
2. javascrip能改变页面中的所有HTML属性
3. javascrip能改变页面中的所有CSS样式
4. javascrip能对页面中的所有事件做出反应

DOM是哪种数据结构

树（DOM树）DOM树形结构

2， js获取DOM节点的几种方式

document.getElementById();	//id名，
document.getElementsByTagName();	//标签名
document.getElementsByClassName();	//类名
document.getElementsByName();	//name属性值，一般不用
document.querySelector();	//返回与该模式匹配的第一个元素，如果没找到匹配的元素，则返回null
document.querySelectorAll()	//返回与该模式匹配的所有元素，结果为一个类数组

3，DOM节点的property

就是我们能获取DOM元素在js中进行操作，property是DOM中的属性，是JavaScript里的对象

DOM中的Attribute

attribute是HTML标签上的特性

可以直接通过api来直接修改结构

DOM节点Attribute和property有何区别:

参考的这位博主的博客

4，DOM操作

1. 新增/插入节点
   

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

节点树

1. parentNode 父节点
2. childNodes 儿子节点（包含空白）
3. firstChild 第一个儿子节点
4. lastChild 最后一个儿子节点
5. nextSibling 下一个相邻节点
6. previousSibling 上一个 相邻节点

元素树

1. firstElementChild 第一个元素节点
2. lastElementChild** 最后一个元素节点
3. nextElementSibling 下一个相邻元素节点
4. previousElementSibling 上一个相邻的元素节点
5. childElementCount 儿子元素节点的个数
6. children 儿子节点 （不包括空白）
7. parentElement 父元素节点

节点操作方法

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点

父节点.appendChild(新的子节点);

insertBefore() 方法可在已有的子节点前插入一个新的子节点

父节点.insertBefore(新的子节点,已有的子节点);     // existing现有的

replaceChild() 方法可将某个子节点替换为另一个

父节点.replaceChild(新节点,要替换的节点);

removeChild() 方法指定元素的某个指定的子节点。

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
父节点.removeChild(要删除的子节点)

cloneNode() 方法创建节点的拷贝，并返回该副本。方法克隆所有属性以及它们的值。如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

var cln=itm.cloneNode(true); // 拷贝节点
document.getElementById("myList1").appendChild(cln);

创建元素与删除元素

1. document.createElement() // 创建元素节点
2. document.createTextNode() // 创建文本节点
3. document.appendChild(node) // 向子节点的末尾添加新的节点
4. document.insertBefore(newNode, existNode)// 现有的子元素之前插入一个新的子元素
5. document.removeChild(node) // 删除一个子元素
6. document.remove() // IE低版本不兼容 谷歌火狐都能使用 删除目标元素

DOM性能优化

1. DOM操作非常“昂贵”，尽量避免频繁的DOM操作
2. 对DOM查询做缓存
3. 将频繁操作改为一次性操作
   因为操作会造成浏览器的重绘和重排

看的这位博主的博客浏览器运行机制详解