节点操作~JS

最新推荐文章于 2023-05-11 11:05:57 发布

&Mark&

最新推荐文章于 2023-05-11 11:05:57 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.csdn.net/qq_64970126/article/details/124380359

版权

javascript 专栏收录该内容

68 篇文章 4 订阅

订阅专栏

2、节点操作

A:动态创建节点的三种方法：

1、document.write()。注意：页面文档流加载完毕，再调用就会导致页面重绘

2、element.innerHTML将内容写入某个dom节点，不会导致页面重绘

3、document.createElenent()创建多个元素

B：添加和删除节点方法

1、element.appendChild(),将节点添加到指定父节点的子节点的末尾，什么什么之后类似于push（）添加数组元素的方法

2、element.insertBefore(节点，指定预插入的位置),将节点添加到指定父节点的指定子节点的前面，什么什么之前类似于unshift()方法；

3、element.removeChild（删的节点）用于删除节点，并且会返回一个值

案例1：留言框（源码最低部）

总结：获取文本按钮ul三者节点，对事件注册事件，在程序处理的时候创建ul里的li，并改写填充li里面的内容，完成以后插入到指定位置当中，对删除的事件处理方法：先给每一个事件注册类型，当我们onclick就删除父级盒子，里面的内容动态消失。ul.removeChild(this.parentNode);this.parentNode=li，准确定位到时a[i]的父亲li，如果只写li就不能识别是哪一个的li通过往上寻找可以准确定位到是属于a[i]的父亲，删除的是ul里面a[i]的父亲（li）

案例2：动态学生成绩表（源码最低部）

总结：创建元素将元素插入到指定父级元素的子元素的指定位置，对于需要输入内容的地方我们使用innerHTML的方法去修改标签内的内容，对于删除标签的方法我们利用element.removeChild（）去删除对应的节点，括号里面指定删除的节点，我们需要从升序式书写，从子级找到父级准确定位。

案例1：留言框

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid rgb(91, 164, 120);
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background: -webkit-linear-gradient(left, rgb(17, 121, 239), rgb(28, 236, 208), rgb(91, 164, 120), rgb(16, 244, 156));
            color: white;
            font-size: 14px;
            margin: 15px 0;
            overflow: hidden;
        }
        
        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        var text = document.querySelector("textarea");
        var button = document.querySelector('button');
        var ul = document.querySelector('ul');
        button.onclick = function() {
            //    注意点一  // if条件判断符号是两个等号
            if (text.value == "") {
                alert("您输入的内容有误，请重新输入");
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                ul.insertBefore(li, ul.children[0]);
                var a = document.querySelectorAll('a');
                for (var i = 0; i < a.length; i++) {
                    // 注意点二// 细节
                    a[i].onclick = function() {
                        // 基本语法格式：node.removeChild(child);我们要点击a删除a的父级li这一个大盒子
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
        button.onmouseout = function() {
            // 鼠标离开文本框内容清空
            text.value = "";
        }
    </script>


</body>

</html>

案例2：动态学生成绩表

<!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>
        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;
        }
        
        tr td a {
            text-decoration: none;
            color: aqua;
        }
    </style>
</head>

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

        </tbody>
    </table>
    <script>
        // 1.先去准备好学生的数据
        var datas = [{
            name: '你好',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '你好',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '你好',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '你好',
            subject: 'JavaScript',
            score: 88
        }];

        var tbody = document.querySelector('tbody');
        // 外层控制行，内层控制列，tr的行取决于有几个人
        for (var i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr');
            // 将节点添加到指定父节点的子节点的末尾
            tbody.appendChild(tr);
            // td的列取决于数组对象中有几个属性
            for (var k in datas[i]) {
                var td = document.createElement('td');
                // 改写td节点内容置入对象的值
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            var td = document.createElement("td");
            // 把td插入到父元素中的子元素的后面
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        var a = document.querySelectorAll('a');
        for (var y = 0; y < a.length; y++) {
            // 变量名y的值不可以定义为a;
            a[y].onclick = function() {
                // this.parentNode.parentNode书写从点击的属性值开始写往上面去寻找这一列的位置
                // a是td的子元素td是td的兄弟，它们共同的父亲是td就是a有父亲和爷爷，我们点击删除爷爷就是this.parentNode.parentNode
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
        // 遍历数组中的对象，获取单个数组中的一个部分
    </script>
</body>

</html>

&Mark&

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
节点操作~JS

节点操作：1、element.innerHTML将内容写入某个dom节点，不会导致页面重绘2、element.appendChild(),将节点添加到指定父节点的子节点的末尾3、element.insertBefore(节点，指定预插入的位置)4、element.removeChild（删的节点）用于删除节点节点案例：留言框、动态学生成绩表
复制链接

扫一扫