[前端] todoList制作

知识点回顾

后代选择器可以使用多个选择器每个选择器之间用空格分开。只要是后代就会被选择如

<style>div a{color: red;}
</style>
<div><a href="">我是儿子</a><p><a href="">我是孙子</a></p>
</div>

此时两个超链接都会变色
2. 子代选择器可以使用多个选择器每个选择器之间用 > 分割。只有子代才会被选择

<style>div>a{color: red;}
</style>
<div><a href="">我是儿子</a><p><a href="">我是孙子</a></p>
</div>

第一个超链接才会变成红色
3. 如何去除html自带的 li 的样式

li {list-style:none;
}

如果一个div盒子有高度，如何让里面的文字垂直居中

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试input checkbox的label</title><style>div{height: 40px;border: 1px solid pink;line-height: 40px;}</style>
</head>
<body><div>真的笑不出来了</div><script></script>
</body>
</html>

使用 line-height 即可。
5. 插入一个节点，使用document.createElement("<tagName>") 使用 append 表示在尾后插入一个子节点，使用prepend 表示在头部插入一个子节点。
after 则是在这个节点后插入一个兄弟节点，before 则是在这个节点前面插入一个兄弟节点。删除节点很爽不需要知道这个节点的父节点是什么直接调用remove()方法即可。

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>插入删除节点例子</title>
</head>
<body><button id="id_btn_add">点击增加节点</button><button id="id_btn_delete">点击删除节点(删除年级)</button><ul><li>一年级<ul><li>小明</li><li>小红</li></ul></li><li>二年级<ul><li>老王</li><li>杰哥</li></ul></li></ul><script>let btnAdd = document.querySelector("#id_btn_add");btnAdd.addEventListener("click", e => {let ulEle = document.querySelector("body>ul");let liEle = document.createElement("li");liEle.innerHTML = '三年级<ul><li>翠翠</li><li>兰兰</li></ul>';ulEle.append(liEle);let test = document.querySelectorAll("body>ul>li");let grandLiEle = test[0].querySelectorAll("ul>li")[0];let newLiEle = document.createElement("li");newLiEle.innerHTML = "八戒";grandLiEle.after(newLiEle);});let btnDele = document.querySelector("#id_btn_delete");btnDele.addEventListener("click", e => {let liNodeList = document.querySelectorAll("body>ul>li");if(liNodeList.length > 0){liNodeList[liNodeList.length - 1].remove();}else{alert("没有元素可以删除了");}});</script>
</body>
</html>

事件的冒泡，冒泡这个特性还是经常用到的，真正产生事件的html元素通过 event.target来获取。获取到对应的html元素后，就可以有很多操作了，如 parentNode 来获取该元素的父亲元素。nodeName 来获取节点名称等等

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的冒泡</title><style>div{height: 60px;border: 1px solid pink;}</style>
</head>
<body><div class="wrapper" id="id_box"><ul><li>我是小明</li></ul></div><script>let divEle = document.querySelector("#id_box");divEle.addEventListener("click", event => {console.log(event.target);});</script>
</body>
</html>

html中并没有什么直接方法来获取 ul 或者 ol 下面 li的数量。还是得通过querySelectorAll()接口来获取

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的冒泡</title><style>div{height: 60px;border: 1px solid pink;}</style>
</head>
<body><button id="id_btn">获取li的数量</button><ul><li>小红</li><li>大白</li><li>丽丽</li></ul><script>let btnEle = document.querySelector("#id_btn");let ulEle = document.querySelectorAll("body>ul>li");btnEle.addEventListener("click", event => {console.log(ulEle.length);});</script>
</body>
</html>

正则表达式向后向前环视，(首先书上写JavaScript不支持环视，但是现在JavaScript是支持的)。

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>正则表达式环视</title><style>div{height: 60px;border: 1px solid pink;}</style>
</head>
<body><script>let str = "已完成8/全部10";let str1 = "https://www.forta.com";let complete = str.match(/(?<=已完成)[0-9]+/);let total = str1.match(/\w+(?=:)/);console.log(complete[0]);console.log(total[0]);</script>
</body>
</html>