【Web APIS】05-节点操作

SevgiliD

已于 2022-07-26 13:07:01 修改

阅读量219

点赞数

分类专栏： JavaScript初级文章标签：前端 javascript html

于 2022-07-24 17:51:46 首次发布

本文链接：https://blog.csdn.net/SevgiliD/article/details/125961087

版权

JavaScript初级专栏收录该内容

30 篇文章 0 订阅

订阅专栏

DOM-节点操作

节点简介
节点操作
三种动态创建元素的区别

节点简介

为什么要学节点操作？

通过节点对元素增删改查更简单

在这里插入图片描述
3. 节点概述

网页中的内容都是节点：标签，属性，文本，注释，包括换行
一般地，节点至少拥有三个属性：节点类型（noType），节点名称和节点值：

元素节点nodeType 为1
属性节点noType 为23
文本节点 noType 为3

实际开发中，节点操作的主要是元素节点

在这里插入图片描述

节点操作

节点层级

在这里插入图片描述

节点操作-父节点

node.parentNode
获取最近的父级节点：node.parentNode；找不到则返回null

<body>
    <div class="box">
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
    // 1.获取父节点
        // 如淘宝的关闭二维码菜单，既需要获取子元素，又需要获取父元素，点击子元素的x再关闭整个父元素（繁琐）
        var ul = document.querySelector('ul');
        // var box = document.querySelector('div');
       console.log( ul.parentNode);//获取最近的父级节点：node.parentNode；找不到则返回null

    </script>
</body>

节点操作-子节点

获取子节点两种方法

childNodes获取所有的子节点（包括文本，元素，属性节点），只获取元素节点需要封装函数处理，所以不推荐
children获取所有的子元素节点，目前实际开发常用的；用法：parentNode.children

<body>
    <div class="box">
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
        var ul = document.querySelector('ul');
    // 获取子节点
        // （1）childNodes获取所有的子节点（包括文本，元素，属性节点），只获取元素节点需要处理，不考虑
        // （2）children获取所有的子元素节点，目前实际开发常用的；用法：parentNode.children
       console.log( ul.children);//HTMLCollection(3) [li, li, li]

    </script>
</body>

节点操作-第一个子元素节点和最后一个子元素

获取第一个子元素节点和最后一个子元素节点三种方法

firstChild 第一个子节点，无论是文本节点还是元素节点（通常操作元素节点，不考虑此方法）
firstElementChild和lastElementChild返回第一个子元素节点和最后一个子元素节点；存在兼容性问题，但2020.6.18已弃用ie，后续大概率常用
目前为止，实际开发中的写法（通过children[]）:
console.log( ul.children[0]);;//返回第一个元素节点
console.log(ul.children[ul.children.length-1]);//返回最后一个元素节点

<body>
    <div class="box">
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
       var ul = document.querySelector('ul');
// 获取第一个子元素节点和最后一个子元素节点
        // （1）firstChild 第一个子节点，无论是文本节点还是元素节点（通常操作元素节点，不考虑此方法）
        // （2）firstElementChild和lastElementChild返回第一个子元素节点和最后一个子元素节点；存在兼容性问题，但2020.6.18已弃用ie，后续大概率常用
        // （3）目前为止，实际开发中的写法:
        console.log( ul.children[0]);;//返回第一个元素节点
        console.log(ul.children[ul.children.length-1]);//返回最后一个元素节点
    </script>
</body>

节点操作案例1：新浪下拉菜单

通过节点操作实现下拉菜单，巩固节点操作知识

在这里插入图片描述

