JS dom节点笔记

最新推荐文章于 2024-07-28 20:27:10 发布

「已注销」

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量111

点赞数

分类专栏： JS-DOM 文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_45915768/article/details/104414581

版权

JS-DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父节点：
node.parentNode 获取子元素的父节点(得到的是离元素最近的父节点)
找不到返回null
代码：

<div class="box">
 <div class="erweima"><div>
</div>

var er = document.querySelector('.erweima');
var box = er.parentNode;

子节点（返回的是伪数组形式）

节点	内容
childNodes(标准)	返回所有的子节点（包含元素节点文本节点等等）实际开发使用少
children（非标准）	返回子元素节点实际开发常用
children[0]	返回第一个子元素节点（伪数组的索引号）

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

var ul = document.querySelector('ul');
var lis = ul.children;

兄弟节点
1.nextSibling （返回所有的兄弟节点包含元素节点文本节点）
2.nextElementSibling （得到下一个兄弟元素节点兼容性问题 IE9以上支持）
3.previousElementSibling （得到上一个兄弟元素节点兼容性问题 IE9以上支持）
创建节点与添加节点
1.创建节点：document.createElement(‘tahName’)
动态创建元素
2.添加元素（创建元素后还需要添加元素，页面才会显示）
2.1node.appendChild(child):此方法将一个节点添加到指定父节点的子节点列表末尾 node(父级)
2.2node.insertBefore(child, 指定元素)
页面想要添加新元素，分两步：1.创建元素 2.添加元素
删除节点
node.removeChild(child) 删除一个子节点

应用：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
            color: #333;
        }
        
        .box {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 44px;
            background-color: #ccc;
        }
    </style>
</head>

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

    <script>
        // 1.数组对象模拟数据
        // 2.创建添加行  行数就是数组的长度（length）
        // 3.创建添加单元格  单元格个数： 对象里数据的个数
        // 4.给单元格填充数据
        // 5.添加操作单元格
        // 6.删除操作 删除链接所在的行  （链接a的父亲的父亲）
        var datas = [{
            name: '小明',
            subject: '数学',
            score: 100
        }, {
            name: '奶瓶',
            subject: '数学',
            score: 98
        }, {
            name: '火锅',
            subject: '数学',
            score: 99
        }, {
            name: '鸡排',
            subject: '数学',
            score: 88
        }]
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            // 创建行
            var tr = document.createElement('tr');
            // 添加行
            tbody.appendChild(tr);
            // 遍历对象
            for (var k in datas[i]) {
                // 创建单元格
                var td = document.createElement('td');
                // 填充单元格内容
                td.innerHTML = datas[i][k];
                // 添加单元格
                tr.appendChild(td);
            }
            var td = document.createElement('td');
            td.innerHTML = '<a href="jacascript:;">删除</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>

</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS dom节点笔记

父节点：node.parentNode 获取子元素的父节点(得到的是离元素最近的父节点)找不到返回null代码：<div class="box"> <div class="erweima"><div></div>var er = document.querySelector('.erweima');var box = er.p...
复制链接

扫一扫