DOM ☞ 节点操作

最新推荐文章于 2024-07-26 11:41:15 发布

꧁༺code夕颜༻꧂

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量112

点赞数

分类专栏： DOM JS 前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_44259210/article/details/125461826

版权

前端同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

DOM

3 篇文章 0 订阅

订阅专栏

第四章：节点操作

文章目录

第四章：节点操作
前言
一、节点简介
二、节点层级
三.综合案例
总结

前言

节点操作是为了更快的，方便的获取元素

一、节点简介

nodetype
nodeName
nodeValue

元素节点 nodetype = 1
属性节点 nodetype = 2
文本节点（文字，空格，换行）= 3

主要操作的是元素节点

二、节点层级

1.父子节点

node.parentNode
parentNode.children

<div>我是一个div</div>
    <span>我是span</span>
    <ul>
        <li>我是一个小li</li>
        <li>我是一个小li</li>
        <li>我是一个小li</li>
        <li>我是一个小li</li>
    </ul>
    <div class="box">
        <span class="erweima">X</span>
    </div>
      <script>
      //   1.父节点  parentNode
      var erweima = document.querySelector('.erweima');
    //   var box = document.querySelector('.box');
    console.log(erweima.parentNode);  //先得到span元素,然后根据父节点parentNode得到离元素最近的父级节点box.如果指定的节点没有父节点则但会null

    // DOM提供的方法(API)获取
    var ul = document.querySelector('ul');
    var lis = ul.querySelector('li');
    // 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等
    console.log(ul.childNodes);
    // children 获得所有元素的子元素的节点 也是我们实际开发常用的
    console.log(ul.children);
      </script>

2.兄弟节点

nextSibling
nextElementSibling

<div>123</div>
    <span>夕颜</span>
    <script>
        var div = document.querySelector('div');
        // nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // nextElementSibling 下一个元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling); //上一个节点
        
    </script>

3.创建节点

用到的方法

createElement
insertBefore

<!-- 创建节点 -->
    <ul>
    <li>666</li>
    </ul>
    <script>
        // 创建节点元素 createElement
        //添加节点 node.appendChild(child) node父级   child子级  追加元素 从后面添加元素
        var li = document.createElement('li');  //创建节点还需要添加节点
        var ul = document.querySelector('ul');
          ul.appendChild(li);
        //   添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili,ul.children[0]);
        // 想要在页面添加一个新的元素  1.创建元素  2.添加元素
    </script>

案例
简单的发布留言案例

CSS设置

<style>
        li {
            width: 500px;
            height: 20px;
            margin: 15px 20px;

            background-color: pink;
            color: red;
        }
    </style>

HTML设置

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

    </ul>

JS设置

<script>
            // 获取元素
            var text = document.querySelector('textarea');
            var btn = document.querySelector('button');
            var  ul = document.querySelector('ul');
            // 注册事件
            btn.onclick = function() {
                if (text.value == '') {
                    alert('请输入信息')
                    return false ;
                }  else {
                    // 创建一个li
                     var li = document.createElement('li')
                     li.innerHTML = text.value;
                // 添加元素
                //   ul.appendChild(li);
                ul.insertBefore(li,ul.children[0]);
                }
                
            }
        </script>

3.删除节点

用到的方法

removeChild
CSS设置

<style>
        li {
            width: 200px;
            height: 30px;
            margin: 15px 20px;
            list-style: none;
            background-color: green;
            line-height: 30px;
        }
    </style>

HTML设置

<button>删除</button>
    <ul>
        <li>夕颜1</li>
        <li>夕颜2</li>
        <li>夕颜3</li>
    </ul>

JS设置

