添加元素后改变背景颜色
案例要求:
- 有一组
li
元素用来点击时变换背景颜色 - 有一个点击按钮button用来增加
li
元素 - 生成的元素再次点击后仍能改变背景颜色
错误操作:
直接把变换背景的事件绑定在每一个小li
的身上
后果:
因为当前绑定的点击变换背景颜色事件在每一个小li
身上这就导致了该点击事件只能识别文档中现有的li
而不能识别新生成的li
l;从而新生成的li再点击以后不会有任何的变化。
正确思路:
一、按钮点击事件
- 为点击按钮button添加点击事件【用事件监听的方式】;
- 在点击事件里面动态的生成一个
li
元素; - 为该
li
元素添加文本内容为"我是新生成的模块"; - 将添加文本的后的
[li]()
元素插入到ul中【用[appendChild]()
方法】
二、ol
点击事件
- 在事件中用event对象的target方法获得点击的当前对象
- 在
ol
点击事件外部书写sibling函数用来清除其他未点击元素的样式 - 在事件内部调用该sibling函数,返回值是一个数组
- 使用数组的
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
参数:
里面的参数就是数组里面的每一个值;