dom操作

1，DOM的本质：

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

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

javascript能改变页面中的所有HTML元素
javascrip能改变页面中的所有HTML属性
javascrip能改变页面中的所有CSS样式
javascrip能对页面中的所有事件做出反应
DOM是哪种数据结构
树（DOM树）DOM树形结构

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

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

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 输出流

节点树

parentNode 父节点
childNodes 儿子节点（包含空白）
firstChild 第一个儿子节点
lastChild 最后一个儿子节点
nextSibling 下一个相邻节点
previousSibling 上一个 相邻节点

元素树

firstElementChild 第一个元素节点
lastElementChild** 最后一个元素节点
nextElementSibling 下一个相邻元素节点
previousElementSibling 上一个相邻的元素节点
childElementCount 儿子元素节点的个数
children 儿子节点 （不包括空白）
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);

创建元素与删除元素

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

DOM性能优化

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

原文链接 https://blog.csdn.net/weixin_53687069/article/details/115054869?spm=1001.2014.3001.5501