虽然现在我们在开发中已经用不到自己操作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'); //=>向指定样式集合中新增一个样式类（兼容性差）
若有收获，就点个赞吧
0 人点赞
