Front-end JS articles (eight) - DOM node operation & DOM summary

Language 2023-06-24 20:45:09 views: null

DOM

DOM mainly explains four parts: getting elements, event basis, operating elements, and node operations. The first three have been learned in the previous section. In this section, we will learn node operations.

1. Node operation

1.1 Why do we need node operations

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-d7Soa2wC-1666718464316)(Typora_image/367.png)]

1.2 Node overview

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-d7yC9RnW-1666718464318)(Typora_image/368.png)]

Create a new .html file and execute the code as follows

<!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>
</head>
<body>
    <!-- 1.节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <!-- ul>li*4 -->
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>

    <script>
        // 2.为什么需要节点
        // 如果没有节点，我想要获取div和span标签，通过docment.querySelector('div')和docment.querySelector('span')
        // 如果没有节点，我想要获取li标签，通过docment.querySelector('ul')先拿到ul标签，再querySelectorall('li')

        // 如果有节点，想要得到div,先用以前的方法docment.querySelector('div')把div拿到，再用div的下一个兄弟，就能拿到span
        // 如果有节点，想要得到li,先拿到父亲元素ul,再用父亲的孩子就可以拿到li
        
     </script>
    <div class="box">
        <!-- span.erweima -->
        <span class="erweima">x</span>
    </div>

    <script>
        // 如果没有节点，比如关闭二维码案例，必须先获取span,再获取到div,这样才能进行关闭操作
        // 如果有节点，比如关闭二维码案例，先拿到span,再用span的父亲就可以拿到div

    </script>
    <script>
        // 3.需求:获取box的节点
        var box = document.querySelector('.box');
        // 打印元素对象
        console.dir(box);
    </script>
    
</body>
</html>

The effect is as follows

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-XnTiVCLQ-1666718464321)(Typora_image/369.png)]

1.3 Node level

1.3.1 Parent node

node.parentNode

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-7OjnWEzS-1666718464324)(Typora_image/370.png)]

Create a new .html file and execute the code as follows

<!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>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">x</span>
        </div>
    </div>
    <script>
        // 需求：点击左上角的x号，关闭二维码图片
        // 1.父节点 parentNode     querySelecor的快捷键qs
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box')   这是以前的写法
        erweima.parentNode;    // 获取了bo节点，利用节点关系，div和span是父子关系
        // 得到的是离元素最近的父级节点   亲爸爸   如果找不到父节点，返回为空
        console.log(erweima.parentNode);
        console.log('---------');
        // 获取demo的父节点
        var demo = document.querySelector('.demo')
        console.log(demo.parentNode);
        console.log('---------');
        // 获取html的父节点
        var html = document.documentElement;
        console.log(html.parentNode);
        console.log('---------');

    </script>
</body>
</html>

The effect is as follows

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-xRpAOmja-1666718464326)(Typora_image/371.png)]

1.3.2 Child nodes

1.parentNode.childNodes (标准)
2.parentNode.children   (非标准)

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-RjtvidKZ-1666718464328)(Typora_image/372.png)]

Create a new .html file and execute the code as follows

<!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>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <!-- ul>li*4 -->
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <!-- ol>li*4 -->
    <ol>
        <!-- 多行写快捷键 shift + alt + a -->
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>
    <!-- .demo>.box>span.ervweima -->
    <div class="demo">
        <div class="box">
            <span class="ervweima">x</span>
        </div>
    </div>
    <script>
        // 以前的做法：用DOM提供的方法(API)获取,先获取ul,再得到里面的li
        /* var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li'); */

        // 1.子节点    
        //  方法一：childNodes  所有的子节点  包含 元素节点  文本节点等
       /*  var ul = document.querySelector('ul');
        ul.childNodes;    // 不光会返回li,还有像换行这样的文本节点
        console.log(ul.childNodes);
        console.log(ul.childNodes[0]);  // 拿到第一个文本节点
        console.log(ul.childNodes[0].nodeType);        //    3 拿到第一个文本节点的nodeType属性
        console.log(ul.childNodes[1].nodeType);         //   1 拿到第一个li的nodeType属性 */

        // 如果只想要获得里面的元素节点，则需要专门处理，一般不提倡使用childNodes
        /* var ul = document.querySelector('ul');
        for (var i = 0; i < ul.childNodes.length; i++) {
            if (ul.childNodes[i].nodeType == 1) {
                // ul.childNodes[i]是元素节点
                console.log(ul.childNodes[i]);
            }
        } */
        // 方法二：children 非标准    获取所有的子元素节点
        // parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不反悔
        // 虽然chilren 是一个非标准，但是得到了各个浏览器的支持
        var ul = document.querySelector('ul');
        ul.children;
        console.log(ul.children);
    </script>
