J24 DOM的动态操作1.关于DOM元素中的增加/删除/修改2.设置元素的自定义属性

1.关于DOM元素中的增加/删除/修改

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></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>
</body>
</html>

1.document.createElement([标签名]):动态创建一个DOM元素

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}`;
console.log(newLi);
};

2.[containter].appendChild([元素]);把元素动态插入到指定容器的末尾

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}`;

	// appendChild 添加到指定容器末尾
	item.appendChild(newLi);
};

3.[containter].insertBefore([新元素],[原始页面中的元素]):把新创建的元素放置到指定容器原始页面元素的前面[原始页面中的元素]肯定在containter容器中

let addBtn = document.querySelector('.addBtn'),
	item = document.querySelector('.item'),
	count = 2;
addBtn.onclick = function () {
	let newLi = document.createElement('li');
	newLi.innerHTML = `我是LI${++count}`;

	// 2.把创建的LI添加到指定的容器中
	// insertBefore 添加到指定元素的前面
	let first = item.firstElementChild;
	item.insertBefore(newLi, first);
};

4.[containter].removeChild([元素]);在指定容器中移除元素

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}`;

	// appendChild 添加到指定容器末尾
	item.appendChild(newLi);
};

/*
 * 点击删除按钮移除元素 
 */
let deleteBtn = document.querySelector('.deleteBtn');
deleteBtn.onclick = function () {
	// 获取删除按钮的父元素（第一个LI）
	let parent = deleteBtn.parentNode;

	// 从容器中移除掉
	item.removeChild(parent);
};

5.document.createTextNode();创建一个文本节点

2.设置元素的自定义属性

1.每一个元素都是一个对象（堆内存），我们向堆内存中设置自定义属性即可;元素.xxx = xxx 或者元素[xxx]=xxx;对象键值对的操作

2.每一个元素也是一个标签，我们可以操作其DOM结构，给结构上新增自定义的属性;元素.setAttribute('xxx', 'xxx')

两种方案的原理是不一样的，一个操作的是堆内存，一个操作的是DOM结构

item['zhangsan'] = '张三';
console.dir(item.zhangsan);

item.setAttribute('teacher', '李四');
console.dir(item.getAttribute('zhansan'));

console.log(item.zhangsan); //=>'张三'
console.log(item.getAttribute('zhangsan')); //=>null

console.log(item.teacher); //=>undefined
console.log(item.getAttribute('teacher')); //=>'李四'