js：节点操作+时间对象节点操作 DOM节点 DOM树里每一个内容都称之为节点节点类型元素节点所有的标签比如 b

节点操作

DOM节点

DOM树里每一个内容都称之为节点

节点类型

元素节点

所有的标签比如 body、 div

html 是根节点
属性节点

所有的属性比如 href
文本节点

所有的文本

查找节点

节点关系：

父节点
子节点
兄弟节点

父节点

parentNode 属性：返回最近一级的父节点，找不到返回为null

1649685144093

关闭二维码案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        .code {
            position: relative;
            width: 150px;
            height: 150px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        
        span {
            position: absolute;
            top: 0px;
            left: -20px;
            height: 20px;
            width: 20px;
            text-align: center;
            line-height: 15px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="code">
        <span>x</span>
        <img src="./imgs/456.png" alt="">
    </div>
    <script>
        let span = document.querySelector('span');
        span.addEventListener('click', function() {
            //span为子元素，span.parentNode节点为div
            span.parentNode.style.display = 'none';
        })
    </script>
</body>

</html>

子节点：

childNodes：

获得所有子节点、包括文本节点（空格、换行）、注释节点等

children （重点）：

（1）仅获得所有元素节点（2）返回的还是一个伪数组

1649685604112

隐藏所有 li标签案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        ul {
            margin: 100px auto;
            list-style: none;
            height: 155px;
            width: 150px;
            border: 1px solid #ccc;
        }
        
        li {
            height: 30px;
            width: 150px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        let ul = document.querySelectorAll('ul');
        for (let j = 0; j < ul.length; j++) {
            ul[j].addEventListener('click', function() {
                for (let i = 0; i < this.children.length; i++) {
                    this.children[i].style.display = 'none';
                }
            })
        }
    </script>
</body>

</html>

兄弟节点：

下一个兄弟节点 nextElementSibling 属性
1. 上一个兄弟节点 previousElementSibling 属性

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        ul {
            margin: 100px auto;
            list-style: none;
            height: 155px;
            width: 150px;
            border: 1px solid #ccc;
        }
        
        li {
            height: 30px;
            width: 150px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>


    <script>
        let li = document.querySelectorAll('li');
        for (let i = 0; i < li.length; i++) {
            li[i].addEventListener('click', function() {
                //上一个节点
                li[i].previousElementSibling.style.backgroundColor = 'red';
                //下一个节点
                li[i].nextElementSibling.style.backgroundColor = 'pink';

            })
        }
    </script>
</body>

</html>

增加节点

创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点创建元素节点方法：

1649686289318

代码：

 let ul = document.querySelector('ul');

追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素

1649686451829

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            justify-content: space-evenly;
        }
        
        ul {
            list-style: none;
            width: 310px;
            height: 320px;
            border: 1px solid #ccc;
            padding: 0px 10px;
        }
        
        li {
            padding: 20px 0px;
            cursor: pointer;
        }
    </style>

</head>

<body>
    <ul class="order">
        <li>龙虾</li>
        <li>鲍鱼</li>
        <li>酸菜鱼</li>
        <li>鱼子酱</li>
        <li>皇帝蟹</li>
    </ul>
    <ul class="guest">

    </ul>
    <script>
        let ul = document.querySelector('.order');
        let li = ul.children;
        let guest = document.querySelector('.guest');
        for (let i = 0; i < li.length; i++) {
            li[i].addEventListener('click', function() {
                guest.appendChild(this);
            })
        }
    </script>
</body>

</html>

插入到父元素中某个子元素的前面

1649686460870

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            justify-content: space-evenly;
        }
        
        ul {
            list-style: none;
            width: 310px;
            height: 320px;
            border: 1px solid #ccc;
            padding: 0px 10px;
        }
        
        li {
            padding: 20px 0px;
        }
    </style>

</head>

<body>
    <ul class="order">
        <li>龙虾</li>
        <li>鲍鱼</li>
        <li>酸菜鱼</li>
        <li>鱼子酱</li>
        <li>皇帝蟹</li>
    </ul>
    <ul class="guest">
        <li>123</li>
        <li>鲍鱼</li>
        <li>酸菜鱼</li>
    </ul>
    <script>
        let ul = document.querySelector('.order');
        let li = ul.children[0];
        let guest = document.querySelector('.guest')
        let lis = guest.children[1]
        guest.insertBefore(li, lis)
    </script>
</body>

</html>

克隆节点

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

1649687008303

若为true，则代表克隆时会包含后代节点一起克隆--深拷贝若为false，则代表克隆时不包含后代节点--浅拷贝默认为false

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: aqua;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div>
        <button>按钮</button>
    </div>
    <script>
        let div = document.querySelector('div');
        //cloneNode() 里面的参数默认为false false代表着只复制div这个节点，里面的子元素不复制。
        let newbox = div.cloneNode(false);
        //cloneNode() 里面的参数为true true代表着复制div这个节点，其子元素复制。
        let box = div.cloneNode(true)
        document.body.appendChild(newbox);   
        document.body.appendChild(box);
    </script>
</body>

</html>

删除节点

若一个节点在页面中已不需要时，可以删除它在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除语法： 1649687896969

注：如不存在父子关系则删除不成功删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

时间对象

实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间

获得当前时间：

1649835732907

获得指定时间：

1649835758099

时间对象方法

1649835779044

显示当前时间案例

setInterval(function() {
            let date = new Date();
            let year = date.getFullYear(),
                month = date.getMonth(),
                date1 = date.getDate(),
                day = date.getDay()
            hour = date.getHours(),
                min = date.getMinutes(),
                seconds = date.getSeconds();
            document.body.innerText = `${year}年${month+1}月${date1}日 星期${day} ${hour}时 ${min}分 ${seconds}秒`
        }, 1000)

时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

使用 getTime() 方法

1649835824181

简写 +new Date()

1649835872649

使用 Date.now()

1649835906274

无需实例化。但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳。

微博发布案例(1.0版)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>微博发布</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .w {
            width: 900px;
            margin: 0 auto;
        }
        
        .controls textarea {
            width: 878px;
            height: 100px;
            resize: none;
            border-radius: 10px;
            outline: none;
            padding-left: 20px;
            padding-top: 10px;
            font-size: 18px;
        }
        
        .controls {
            overflow: hidden;
        }
        
        .controls div {
            float: right;
        }
        
        .controls div span {
            color: #666;
        }
        
        .controls div .useCount {
            color: red;
        }
        
        .controls div button {
            width: 100px;
            outline: none;
            border: none;
            background: rgb(0, 132, 255);
            height: 30px;
            cursor: pointer;
            color: #fff;
            font: bold 14px '宋体';
            transition: all 0.5s;
        }
        
        .controls div button:hover {
            background: rgb(0, 225, 255);
        }
        
        .controls div button:disabled {
            background: rgba(0, 225, 255, 0.5);
        }
        
        .contentList {
            margin-top: 50px;
        }
        
        .contentList li {
            padding: 20px 0;
            border-bottom: 1px dashed #ccc;
            position: relative;
        }
        
        .contentList li .info {
            position: relative;
        }
        
        .contentList li .info span {
            position: absolute;
            top: 15px;
            left: 100px;
            font: bold 16px '宋体';
        }
        
        .contentList li .info p {
            position: absolute;
            top: 40px;
            left: 100px;
            color: #aaa;
            font-size: 12px;
        }
        
        .contentList img {
            width: 80px;
            border-radius: 50%;
        }
        
        .contentList li .content {
            padding-left: 100px;
            color: #666;
            word-break: break-all;
        }
        
        .contentList li .the_del {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 28px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="w">
        <!-- 操作的界面 -->
        <div class="controls">

            <!-- maxlength 可以用来限制表单输入的内容长度 -->
            <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
            <div>
                <span class="useCount" id="useCount">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
            </div>
        </div>
        <!-- 微博内容列表 -->
        <div class="contentList">
            <ul id="list">

            </ul>
        </div>
    </div>
    <script>
        let useCount = document.querySelector('#useCount');
        let area = document.querySelector('#area');
        let send = document.querySelector('#send');
        let ul = document.querySelector('#list');
        send.addEventListener('click', function() {
            let li = document.createElement('li');
            li.innerText = area.value;
            ul.appendChild(li);
            area.value = '';
            useCount.innerHTML = 0
        });
        area.addEventListener('input', function() {
            useCount.innerHTML = area.value.length
        })
    </script>

</body>

</html>

微博发布案例（2.0版）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/weibo.css" />
</head>

<body>
    <div class="w">
        <div class="controls">
            <img src="images/tip.png" alt="" /><br />
            <textarea placeholder="说点什么吧..." id="area" cols="30" rows="100" maxlength="200"></textarea>
            <div>
                <span class="useCount">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
            </div>
        </div>
        <div class="contentList">
            <ul>
                <!-- <li>
                    <div class="info">
                        <img class="userpic" src="./images/9.5/06.jpg" />
                        <span class="username">张良</span>
                        <p class="send-time">发布于 2022-4-7 15:12:23</p>
                    </div>
                    <div class="content">sdfdf</div>
                    <span class="the_del">X</span>
                </li> -->
            </ul>
        </div>
    </div>
    <script>
        let dataArr = [{
            uname: '司马懿',
            imgSrc: './images/9.5/01.jpg'
        }, {
            uname: '女娲',
            imgSrc: './images/9.5/02.jpg'
        }, {
            uname: '百里守约',
            imgSrc: './images/9.5/03.jpg'
        }, {
            uname: '亚瑟',
            imgSrc: './images/9.5/04.jpg'
        }, {
            uname: '虞姬',
            imgSrc: './images/9.5/05.jpg'
        }, {
            uname: '张良',
            imgSrc: './images/9.5/06.jpg'
        }, {
            uname: '安其拉',
            imgSrc: './images/9.5/07.jpg'
        }, {
            uname: '李白',
            imgSrc: './images/9.5/08.jpg'
        }, {
            uname: '阿珂',
            imgSrc: './images/9.5/09.jpg'
        }, {
            uname: '墨子',
            imgSrc: './images/9.5/10.jpg'
        }, {
            uname: '鲁班',
            imgSrc: './images/9.5/11.jpg'
        }, {
            uname: '嬴政',
            imgSrc: './images/9.5/12.jpg'
        }, {
            uname: '孙膑',
            imgSrc: './images/9.5/13.jpg'
        }, {
            uname: '周瑜',
            imgSrc: './images/9.5/14.jpg'
        }, {
            uname: '老夫子',
            imgSrc: './images/9.5/15.jpg'
        }, {
            uname: '狄仁杰',
            imgSrc: './images/9.5/16.jpg'
        }, {
            uname: '扁鹊',
            imgSrc: './images/9.5/17.jpg'
        }, {
            uname: '马可波罗',
            imgSrc: './images/9.5/18.jpg'
        }, {
            uname: '露娜',
            imgSrc: './images/9.5/19.jpg'
        }, {
            uname: '孙悟空',
            imgSrc: './images/9.5/20.jpg'
        }, {
            uname: '黄忠',
            imgSrc: './images/9.5/21.jpg'
        }, {
            uname: '百里玄策',
            imgSrc: './images/9.5/22.jpg'
        }, ];


        let area = document.querySelector('#area'),
            useCount = document.querySelector('.useCount'),
            contentList = document.querySelector('.contentList'),
            // 获取按钮
            send = document.querySelector('#send'),
            ul = document.querySelector('ul');
        send.addEventListener('click', function() {

            let users = getNum()
            let time = getTime()
                //创建li标签
            let lis = document.createElement('li');

            //创建div标签
            let info = document.createElement('div');
            //div 类名为 info
            info.classList.add('info');

            //创建span标签
            let username = document.createElement('span');
            //span标签 类名 username
            username.classList.add('username');
            username.innerText = users.uname;

            //创建图片
            let userpic = document.createElement('img');
            //图片标签 类名 userpic
            userpic.classList.add('userpic');
            userpic.src = users.imgSrc;

            //创建p标签
            let sendTime = document.createElement('p');
            //p标签类名为 sendTime
            sendTime.classList.add('sendTime');
            sendTime.innerHTML = `发布于:${time}`;

            //创建div标签
            let content = document.createElement('div');
            //类名为content
            content.classList.add('content')

            //创建一个span标签
            let the_del = document.createElement('div');
            //span标签为 the_del
            the_del.classList.add('the_del');
            the_del.innerText = 'x';
            the_del.addEventListener('click', function() {
                lis.remove()
            })

            ul.appendChild(lis);
            //将 info, content, the_del装入li标签里
            lis.append(info, content, the_del);
            //将userpic, username, sendTime装入div标签里
            info.append(userpic, username, sendTime);
            content.innerText = area.value;
            area.value = '';
            useCount.innerText = 0
        })
        area.addEventListener('input', function() {
            useCount.innerText = this.value.length
        })

        function getNum() {
            let i = Math.round(Math.random() * (dataArr.length - 1))
            let user = dataArr[i];
            return user;
        }

        function getTime() {
            let date = new Date();
            let year = date.getFullYear(),
                month = date.getMonth(),
                date1 = date.getDate(),
                day = date.getDay(),
                hour = date.getHours(),
                min = date.getMinutes(),
                seconds = date.getSeconds();
            date1 = date1 < 10 ? "0" + date1 : date1;
            hour = hour < 10 ? "0" + hour : hour;
            min = min < 10 ? "0" + min : min;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            return `${year}-${month+1}-${date1} 星期${day} ${hour}:${min}:${seconds}`
        }
    </script>
</body>

</html>

js：节点操作+时间对象