</body>
</html>

The effect is as follows

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-qnmw3ZyF-1666718464331)(Typora_image/373.png)]

The effect is as follows

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-W82cO3Gy-1666718464332)(Typora_image/374.png)]

1.3.3 Get the first child element and the last child element

1.parentNode.firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
2.parentNode.lastChild  返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
// 下面两个方法有兼容性问题，IE9以上才支持
3.parentNode.firstElementChild  // 返回第一个子元素节点，找不到则返回null
4.parentNode.lastElementChild   // 返回最后一个子元素节点，找不到则返回null

In actual development, firstChild and lastChild contain other nodes, which is inconvenient to operate, and firstElementChild and lastElement have compatibility problems, so how do we get the first node or the last child element node?

solution:

1. If you want the first child element node, you can use parentNode.children[0]

Create a new .html file and execute the code as follows

<!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>
</head>
<body>
    <!-- ol>li*4 -->
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1.firstchild  第一个子节点，不管是文本节点还是元素节点
        ol.firstChild;   // 获取ol里面子节点的第一个子节点
        console.log(ol.firstChild);    //  #text  
        // 2.lastChild   返回最后一个子节点  不管是文本节点还是元素节点
        ol.lastChild;  
        console.log(ol.lastChild);  //  #text

        // 1.firstElementChild 返回第一个子元素节点  ie9以上支持
        ol.firstElementChild;
        console.log(ol.firstElementChild);  // 获取了第一个子元素节点  li

        // 2.last.ElementChild 返回最后一个子元素节点 ie9以上支持
        ol.lastElementChild;
        console.log(ol.lastElementChild);  // 获取了最后一个子元素节点 li

        // 3.实际开发中的写法，既没有兼容性问题又返回第一个子元素
        ol.children;  // children 返回的是伪数组
        console.log(ol.children);
        ol.children[0];       // 返回第一个
        console.log(ol.children[0]);   
        ol.children[3];       // 返回第四个
        console.log(ol.children[3]);

        // 实际开发过程中，往往最后一个子元素不确定，可以写成
        
        ol.children[ol.children.length - 1];

        console.log(ol.children.length);
        console.log(ol.children[ol.children.length - 1]);



    </script>
</body>
</html>

The effect is as follows

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-TYiBHKO3-1666718464337)(Typora_image/375.png)]

1.3.4 Example: drop-down menu

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-MYJUA6ce-1666718464338)(Typora_image/376.png)]

Create a new .html file and execute the code as follows

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新浪下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
            border-top: 2px solid #ff8500;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 100px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li:hover {
            background-color: #eee;
        }

        .nav>li>a:hover {
            background-color: #eee;
            color: #ff8400;
        }

        .nav ul {
            /* 隐藏 */
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #fecc5b;
        }

        .nav ul li a:hover {
            background-color: #fff5da;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="#">博客</a>
            <ul>
                <li><a href="#">博客评论</a></li>
                <li><a href="#">未读提醒</a></li>
            </ul>
        </li>
        <li>
            <a href="#">邮箱</a>
            <ul>
                <li><a href="#">免费邮箱</a></li>
                <li><a href="#">VIP邮箱</a></li>
                <li><a href="#">企业邮箱</a></li>
                <li><a href="#">新浪邮箱客户端</a></li>
            </ul>
        </li>
        <li>
            <a href="#">网站导航</a>
            <ul>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </li>
    </ul>

    <script>
        // 案例分析：
        // 1.导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件
        // 2.核心原理：当鼠标经过li里面的第二个孩子 ul显示，当鼠标离开，则ul隐藏

        // 1.获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children;   // 得到4个小li
        // 2.循环注册事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

</html>

The effect is as follows

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-M7pMenI7-1666718464341)(Typora_image/377.png)]

1.3.5 Brother nodes

1.node.nextSibling    // 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点
2.node.previousSibling // 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点
// 下面两个方法有兼容性问题，IE9以上才支持
3.node.nextElementSibling // 返回当前元素下一个兄弟节点，找不到则返回null
4.node.previousElementSibling // 返回当前元上一个兄弟节点，找不到则返回null

How to solve the compatibility problem? —— Encapsulate a function by yourself

Create a new .html file and execute the code as follows

