添加元素后改变背景

添加元素后改变背景颜色

案例要求：

1. 有一组li元素用来点击时变换背景颜色
2. 有一个点击按钮button用来增加li元素
3. 生成的元素再次点击后仍能改变背景颜色

错误操作：

​ 直接把变换背景的事件绑定在每一个小li的身上

---

后果：

​ 因为当前绑定的点击变换背景颜色事件在每一个小li身上这就导致了该点击事件只能识别文档中现有的li而不能识别新生成的lil;从而新生成的li再点击以后不会有任何的变化。

---

正确思路：

一、按钮点击事件

1. 为点击按钮button添加点击事件【用事件监听的方式】;
2. 在点击事件里面动态的生成一个li元素;
3. 为该li元素添加文本内容为"我是新生成的模块";
4. 将添加文本的后的[li]()元素插入到ul中【用[appendChild]()方法】

二、ol点击事件

1. 在事件中用event对象的target方法获得点击的当前对象
2. 在ol点击事件外部书写sibling函数用来清除其他未点击元素的样式
3. 在事件内部调用该sibling函数，返回值是一个数组
4. 使用数组的forEach方法遍历该数组;

三、代码实现

<button id="btn">添加li</button>
	<ul id="oul">
		<li>选项1</li>
		<li>选项2</li>
		<li>选项3</li>
		<li>选项4</li>
	</ul>

	ul {
			width: 300px;
			margin: 100px auto;
		}
		li {
			list-style-type: none;
			padding: 10px 0;
			cursor: pointer;
		}

		#btn {
			margin: 0 40%;
			display: block;
			width: 65px;
			padding: 10px;
			border-radius: 5px;
			background-color: aquamarine;
		}

var btn = document.getElementById("btn");

		var oul = document.getElementById("oul");
		var lis = document.querySelectorAll("li");
		btn.addEventListener("click", function () {
			var li = document.createElement("li");
			li.innerHTML = "新增加的选型卡";
			li.style.backgroundColor = "";
			oul.appendChild(li);
		});
		oul.addEventListener("click",function() {
			// console.log(1);
			var ev = event.target;
			var arr = sibling(ev);
			arr.forEach(function(val,index) {
				val.style.backgroundColor = "";
			})
			ev.style.backgroundColor = "pink";	

		})

		function sibling(ele) {
			var arr = [];
			var par = ele.parentNode.children;
			for(var i=0;i<par.length;i++) {
                 arr.push(par[i]);
			}
			return arr;	    
		}

		// 缺点：forEach 没有办法跳出循环

四、复习回顾：

节点元素	作用	使用方法
children	获取孩子元素	ele.children
nextSibling	获取下一个兄弟节点	ele.nextSibling
nextElementSibling	获取下一个兄弟元素节点	ele.nextElementSibling
previousSiblings	获取上一个兄弟节点	ele.previousSiblings
previousElementSibling	获取上一个兄弟元素节点	ele.previousElementSibling
parentNode	获得父亲节点	ele.parentNode
parentElement	获得父亲元素节点	ele.parentElement

注意：节点包括文本节点，元素节点、属性节点等

获取节点类型：

使用nodeType获得

some()方法

目标对象：数组

作用：判断数组中的值

实例如下：

var arr = [1, 2, 3, 45, 68];
var flag = arr.some( age => {
    return age>3;    //数组中存在该条件的元素 ；返回true
})g
console.log(flag);  //true

参数：

里面的参数就是数组里面的每一个值；