虽然现在我们在开发中已经用不到自己操作DOM了，之前有JQ，现在更是有VUE、REACT两大框架供我们使用，但是我们也有必要了解下，关于原生JS中的DOM操作问题。
- 前面我们已经介绍了，
DOM操作中获取元素和节点的方法， - 在很早之前我们也介绍了
DOM操作中的盒子模型， - 这次我们就把
DOM操作剩余的几个知识点一并讲解了：包括DOM元素中的增/删/改，修改DOM元素的样式，给DOM插入内容，等一系列方法
前面关于
DOM我们已经讲解过很多，今天是我们最后一篇关于DOM的文章，所以我们在重新写一下DOM的含义：
DOM（document object model）:文档对象模型（提供一系列的属性和方法，供我们获取和操作DOM元素）- 基于
JS获取到的DOM元素是“对象数据类型”值，里面包含很多浏览器自带的，用来操作元素的键值对。
# 一、DOM元素中的增加/删除/修改
# 思维导图
# 1、创建
- 语法：
document.createElement([标签名]) - 动态创建一个DOM元素
# 2、增加
# -1）插入指定容器末尾
- 语法：
[CONTAINER].appendChild([元素]) - 把元素动态插入到指定容器的末尾
# -2）插入指定元素前
- 语法：
[CONTAINER].insertBefore([新元素],[原始页面中的元素]) - 把新创建的元素放置到指定容器原始页面元素的前面
- 【原始页面中的元素】肯定在【CONTAINER】容器中
# 3、删除
- 语法：
[CONTAINER].removeChild([元素]) - 在指定容器中移除元素
# 4、给DOM设置内容
# -1）、innerHTML
- 给非表单元素设置或者操作其内容
- 能识别HTML标签
# -2）、innerText
- 给非表单元素设置或者操作其内容
- 不能识别HTML标签
# -3）、value
- 给表单元素设置或者操作其内容
上面我们简单介绍了语法和定义，现在我们简单操作一下，利用上面的知识，完成下图效果吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- IMPORT CSS -->
<link rel="stylesheet" href="reset.min.css">
<style>
.addBtn {
padding: 5px 15px;
font-size: 20px;
}
.item {
width: 300px;
padding: 10px;
margin-top: 10px;
border: 1px dashed #555;
}
.item li {
line-height: 30px;
}
.item li:nth-child(even) {
background-color: #EEE;
}
</style>
</head>
<body>
<button class="addBtn">+</button>
<ul class="item">
<li>
我是LI1
<!-- href="javascript:;" 阻止A标签点击跳转页面，只把他当做按钮 -->
<a href="javascript:;" class="deleteBtn">删除</a>
</li>
<li>我是LI2</li>
</ul>
<!-- IMPORT JS -->
<script>
/*
* 点击加号ADDBTN，动态创建一个LI，并且插入到容器ITEM中
*/
let addBtn = document.querySelector('.addBtn'),
item = document.querySelector('.item'),
count = 2;
addBtn.onclick = function () {
// 1.动态创建一个LI（可以给其设置样式或者内容）
let newLi = document.createElement('li');
// newLi.style.xxx=xxx newLi.className=xxx ... 新创建的元素是对象，可以尽情操作
newLi.innerHTML = `我是LI${++count}`;
// 2.把创建的LI添加到指定的容器中
// insertBefore 添加到指定元素的前面
// let first = item.firstElementChild;
// item.insertBefore(newLi, first);
// appendChild 添加到指定容器末尾
item.appendChild(newLi);
};
/*
* 点击删除按钮移除元素
*/
let deleteBtn = document.querySelector('.deleteBtn');
deleteBtn.onclick = function () {
// 获取删除按钮的父元素（第一个LI）
let parent = deleteBtn.parentNode;
// 从容器中移除掉
item.removeChild(parent);
};
</script>
</body>
</html>
# 5、设置自定义属性
# -1）、方法一：利用对象特性
- 每一个元素都是一个对象（堆内存），我们向堆内存中设置自定义属性即可
- 语法：
[元素].xxx=xxx; /元素[xxx]=xxx;
写在堆内存中的
- 获取方式：
console.log([ELEMENT].xxx);- 删除方式：
delete [ELEMENT].xxx;
# -2）、方法二：利用标签特性
- 每一个元素也是一个标签，可以操作其DOM结构，给结构上新增自定义的属性
- 语法：
[元素].setAttribute('xxx',xxx);
直接写在结构上的
- 获取方式：
[元素].getAttribute('xxx');- 删除方式：
[元素].removeAttribute('xxx');
两种方法的区别：原理不一样，一个操作的是堆内存，一个操作的是DOM结构，所以不能混用
以上面的结构我们设置自定义属性查看效果：
item['xiaozhima'] = '小芝麻';
// console.dir(item.xiaozhima);
// console.dir(item)
//这里我们只打印item查看这个对象的属性
item.setAttribute('jinse', '金色');
// console.dir(item.getAttribute('jinse'));
console.log(item.xiaozhima); //=>'小芝麻'
console.log(item.getAttribute('xiaozhima')); //=>null
console.log(item.jinse); //=>undefined
console.log(item.getAttribute('jinse')); //=>'金色'
这是上面代码中我们console.dir(item)后查看对象中存在我们设置的属性名和属性值;
但是并没有找到我们下面设置的
“item.setAttribute('jinse', '金色');，原因我们上面已经说个，这种方式设置，是写在结构上，那我们去结构上找一下，是在这里。
# 二、操作DOM元素样式
# 思维导图
# 1、元素.style.xxx
- 修改（获取）当前元素的行内样式
- 操作的都是行内样式，哪怕把样式写在样式表中，只要没有写在行内上，也获取不到
- 获取当前元素样式（不论写在哪，都能获取到的方法）我们在JS中的盒子模型一篇已经讲过
元素.style.cssText =
(反撇)需要设置的所有行内样式(反撇)
- 这种方式是 style 一个个设置样式的简写，批量给行内上设置很多样式
# 2、元素.className
操作的是当前元素的样式类，基于样式类的管理给予其不同的样式
元素.className = ‘样式类’- 这样操作会把之前的样式类名给覆盖掉
元素.className +=“空格 样式类”- 这样操作是不覆盖原有的基础上设置一个
- 记得加空格分每个样式类
元素.classList.add("样式类")- 向指定样式集合中新增一个样式类
- （兼容性差）
let itemBox = document.getElementById('itemBox'),
navList = itemBox.getElementsByTagName('li');
// console.dir(itemBox); //=>它是一个对象：itemBox.xxx=xxx
// console.dir(navList); //=>它是一个元素集合HTMLCollection（类数组集合：数字作为索引，LENGTH代表长度），集合中的每一项是单独的元素对象 navList[0].xxx=xxx
//===========设置样式
itemBox.style.color = 'red';
itemBox.style.backgroundColor = 'green'; //=><ul class="item" id="itemBox" style="color: red; background-color: green;"> 设置的结果都是行内样式
itemBox.style.cssText = `color: red; background-color: green;`; // 这种方式是STYLE一个个设置样式的简写，批量给行内上设置很多样式
itemBox.className = 'active'; //=>CLASSNAME这样操作会把之前的样式类名给覆盖掉
itemBox.className += ' active'; //=>这样也可以，记得加空格区分每个样式类
itemBox.classList.add('active'); //=>向指定样式集合中新增一个样式类（兼容性差）