<!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>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        console.log(div.nextSibling);   // #text
        console.log(div.previousSibling);  // #text
        // 下面两行代码需要ie9才能用
        console.log(div.nextElementSibling); // span元素
        console.log(div.previousElementSibling);  // null   因为div的上面没有兄弟

        // 如何解决兼容性问题
        // 自己封装一个函数
        function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextSibling) {
                if (el.nodeType == 1) {
                    return el;
                }
            }
            return null;
        }

    </script>
</body>
</html>

The effect is as follows

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-bFpXCokS-1666718464343)(Typora_image/378.png)]

1.3.6 Create and add nodes

[Tip] Want to add a new element to the page: 1. Create element; 2. Add element

document.createElement('tagName')

The document.createElement() method creates the HTML element specified by tagName. Because these elements did not exist originally, they were dynamically generated according to our needs, so we also call it dynamic creation of element nodes.

node.appendChild(child)

The node.appendChild() method adds a node to the end of the list of children of the specified parent node. Similar to the after pseudo-element in css.

node.insertBefore(child,指定元素)

The node.insertBefore() method adds a node before the parent node. Similar to the before pseudo element in css

Create a new .html file and execute the code as follows

<!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>
</head>
<body>
    <ul>
        <li>123</li>
    </ul>
    <!-- 需求：在上行ul里面动态创建一个li -->
    <script>
        // 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])

        // 4.我们想要页面添加一个新的元素：1.创建元素；2.添加元素
        
    </script>
</body>
</html>

The effect is as follows

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-NpLZqys2-1666718464344)(Typora_image/379.png)]

1.3.7 Case: Post a message

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-RomM4agd-1666718464347)(Typora_image/380.png)]

Create a new .html file and execute the code as follows

<!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>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2.注册事件
        btn.onclick =function() {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li才能赋值
                li.innerHTML = text.value;
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li,ul.children[0])  // 新创建的一个永远在第一个的前面
            }
        }
    </script>

</body>
</html>

The effect is as follows

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-ZxYi6c8D-1666718464350)(Typora_image/381.png)]

1.3.8 Delete node

node.removeChild(child)

The node.removeChild() method removes a child node from the DOM, returning the removed node.

Create a new .html file and execute the code as follows

<!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>
</head>
<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        //  需求1：删除熊大这一行
        // 1.获取元素
        var ul = document.querySelector('ul');
        // 2.删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 需求2：通过点击删除按钮进行删除
        // 3.点击按钮依次删除里面的孩子
        var btn = document.querySelector('button');
        btn.onclick = function() {
            // 如果删除完了之后，按钮禁用
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0])
            }
        } 
    </script>
</body>
</html>

The effect is as follows

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-0EnlcTbn-1666718464352)(Typora_image/382.png)]

1.3.9 Case: delete message

case analysis:

1. When we assign the value in the text field to li, add a delete link

2. Need to get all the links, when we click on the current link, delete the li where the current link is located

3. To prevent link jumping, you need to add javascript:void(0); or javascript:;

Create a new .html file and execute the code as follows

<!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>
        ul {
            margin-top: 50px;
        }
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(189, 196, 193);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
        li a {
            float: right;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2.注册事件
        btn.onclick =function() {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li才能赋值
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li,ul.children[0])  // 新创建的一个永远在第一个的前面
                // (3) 删除元素  删除的是当前链接的li 它的父亲
                // 首先要获取所有的链接
                var as = document.querySelectorAll('a');
                // 利用遍历，给所有的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>

</body>
</html>

The effect is as follows

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-ziqNMZwI-1666718464353)(Typora_image/383.png)]

1.3.10 Copy node (clone node)

node.cloneNode()

The node.cloneNode() method returns a copy of the node on which it was called. Also known as clone node/copy node

Note: (nodes include element nodes, text nodes, attribute nodes, etc.)

1. If the parentheses are empty or false, it is a shallow copy, that is, only the copied node itself is cloned, and the child nodes inside are not cloned.

2. If the parenthesis parameter is true, it is a deep copy, which will copy the node itself and all its child nodes.

Create a new .html file and execute the code as follows

<!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>
</head>
<body>
    <!-- ul>li*3 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // 需求1：把第一个li复制一份
        var ul = document.querySelector('ul');
        // 1.node.cloneNode(); 括号为空或者里面是false,浅拷贝  只复制标签不复制里面的内容
        // 2.node.cloneNode(true); 括号为true,深拷贝  只复制标签而且复制里面的内容
        var lili = ul.children[0].cloneNode();
        // 添加  浅拷贝
        ul.appendChild(lili);
        var second = ul.children[1].cloneNode(true);
        // 添加  深拷贝
        ul.appendChild(second);
    </script>
