[前端] 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>