当前位置：网站首页>js之节点操作，为什么要学习节点操作

js之节点操作，为什么要学习节点操作

2022-04-23 06:25:00 【小白蛋挞】

获取元素的方式

1.DOM方式

逻辑性不强，繁琐

<div>woshi1</div>
    <span>woshispan</span>
    <ul>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
    </ul>
    <div class="box">
        <span class="er"></span>
    </div>

我们要一个个获取比如获取var ul = document.querarySelector('div'),然后获取ul里面的li,我们还要写var lis = ul.querySelectorAll('li'),比较繁琐

2.利用节点的层次关系，父子兄

逻辑性强，但是兼容性较差

节点

页面中的所有内容都是节点

节点至少有nodeType(节点类型）、nodeName(节点名称）、nodeValue(节点值）

元素节点nodeType为1，属性节点2，内容节点3，我们主要操作元素节点。

节点操作-父节点parentNode

返回最近的父节点，找不到返回null

  <div class="box">
        <span class="er"></span>
    </div>
<script>
        //父节点 parentNode
        var er = document.querySelector('.er');
        //  var box = document.querySelector('.box');之前
        //拿到父节点 得到的离元素最近的父节点 找不到返回null
        console.log(er.parentNode);
    </script>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP55m96JuL5oye,size_12,color_FFFFFF,t_70,g_se,x_16

节点操作-子节点

childNodes得到所有的(亲）子节点，包括元素节点和文本节点属性节点等

  <ul>
        <li class="lii">woshi1i</li>
        <li>woshi1i</li>
        <li>woshi1i</li>
        <li>woshi1i<span>123</span></li>
    </ul>
  // Dom
        var ul = document.querySelector('ul');
        // var lis = document.querySelectorAll('li');//之前
        //子节点 childNodes得到所有的子节点，包含元素节点和文本节点等等
        console.log(ul.childNodes);

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP55m96JuL5oye,size_16,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP55m96JuL5oye,size_20,color_FFFFFF,t_70,g_se,x_16

如果只想获得元素节点，需要专门处理(通过判断nodeType是否等于1），所以一般不提倡使用childNodes。

只想获得元素节点，用children(非标准），常用的

ul.children

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP55m96JuL5oye,size_17,color_FFFFFF,t_70,g_se,x_16

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

firstChild第一个子节点不管是什么节点，firstElementChild和lastElementChild可以获得第一个子元素节点和最后一个子元素节点，但是都具有兼容性。

实际开发中，我们常用ul.children[0]来返回第一个子元素节点，ul.children[ul.children.length-1]最后一个子元素节点，这样没有兼容性。

节点操作-兄弟节点

nextSibling下一个兄弟节点（所有都包括）

previousSibling，nextElementSibling，previousSibling都有兼容性问题

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

1.document.createElement('tagName')

2.添加到哪里去？

node.appendChild(child)，node后面追加元素。node.insertBefore(child，指定元素)

node是父级，child是子级

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        // document.createElement('tagName')
        // 创建节点
        var li = document.createElement('li');
        // 添加节点 node.appendChild(child) node父级 child子级
        var ul = document.querySelector('ul');
        ul.appendChild(li); //后面追加元素 
        //想在li123前面添加node.insertBefore(child,指定元素)
        var lii = document.createElement('li');
        ul.insertBefore(lii, ul.children[0]);
    </script>
</body>

节点操作-删除节点

node.removeChild(child)

阻止a链接跳转，href="javascript:;"或者javascript:void(0)

案例：简单版留言板

<body>


    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
        <!-- <li></li> -->
    </ul>
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您没有输入');
                return false;
            } else {
                // console.log(text.value);
                //创建元素
                var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"; //Z阻止链接跳转需要添加javascript:;或者javascript:void(0);
                // //添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                //删除元素 当前链接的li 
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        //删除a所在的li
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>


</body>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP55m96JuL5oye,size_20,color_FFFFFF,t_70,g_se,x_16

案例：动态生成表格

<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>
        table {
            width: 500px;
            margin: 100px auto;
            /* border-collapse: collapse; */
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
动态生成的 不需要有
            <!-- <tr>
                <td>卫英络</td>
                <td>JS</td>
                <td>100</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>小兰</td>
                <td>JS</td>
                <td>70</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>小红</td>
                <td>JS</td>
                <td>30</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>小明</td>
                <td>JS</td>
                <td>10</td>
                <td><a href="#">删除</a></td>
            </tr> -->
        </tbody>
    </table>
    <script>
        //1.准备好学生的数据
        var datas = [{
                name: '小明',
                subject: 'JS',
                score: 100
            }, {
                name: '小栏',
                subject: 'JS',
                score: 30
            }, {
                name: '小强',
                subject: 'JS',
                score: 90
            }, {
                name: '小于',
                subject: 'JS',
                score: 45
            }]
            //所有数据放到tbody里面的行 先有行再有单元格
            // 2、创建tr行
        var tb = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr');
            //生成了4个行
            tb.appendChild(tr);
            //创建单元格 跟数据有关系的 td 数量取决于属性个数
            for (var k in datas[i]) { //外循环内循环
                var td = document.createElement('td');
                //创建单元格的同时把对象里免得属性值给td
                tr.appendChild(td);
                td.innerHTML = datas[i][k];

            }
            //创建有删除的单元格
            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() {
                    tb.removeChild(this.parentNode.parentNode);
                }
            }
        }
    </script>
</body>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP55m96JuL5oye,size_20,color_FFFFFF,t_70,g_se,x_16