</body>
</html>

The effect is as follows

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-FalcLgFR-1666718464357)(Typora_image/384.png)]

1.4 Case: dynamically generate tables

The table changes accordingly according to the amount of data

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-St2dgh5Q-1666718464359)(Typora_image/385.png)]

Create a new .html file and execute the code as follows

<!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;
        }
    </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:'语文',
            score:90
        },{
            name:'李四',
            subject:'数学',
            score:100
        },{
            name:'王五',
            subject:'英语',
            score:80
        },{
            name:'赵六',
            subject:'地理',
            score:88
        }];
        // 2.往tbody里面创建行  里面有几个人(通过数组的长度可以得到)，我们就创建几行 
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {      //  外面的for循环管行 tr
            // 1.创建 tr 行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2.行里面创建单元格(跟数据有关系的三个单元格) td 单元格的数量取决于每个对象里面的属性个数  可以用for循环遍历对象得到data[i]
            // for ...in 语句用于对数组或者对象的属性进行循环操作。 详情见对象专栏
            for (var k in datas[i]) {                // 里面的for循环管列 td
                // 创建单元格
                var td = document.createElement('td');
                // 把对象里面的属性值  datas[i][k] 给 td
                console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                // 添加到行里面
                tr.appendChild(td);
            }
            // 3.创建有删除2个字的单元格
            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() {
                // 点击a 删除当前a的所在的行(链接的爸爸的爸爸)，因为链接的爸爸是单元格td,使用node.removeChild(child)
                tbody.removeChild(this.parentNode.parentNode)
            }
        }





        /* for (var k in obj) {
            k 得到的是属性名
            obj[k] 得到的是属性值
        } */

    </script>
    
</body>
</html>

The effect is as follows

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-C31ignPH-1666718464361)(Typora_image/386.png)]

1.5 The difference between the three dynamically created elements

The difference between the three ways of creating elements effect
1.document.write() create element
2.innerHTML create element
3.document.createElement() create element

Example code:

<!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>
</head>
<body>
    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        // 三种创建元素方式区别
        // 1.document.write() 创建元素    如果页面文档流加载完毕，再调用这句话会导致页面重绘
        var btn = document.querySelector('button');
        btn.onclick = function() {
            document.write('<div>123</div>');
        }
        // 需求：点击button按钮后，添加新元素。结果用write()之后，一点击按钮，会出现页面重绘的现象，即之前的格式
        //    都没有了，它会用<div>123</div>新建一个页面。
        //  类似于
        /* window.onload = function() {
            document.write('<div>123</div>')
        }            当整个页面加载完，再去写<div>123</div>这个标签 */


        // 需求：想在<div class="inner"></div>和<div class="create"></div>里面创建a链接
        // 2.innerHTML 创建元素

        var inner = document.querySelector('.inner');
        inner.innerHTML = '<a href="#">百度</a>';
        // 创建多个时
        for (var i = 0;i <= 100;i++) {
            inner.innerHTML += '<a href="#">百度</a>'
        }
        // 优化
        var arr = [];
        for (var i = 0; i <= 100;i++) {
            arr.push('<a href="#">百度</a>');
        }
        // 3.document.createElement()  创建元素
        var create = document.querySelector('.create');
        var a = document.createElement('a');
        create.appendChild(a);
        // 创建多个时
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }

    </script>
</body>
</html>

Summarize:

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-QuKO32l0-1666718464363)(Typora_image/387.png)]

2. DOM key core

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-qNfszK7h-1666718464366)(Typora_image/388.png)]

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-tnAdY3lG-1666718464367)(Typora_image/389.png)]

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-JNOi2byg-1666718464370)(Typora_image/390.png)]

Guess you like

Origin blog.csdn.net/m0_57021623/article/details/127525108
Recommended
TIOBE May list: Fortran “resurrected” into Top 10
GCC 14.1 released
Ranking
B. Little Girl and Game【1300 / 回文字符串 博弈论】
CIKERS Shane 20190613
"Javascript advanced programming" study notes - the constructor and prototype
beeline hiveserver2 start
springboot - Automatically backup mysql data every day
Data Storage Full Solution--Detailed Persistence Technology
Detailed Explanation of Spring Web MVC DispatcherServlet—Official Original
TCP / IP protocol layers structure and function
Command type literal pos: unknown； Fallback type literal pos: unknown] with root cause
Design of multifunctional curtain controller with indoor anti-theft alarm
Daily
More
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)

Code World

© 2018 codetd.com