前端学习之pink老师之dom

xSing1e

已于 2023-03-14 20:11:47 修改

阅读量98

点赞数

文章标签： javascript Powered by 金山文档

于 2023-03-14 20:11:17 首次发布

本文链接：https://blog.csdn.net/weixin_52310583/article/details/129528266

版权

文章介绍了HTML5中如何使用data属性创建和获取自定义属性，以及DOM操作包括获取元素、节点层次（父节点、子节点、兄弟节点）、动态添加和删除节点、复制节点的方法。通过示例代码展示了动态添加留言和删除留言的功能，并提供了一个动态生成表格的例子。

摘要由CSDN通过智能技术生成

本人目前自学前端中所观看的是pink老师的视频此篇文章内容为dom的节点属性内容，有需要的可以作为参考哦！

h5自定义属性

h5新增了对自定义属性的方法
1.获取自定义属性

<body>
    <!-- 所有的自定义属性data开头 -->
    <div data-index="1" data-list-name="Andy"></div>
    <script>
        var d = document.querySelector('div');
        //1.获取index属性
        //dataset是一个集合里面存放了所有以data开头的自定义属性
        console.log(d.dataset.index);
        //2.获取属性
        console.log(d.getAttribute('data-index'));
        console.log(d.dataset['index']);
        //如果多个短横线链接
        //驼峰命名
        console.log(d.dataset.listName);
    </script>
    
</body>

DOM 节点操作

1.利用dom的方法获取元素

操作繁琐不方便

2.节点层次

利用父子兄弟节点获取元素

页面中所有的内容都是节点，元素节点nodeType1、文本节点nodeType3、属性节点，所有节点都可以通过js访问，

节点：节点类型、节点名称nodeType2、节点值nodeType3

主要操作元素节点

父级节点

假设box是boxx的父节点要获取元素对象

var box = document.querySelector(".box");

var box = document.querySelector(".boxx");

用父节点

node.parentNode;

boxx.parentNode；//找的是亲爸爸找不到返回空

子节点

//DOM 提供的api获取

假设ul是li父亲节点

var ul = document.querySelector("ul");

var li = document.querySelector("li");

//1.用子节点

ul.childNodes; //所有子节点元素、文本等但是不推荐用

//2.children 获取所有子元素常用

il.children;

//获取第一个子节点没有为null

ul.firstElenmentChild;

ul.lastElenmentChild;

//实际开发写法

ul.children[0];

兄弟节点（用的少）

<div>我是div</div>
<span>我是span</span>

var div = document.querySelector("div");

//兄弟节点

div.nextSibling;

div.previousSibling;

//下一个兄弟元素节点

div.nextElementSibling;

div.prebiousElementSibling;

在页面动态添加一个节点先创建再添加

创建节点

document.createElement('tagName');

var li = document.createElement('li');

var ul = documenr.querySelector('ul');

添加节点

node.appendChild(); //node父亲

//在最后追加元素类似于数组中push

ul.appendeChild(li);

//在前面添加

ul.insertBefore( 被放的元素,指定元素的前面);

var lili = document.querySelector('li');

ul.insertBefore(lili,ul.children[0]); //ul第一个孩子

案例1 发布留言

总体思想：

利用动态添加元素li的方法显示留言（获得ul对象）

动态添加元素分两步（1）创建对象 createElement （2）ul.appendChild()

点击一下按钮 onclick （需要先获取按钮的对象

用innerHTML 把文本框的内容添加到li中（需要获得input对象

<body>
    <div class="">
        <input type="text">
        <button>发布</button>
        <ul>

        </ul>
    </div>
<script>
        var inp = document.querySelector('input');
        var u = document.querySelector('ul');
        var bu = document.querySelector('button');
        bu.onclick = function () {
            if (inp.value == '') {
                alert('您没有输入内容');
                return false;
            }
            else {
                var lii = document.createElement('li');
                //赋值
                lii.innerHTML = inp.value;
                u.append(lii);

            }
        }


    </script>

</body>

删除节点

node.removeChild(); //node父亲节点

案例2 删除留言

在上个案例的基础上

思路：

在每个li后添加一个a删除按钮(需要获取a对象

点击删除会删除当前的li元素节点（所以循环添加onclick事件

运用removeChild（）；

被删除的节点的父节点.removeChild（被删除元素）；

疑问：

为什么删除代码写在函数的外面就不可以运行？

有没有更简单的方法删除节点？

<script>
        var inp = document.querySelector('input');
        var u = document.querySelector('ul');
        var bu = document.querySelector('button');
        bu.onclick = function () {
            if (inp.value == '') {
                alert('您没有输入内容');
                return false;
            }
            else {
                var lii = document.createElement('li');
                //赋值
                lii.innerHTML = inp.value + "<a href='javascript:;'>删除 </a>";
                //javascript:;阻止链接跳转
                u.append(lii);
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        //要删除的是li 此刻对象为a li的父节点为ul
                        u.removeChild(this.parentNode);
                    }
                }
            }
        }

复制节点

node.cloneNode(); //浅copy 不复制内容

node.cloneNode(true); //深copy

案例3 动态生成表格

出现了很多bug，教会了我很多。。。。

思路：

先写好总体框架 thead tbody 总体样式

设置好数据创建一个数组存放数据里面有属性

创建行和列双重循环

创建行然后创建节点添加节点（父节点为tbody，获取tbody对象

创建列循环检索对象 var k in obj 方法。k为属性名 obj为属性值

添加节点（获取td的父节点tr对象

添加内容 td.innerHTML =datas[i][j] //datas[i]为第几个数组对象[j]为第几个属性

问题：

最后删除的时候一定是this.xxxx.xxxx

一定要看好作用域

先总体在局部先大体的框架有再细节先添加元素最后删除

删除元素操作时先获取对象（对象数量很多循环获取对象）在创建函数

<!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: 300px;
            margin: 100px auto;
            border: 1px solid black;
            border-collapse: collapse;


        }

        table thead {
            height: 30px;
            width: 200px;
            background-color: #d4d4d4;
            font-size: 15px;
            color: black;
            border: 1px solid black;
            border-collapse: collapse;


        }

        thead th {
            width: 40px;
            height: 30px;
            border: 1px solid black;
            border-collapse: collapse;
        }

        td {
            border: 1px solid black;
        }
    </style>
</head>

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

        </tbody>

    </table>

    <script>
        var datas = [{
            name: 'sxq',
            subject: 'JAVA',
            score: 100
        }, {
            name: 'cw',
            subject: 'JAVA',
            score: 85
        }, {
            name: 'sww',
            subject: 'JAVA',
            score: 98
        }, {
            name: 'wde',
            subject: 'JAVA',
            score: 99
        }];
        //创建行
        var tb = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            var trr = document.createElement('tr');
            tb.appendChild(trr);
            //遍历对象 k是属性名
            for (var k in datas[i]) {
                //创建单元格
                var tdd = document.createElement('td');
                //填充单元格内容
                tdd.innerHTML = datas[i][k];
                trr.appendChild(tdd);

            }
            //创建操作单元格
            var td1 = document.createElement('td');
            td1.innerHTML = '<a href="javascript:;">删除</a>';
            trr.appendChild(td1);
            //以上全部都是创建添加
        }
        //删除操作开始
        var aa = document.querySelectorAll('a');
        // var tbo = document.querySelector('tbody');
        for (var i = 0; i < aa.length; i++) {
            aa[i].onclick = function () {
                tb.removeChild(this.parentNode.parentNode);

            }
        }
    </script>
</body>

</html>