节点操作 + Time

最新推荐文章于 2024-05-08 17:30:38 发布

鲸渔要加油

最新推荐文章于 2024-05-08 17:30:38 发布

阅读量183

点赞数

分类专栏：基础学习文章标签： javascript js

本文链接：https://blog.csdn.net/qq_53283188/article/details/115494060

版权

基础学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

一、节点操作

1.nodeType 节点类型， 2.nodeName 节点名称 3.nodeValue 节点值
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3（包含文字，空格，换行）

1.1 父子兄

parentNode 得到最近的父级节点
children 得到所有的子元素节点
ul.children[0] 得到第一个子元素节点
ul.children[ul.children.length - 1] 得到最后一个子与元素节点
childNodes 得到所有的子节点，包含元素，文本等等
firstChild，firstElementChild
lastChild，lastElementChild
nextSibling 得到下一个兄弟节点，包含元素，文本等等
nextElementSibling
previousSibling 得到上一个兄弟节点，包含元素，文本等等
previousElementSibling

<script>
    // 父节点
    var div = document.querySelector('div');
    div.parentNode;
    // 子节点
    var ul = document.querySelector('ul');
    // ul.childNodes;
    ul.children;
    // ul.firstChild;
    // ul.lastChild;
    ul.firstElementChild;
    ul.lastElementChild;
    ul.children[0];
    ul.children[ul.children.length - 1];
</script>

1.2 创建元素节点

document.createElement('') 创建节点
父级.appendChild(子级) 添加节点，追加元素，类似于push
父级.insertBefore(子级, 指定元素的前面) 前面添加

<ul></ul>
<script>
    var ul = document.querySelector('ul');
    // 创建节点
    var li = document.createElement('li');
    // 后面添加节点 父级.appendChild(子级)
    ul.appendChild(li);
    // 前面添加 父级.insertBefore(子级, 指定元素的前面)
    var lili = document.createElement('li');
    ul.insertBefore(lili, ul.children[0]);
</script>

1.3 删除元素节点

父级.removeChild(子级)

<button>删</button>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<script>
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');
    btn.onclick = function () {
        if (ul.children.length === 0) {
            this.disabled = true;
        } else {
            ul.removeChild(ul.children[0]);
        }
    }
</script>

1.4 复制节点

元素.cloneNode(true)
如果括号的参数为空或false则为浅拷贝，只拷贝节点本身，不克隆里面的子节点
如果括号参数为true则为深度拷贝，会复制节点本身和里面的所有子节点

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    var ll = ul.children[0].cloneNode(true);
    ul.appendChild(ll);
</script>

1.5 删除元素节点

innerHTML 数组形式的效率比 createElement() 高

<div class="inner"></div>
<div class="create"></div>
<script>
// 用innerHTML创建元素
var inner = document.querySelector('.inner');
// for (var i = 0; i <= 1000; i++) {
//     inner.innerHTML += '<a href="#">鲸渔</a>';
// }
var array = [];
for (var i = 0; i < 1000; i++) {
	array.push('<a href="#">鲸渔</a>');
}
a.innerHTML = array.join('');
// 用document.createElement()创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 1000; i++) {
    var a = document.createElement('a');
    create.appendChild(a);
}
</script>
//不要将HTML放在循环内部反复拼接

🐋鲸渔Time🐱‍👤

简易留言板带删除

<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 pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            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>
        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 {
                var li = document.createElement('li');
                li.innerHTML = text.value + "<a herf='javascript:;'>删除</a>";
                ul.insertBefore(li, ul.children[0]);
                // 
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

动态生成表格

<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>
        <thead>
            <tr>
                <th>远近渔</th>
                <th>鲸渔酱</th>
                <th>渔渔子</th>
                <th>哒咩咯</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var dates = [{
            yjy: '远近渔1',
            jyj: '鲸渔酱1',
            yyz: '渔渔子1',
        }, {
            yjy: '远近渔2',
            jyj: '鲸渔酱2',
            yyz: '渔渔子2',
        }, {
            yjy: '远近渔3',
            jyj: '鲸渔酱3',
            yyz: '渔渔子3',
        }, {
            yjy: '远近渔4',
            jyj: '鲸渔酱4',
            yyz: '渔渔子4',
        }];
        // 创建tr
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < dates.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 创建td
            for (var k in dates[i]) {
                var td = document.createElement('td');
                td.innerHTML = dates[i][k];
                tr.appendChild(td);
            }
            // 创建删除td
            var td = document.createElement('td');
            td.innerHTML = '<a herf="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        // 删除操作
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>