<script>
        // 获取元素
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
       
        // 点击按钮依次删除元素
        btn.onclick = function() {
           
            if (ul.children.length == 0 ){
                this.disabled = true;  //如果所有元素被删除完毕，那么就禁用button按钮
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

案例
❤删除留言板

CSS设置

<style>
        li {
            width: 300px;
            height: 30px;
            margin: 15px 20px;
            line-height: 30px;
            background-color: pink;
            color: red;
        }
        li a {
            float:right;
        }
    </style>

HTML设置

  <!-- 核心思路 点击按钮就添加留言到以一个新的<li> -->
        <textarea name="" id="" cols="30" rows="10"> 123</textarea>
        <button>发布</button>
        <ul>
      </ul>

JS设置

<script>
            // 获取元素
            var text = document.querySelector('textarea');
            var btn = document.querySelector('button');
            var  ul = document.querySelector('ul');
            // 注册事件
            btn.onclick = function() {
                if (text.value == '') {
                    alert('请输入信息')
                    return false ;
                }  else {
                    // 创建一个li
                     var li = document.createElement('li')
                     li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";  //阻止链接跳转要添加javascript:void(0);或者javascript:;
                // 添加元素
                //   ul.appendChild(li);
                ul.insertBefore(li,ul.children[0]);

                // 删除元素，当前链接的父亲
                var as = document.querySelectorAll('a');
                for(var i=0;i<as.length; i++) {
                    as[i].onclick = function() {
                        //node.removeChild(child); 删除的是li  当前a所在的li  this.parentNode;
                        ul.removeChild(this.parentNode);
                    }

                }
            }
                
         }
        </script>

4.复制节点

用到的方法

cloneNode

<ul>
        <li>1</li>
        <li>2</li>
        <li>3333</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
         var lili = ul.children[2].cloneNode(true); //如果括号内的参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
         ul.appendChild(lili);//如果括号内的参数为true，则是深拷贝，复制里面的内容

    </script>

三.综合案例

动态生成表格
CSS设置

<style>
        table {
        width: 500px;
       margin: 100px auto;
       border-collapse:collapse; 
        text-align: center;
        }
        th,
        td {
            border: 1px solid #333;
        }
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
        a   {
            text-decoration: none;  /*去掉链接的下划线*/
           }
    </style>

HTML设置

<table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
      <tbody>        
      </tbody>
    </table>

JS设置

<script>
        // 首先准备好学生数据 ，利用对象存储  
        // 所有数据都是放在tbody行内
        var datas = [
        {
            name: 'feifeiyu',
            subject: 'JS',
            score : 40 

        },
        {
            name: '飞飞🐟yu',
            subject: 'JS',
            score : 90 

        },
        {
            name: '👉蠢鱼👈',
            subject: 'JS',
            score : 60 

        },
        {
            name: '👉夕颜👈',
            subject: 'JS',
            score : 100 

        }
        ];
        // 往tbody里面创建行： 有几个人（通过数组长度）创建几行；
        var tbody = document.querySelector('tbody');
        for (var i=0;i<datas.length ;i++) {
            // 1.创建 tr行
             var tr = document.createElement('tr');
             tbody.appendChild(tr);
            // 2.行里面创建单元格 td  单元格的数量取决于每个对象里面的属性个数  for循环遍历对象
            for (var k  in datas[i]) { //里面的for循环是管列操作 td
                //   创建单元格
                  var td = document.createElement('td');
                  //   把对象的属性值 给td  datas[i][k] 给td
                  td.innerHTML = datas[i][k];
                  tr.appendChild(td);             
           } 
        //    创建删除单元格
        var td = document.createElement('td');
        td.innerHTML = "<a href='javascript:;'>删除</a>";
        tr.appendChild(td);          
        }
        // 4.删除操作开始
        var as = document.querySelectorAll('a');
         for (var i=0 ; i<as.length;i++) {
            as[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
                         
        }
    </script>

总结

增加元素，将元素添加进去

appendChild(元素)
insertBefore(元素)
删除元素
removeChild
修改
修改元素属性： scr href title;
修改元素内容： innerHTML innerText
修改表单元素： value type disabled;
修改元素样式: style className;
查获取元素
querySelector querySelectorAll
利用节点获取
父parentNode 子children 兄previousElementSibling nextElementSibling
属性操作主要针对自定义属性
setAttribute 设置DOM的属性值
getAttribute 得到DOM的属性值
removeAttribute 移除属性