DOM（二）

一条咸鱼o*v*o

已于 2022-04-29 15:40:38 修改

阅读量170

点赞数

文章标签： javascript

于 2022-04-24 21:17:33 首次发布

本文链接：https://blog.csdn.net/m0_45659764/article/details/124389979

版权

案例：动态生成表格

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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: 'JavaScript',
            score: 100
        },
        {
            name: '弘历',
            subject: 'JavaScript',
            score: 100
        },
        {
            name: '富恒',
            subject: 'JavaScript',
            score: 100
        },
        {
            name: '明玉',
            subject: 'JavaScript',
            score: 100
        },];

        // 2.往tbody里面创建行：有几个人（通过数组的长度）就创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) { //外面的for循环管行tr 
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 3.行里面创建单元格td(跟数据有关系的三个单元格) 单元格的数量取决于每个对象里元素的个数 for循环遍历对象
            for (var k in datas[i]) { //里面的for循环管列td
                var td = document.createElement('td');
                // 把对象里面的属性值data[i][k]给td.innerHTML
                td.innerHTML = datas[i][k]; // k是属性名 obj[k]是属性值 
                tr.appendChild(td);
            }

            //3.创建有删除两个字的单元格
            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标签的父级（td）的父级（tr） node.removeChild(child) nodeshi tbody(tr)的父级
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>

</html>

5.8 三种动态创建元素区别

document.write()
element.innerHTML
document.createElement()

区别：

1.document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

<body>
    <button>点击</button>
    <p>abc</p>

    <script>

        // 三种创建元素方式区别 
        // 1. document.write() 创建元素  如果页面文档流加载完毕，
            再调用这句话会导致页面重绘
        var btn = document.querySelector('button');
        btn.onclick = function () {
            document.write('<div>123</div>');

        }
        
    </script>
</body>

2.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

3.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

4.createElement()创建多个元素效率低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML效率比createElement高

6.DOM重点核心

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作

6.1 创建

document.write
innerHTML
createElement

6.2 增

appendChild
insertBefore

6.3 删

removeChild

6.4 改

主要修改dom的元素属性，dom元素的内容、属性、表单的值等

修改元素属性：src、href、title等
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disabled等
修改元素样式：style、className

6.5 查

主要获取查询dom的元素

DOM提供的API方法：getElementById、getElementsByTagName 古老用法不提倡
H5提供的新方法：querySelector、querySelectAll 提倡
利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）提倡

6.6 属性操作

主要针对于自定义属性

setAttribute:设置dom的属性值
getAttribute:得到dom的属性值
removeAttribute移除属性

6.7 事件操作

给元素注册事件，采取事件源.事件类型 = 事件处理程序

一条咸鱼o*v*o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（二）

案例：动态生成表格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&g..
复制链接

扫一扫