DOM操做之——元素的增删改、样式修改、插入内容

时间 2020-05-30

标签 dom 元素增删样式修改插入内容栏目 HTML 繁體版

原文原文链接

虽然如今咱们在开发中已经用不到本身操做DOM了，以前有JQ，如今更是有VUE、REACT两大框架供咱们使用，可是咱们也有必要了解下，关于原生JS中的DOM操做问题。javascript

前面咱们已经介绍了，DOM操做中获取元素和节点的方法，
在很早以前咱们也介绍了DOM操做中的盒子模型，
此次咱们就把DOM操做剩余的几个知识点一并讲解了：包括DOM元素中的增/删/改，修改DOM元素的样式，给DOM插入内容，等一系列方法

前面关于DOM咱们已经讲解过不少，今天是咱们最后一篇关于DOM的文章，因此咱们在从新写一下DOM的含义：css

DOM（document object model）:文档对象模型（提供一系列的属性和方法，供咱们获取和操做DOM元素）

基于JS获取到的DOM元素是“对象数据类型”值，里面包含不少浏览器自带的，用来操做元素的键值对。

1、`DOM`元素中的增长/删除/修改

思惟导图

一、建立

语法：document.createElement([标签名])
动态建立一个DOM元素

二、增长

-1）插入指定容器末尾

语法：[CONTAINER].appendChild([元素])
把元素动态插入到指定容器的末尾

-2）插入指定元素前

语法：[CONTAINER].insertBefore([新元素],[原始页面中的元素])
把新建立的元素放置到指定容器原始页面元素的前面
【原始页面中的元素】确定在【CONTAINER】容器中

三、删除

语法：[CONTAINER].removeChild([元素])
在指定容器中移除元素

四、给`DOM`设置内容

-1）、innerHTML

给非表单元素设置或者操做其内容
能识别HTML标签

-2）、innerText

给非表单元素设置或者操做其内容
不能识别HTML标签

-3）、value

给表单元素设置或者操做其内容

上面咱们简单介绍了语法和定义，如今咱们简单操做一下，利用上面的知识，完成下图效果吧。html

<!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>
复制代码

五、设置自定义属性

-1）、方法一：利用对象特性

每个元素都是一个对象（堆内存），咱们向堆内存中设置自定义属性便可
语法：[元素].xxx=xxx; / 元素[xxx]=xxx;

写在堆内存中的java

获取方式：console.log([ELEMENT].xxx);

删除方式：delete [ELEMENT].xxx;

-2）、方法二：利用标签特性

每个元素也是一个标签，能够操做其DOM结构，给结构上新增自定义的属性
语法：[元素].setAttribute('xxx',xxx);

直接写在结构上的数组

获取方式：[元素].getAttribute('xxx');

删除方式：[元素].removeAttribute('xxx');

两种方法的区别：原理不同，一个操做的是堆内存，一个操做的是DOM结构，因此不能混用浏览器

以上面的结构咱们设置自定义属性查看效果：app

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', '金色');，缘由咱们上面已经说个，这种方式设置，是写在结构上，那咱们去结构上找一下，是在这里。

2、操做`DOM`元素样式

思惟导图

一、元素.style.xxx

修改（获取）当前元素的行内样式
操做的都是行内样式，哪怕把样式写在样式表中，只要没有写在行内上，也获取不到
获取当前元素样式（不论写在哪，都能获取到的方法）咱们在JS中的盒子模型一篇已经讲过

元素.style.cssText = (反撇)须要设置的全部行内样式(反撇)ui

这种方式是 style 一个个设置样式的简写，批量给行内上设置不少样式

二、元素.className

操做的是当前元素的样式类，基于样式类的管理给予其不一样的样式spa
元素.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'); //=>向指定样式集合中新增一个样式类（兼容性差）
复制代码

DOM操做之——元素的增删改、样式修改、插入内容

1、DOM元素中的增长/删除/修改

思惟导图

一、建立

二、增长

-1）插入指定容器末尾

-2）插入指定元素前

三、删除

四、给DOM设置内容

-1）、innerHTML

-2）、innerText

-3）、value

五、设置自定义属性

-1）、方法一：利用对象特性

-2）、方法二：利用标签特性

2、操做DOM元素样式

思惟导图

一、元素.style.xxx

二、元素.className

1、`DOM`元素中的增长/删除/修改

四、给`DOM`设置内容

2、操做`DOM`元素样式