API-节点操作

柴九哥-

于 2022-03-28 22:39:57 发布

阅读量174

点赞数

分类专栏： webApi 文章标签： javascript

本文链接：https://blog.csdn.net/m0_66333916/article/details/123808534

版权

webApi 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

增加节点
   1、增加节点首先要创建一个节点
创建之后再增加节点
   createElement：创建一个新的元素，并返回创建的元素，它是一个dom对象，可以直接进行dom操作
       document.createElement('你想创建的元素标签名称')
注意这里要添加的是字符串型的标签
   （加在后面）父容器.appendChild(子元素节点对象--dom对象)
       box.appendChild(newP)
   （加在前面）父容器.insertBefore(需要插入的元素，参照位置)
       如果参照位置为null,则放在第一位
两个参数缺一不可

删除节点:
   删除当前元素的直接子元素
父元素.removeChild
   直接删除元素本身
       子元素.remove()

复制节点
要复制的元素.cloneNode()
cloneNode(深浅拷贝):可以实现节点的复制
false:只拷贝结构
true:拷贝结构的内部的内容

查询节点
   1、父节点查找
parentNode
       返回最近一级的父节点找不到返回为null
       语法：子元素.parentNode
btn.parentNode
   2、子节点
父元素.childNodes
ul.children（推荐使用）
       this.parentNode.style.display = 'none'

<!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">
            <img src="./images/9.6/tip.png" alt="" /><br />
            <!-- 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">
                <!-- <li>
                    <div class="info">
                        <img class="userpic" src="./images/9.5/01.jpg" />
                        <span class="username">名字</span>
                        <p class="send-time">发布于 时间</p>
                    </div>
                    <div class="content">内容</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'
            }]
            //思路
            //1、先完成整体部分，即完成点击按钮可发布内容
            //2、完成文本框字数实时改变
            //3、完成点击按钮删除功能
            //4、增加点击回车键也可以发布内容的功能
        let btn = document.querySelector('#send') //获取按钮
        let area = document.querySelector('#area') //获取文本框

        //1、点击内容新增li元素
        btn.addEventListener('click', function() {
            //1.1创建li
            let newLi = document.createElement('li')
            let liFather = document.querySelector('#list')
                //1.2新增节点
            liFather.appendChild(newLi)
                //1.3获取随机数更新发布的用户头像和用户名
            let index = parseInt(Math.random() * dataArr.length)
                //1.4输入内容展示
            let content = area.value
                //1.5用户发布的实时时间
            let date = new Date()
            let yearNow = date.getFullYear(), //年
                monthNow = date.getMonth() + 1, //月
                dayNow = date.getDate(), //日
                hourNow = date.getHours(), //时
                minNow = date.getMinutes(), //分
                secNow = date.getSeconds() //秒
            hourNow = hourNow < 10 ? '0' + hourNow : hourNow //小时补零
            minNow = minNow < 10 ? '0' + minNow : minNow //分钟补零
            secNow = secNow < 10 ? '0' + secNow : secNow //秒钟补零
                //1.6发布的整体内容展示
            newLi.innerHTML = ` <div class="info">
                                     <img class="userpic" src="${dataArr[index].imgSrc}" />
                                     <span class="username">${dataArr[index].uname}</span>
                                     <p class="send-time">发布于 ${yearNow}-${monthNow}-${dayNow} ${hourNow}:${minNow}</p>
                                 </div>
                                 <div class="content">${content}</div>
                                 <span class="the_del">X</span>`
                //3、点击删除功能
            let deleteLi = newLi.querySelector('.the_del')
            deleteLi.addEventListener('click', function() {
                //3.1删除父元素newLi
                deleteLi.parentNode.remove(newLi)
            })
        })

        //2.0通过文本框事件更新实时长度
        area.addEventListener('input', function() {
            //2.1获取文本框文字长度
            let valueLength = area.value.trim().length
            let useCount = document.querySelector('#useCount')
            useCount.innerHTML = valueLength
        })

        //4、回车键发布功能
        area.addEventListener('keydown', function(e) {
            if (e.key == 'Enter') { //4.1判断在文本框时是否按下回车键
                btn.click() //4.2触发按钮按下发布
            }
        })
    </script>

</body>

</html>

注：个人学习记录，欢迎交流和指正！

柴九哥-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
API-节点操作

增加节点 1、增加节点首先要创建一个节点创建之后再增加节点 createElement：创建一个新的元素，并返回创建的元素，它是一个dom对象，可以直接进行dom操作 document.createElement('你想创建的元素标签名称')注意这里要添加的是字符串型的标签（加在后面）父容器.appendChild(子元素节点对象--dom对象) box.appendChild(newP) （加在前面）父容器.insertBefo...
复制链接

扫一扫