案例代码：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .nav{
            background-color: #bfa;
            margin: 150px;
            text-align: center;
        }
        .nav>li{
            float: left;
            position: relative;
            width: 115px;
            height: 45px;
            line-height: 45px;
        }
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 45px;
            color: #333;
            font-size: 14px;
        }

        .nav ul{
            display: none;
            position: absolute;
            top: 45px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        .nav ul li{
            border-bottom: 1px solid #FECC5B;
        }
      .nav li a:hover{
        background-color: #bfa;
      }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
    </ul>
    <script>
        // 获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children;//获取四个小li
        // 循环注册事件 
        for(var i = 0;i<lis.length; i++){
            // 鼠标移入时
            lis[i].onmouseover = function(){
                // this.children[this.children.length-1].style.display = 'block';//选取li中最后一个子元素节点ul
                // this.children[1].style.display = 'block';//第二个子节点li
                this.lastElementChild.style.display = 'block';//直接选择最后一个子节点
            }
            lis[i].onmouseout = function(){
                this.children[this.children.length-1].style.display = 'none';
            }

        }
    </script>
</body>

节点操作-兄弟节点

nextSibbling下一个兄弟节点，包含文本节点等
console.log( div.nextSibling);//#text
上一个兄弟节点，包含文本
console.log(div.previousSibling);//#text；
常用3,4种，因为是兄弟元素节点，且被弃用ie的不兼容现在无需考虑
nextElementSibling下一个兄弟元素节点
console.log( div.nextElementSibling);
上一个兄弟元素节点，没有则返回null
console.log(div.previousElementSibling);

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div =document.querySelector('div');
        // 1.nextSibbling下一个兄弟节点，包含文本节点等
        console.log(  div.nextSibling);//#text 
        console.log(div.previousSibling);//#text；上一个兄弟节点，包含文本
        // 2.nextElementSibling下一个兄弟元素节点
      console.log(  div.nextElementSibling);
      console.log(div.previousElementSibling);//上一个兄弟元素节点，没有则返回null
    </script>
</body>

节点操作-创建和添加节点

创建（元素）节点
添加节点
使用示例：

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
    // 给页面添加一个新的元素：1.创建元素；2.添加元素
        // 1.创建元素节点
        var li = document.createElement('li');
        // 2.添加节点 node.appendChild（child）;node是父级，child是子级
            // -后面追加元素，类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3.node.insertBefore（child,指定元素）;在指定元素节点前添加节点
        var lili = document.createElement('li');
        ul.insertBefore(lili,ul.children[0]);//在ul的第一个子节点（内容为123）的前面添加一个li
    </script>
</body>

节点操作案例2：简单版发布留言

进行创建和添加节点练习的案例：每次输入内容点击发布，会新增一条留言

在这里插入图片描述

案例代码：

   <style>
        li{
            background-color: pink;
            width: 600px;
            margin: 10px 0;
            color: black;
        }
    </style>
</head>
<body>
    <textarea name="" id="message" cols="30" rows="10"></textarea><button>发布</button>
    <ul>
        <li>123</li>
    </ul>
    
    <script>
        // 获取元素
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        var text = document.querySelector('textarea');
        // 绑定点击事件
        btn.onclick = function(){
            if(text.value == ''){
                alert('你输入的内容为空');
                return false;
            }else{
                var li = document.createElement('li');
                ul.appendChild(li);
                // li.innerHTML = text.value;
                li.innerHTML = document.getElementById('message').value;//取出textarea的值赋给li的innerhtml
                document.getElementById('message').value = '';

            }
            
        }
      
    </script>
</body>

节点操作-删除节点

在这里插入图片描述
用法示例：点击一次按钮删除一个
代码示例：

<body>
    <button>删除一个</button>
    <ul>
        <li>苹果</li>
        <li>梨</li>
        <li>香蕉</li>
    </ul>
    <script>
    //删除节点 node.removeChild();node父节点
    // 获取元素
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');
    // 绑定事件 处理程序
    btn.onclick = function(){
        if(ul.children.length == 0){
            // this.disabled = true;若想设置删完禁用点击
            //设置提示删除完毕
            alert('你已经全部删除了，亲');
            return false;
        }else{
            ul.removeChild(ul.children[0]); 
        }
    }
    </script>
    
</body>

节点操作案例3：删除留言

在案例2的基础上新增删除功能

在这里插入图片描述

案例代码：

 <style>
        li {
            background-color: pink;
            width: 600px;
            margin: 10px 0;
            color: black;

        }

        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id="message" cols="30" rows="10"></textarea><button>发布</button>
    <ul>

    </ul>


    <script>
        // 获取元素
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        var text = document.querySelector('textarea');
        // 绑定点击事件
        btn.onclick = function () {
            if (text.value == '') {
                alert('你输入的内容为空');
                return false;
            } else {
                var li = document.createElement('li');
                ul.appendChild(li);
                // li.innerHTML = text.value;
                li.innerHTML = document.getElementById('message').value + "<a href=javascript:;>删除</a>";//取出textarea的值赋给li的innerhtml
                document.getElementById('message').value = '';

                // 点击删除，山吹当前a链接父节点
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        ul.removeChild(this.parentNode);
                    }
                }


            }

        }


    </script>

</body>

节点操作-复制节点

在这里插入图片描述

动态生成表格案例

案例需求：表格根据数据的变化而变化
实现思路：由于未采用数据库，通过定义数组，在数组中以对象的形式存入定义好的数据来模拟数据；然后通过上述知识实现此案例

在这里插入图片描述

案例代码：

   <style>
        table {
            border-collapse: collapse;
            margin-top: 200px;
            margin-left: 500px;
        }
        table th{
            border: 1px solid black;
            width: 80px;
            height: 40px;
            text-align: center;
            background-color: cornsilk;
        }

        table td{
           
            border: 1px solid black;
            width: 80px;
            height: 40px;
            text-align: center;

        }

    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
         </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>

        //加入数据
        var datas = [
            {
                name:'张三',
                subject:'JavaScript',
                score:'100'
            },
            {
                name:'李四',
                subject:'JavaScript',
                score:'95'
            },
            {
                name:'王五',
                subject:'JavaScript',
                score:'98'
            },
            {
                name:'赵六',
                subject:'JavaScript',
                score:'92'
            }
        ];
        //创建行，有几个人就创建几行
        var tbody =document.querySelector('tbody')
        for(var i = 0 ; i < datas.length ; i++){
            //创建行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //创建单元格
            for (var k in datas[i] ){
                var td = document.createElement("td");
                td.innerText = datas[i][k];
                tr.appendChild(td);
            }
            //创建删除单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="JavaScript:;">删除</a>';
            tr.appendChild(td);
        }
        var as = document.querySelectorAll('a');
        for (var i = 0 ; i <as.length ; i++){
            as[i].onclick = function(){
                //点击a 删除当前行
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

        // for (var k in Obj){
        //      k 得到的是属性名
        //      dbj[k] 得到的是属性值
        // }
    </script>
</body>
</html>