核心DOM对象模型（JavaScript）

最新推荐文章于 2022-10-19 23:11:53 发布

萌猩

最新推荐文章于 2022-10-19 23:11:53 发布

阅读量291

点赞数 1

文章标签： java dom javascript

本文链接：https://blog.csdn.net/qq_44894916/article/details/112826136

版权

核心DOM对象模型（JavaScript）

概念

Document Object Model 文档对象模型。
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment:注释对象
* Node：节点对象，其他5个的父对象
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

核心DOM模型

Document–文档对象（文档树）

创建(获取)：在html dom模型中可以使用window对象来获取
1.1 window.document
1.2 document
方法：
2.1 获取Element对象：
getElementById() ：根据id属性值获取元素对象。id属性值一般唯一
getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
2.2 创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()

Element–元素对象

获取/创建：
通过document来获取和创建
方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性

Node–节点对象

特点：所有dom对象都可以被认为是一个节点,是其他5个的父对象
方法：
appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild() ：删除（并返回）当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点。
parentNode 返回节点的父节点。

Node节点案例：

通过DOM文档树的各种方法，对表格可以进行增删改的操作，如下所示，还是挺好玩儿的！！

源代码：

<head>
    <meta charset="UTF-8">
    <title>Node结点</title>
    <style>
        img{
            width: 200px;
            height: 200px;
        }
        table{
            text-align: center;
            background: #78e2ff;
        }
        tr:hover{
            background: #ffcac5;
        }

    </style>
</head>
<body>
<center>
    <table id="tab" border="1" cellpadding="10" cellspacing="0">
        <caption>萌娃列表</caption>
        <tbody id="tbody">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>图片</th>
                <th>操作|<button onclick="insert()">新增</button></th>
            </tr>
            <tr>
                <td>1</td>
                <td>花花</td>
                <td><img src="../imgs/a.jpg" alt=""></td>
                <td><button onclick="deleteinfo(this)">删除</button>|<button onclick="updateinfo(this)">修改</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>哄哄</td>
                <td><img src="../imgs/b.jpg" alt=""></td>
                <td><button onclick="deleteinfo(this)">删除</button>|<button onclick="updateinfo(this)">修改</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>憨憨</td>
                <td><img src="../imgs/c.jpg" alt=""></td>
                <td><button onclick="deleteinfo(this)">删除</button>|<button onclick="updateinfo(this)">修改</button></td>
            </tr>
            <tr>
                <td>4</td>
                <td>怼怼</td>
                <td><img src="../imgs/d.jpg" alt=""></td>
                <td><button onclick="deleteinfo(this)">删除</button>|<button onclick="updateinfo(this)">修改</button></td>
            </tr>
        </tbody>
    </table>
</center>
</body>
<script>
    let tbody = document.getElementById("tbody");
    //删除
    function deleteinfo(but) {
        tbody.removeChild(but.parentElement.parentElement)
    }

    //新增
    function insert() {
        let num = prompt("请输入编号");
        let name = prompt("请输入名称");
        let src = prompt("请输入图片");
        tbody.innerHTML+="<tr>\n" +
            "                <td>"+num+"</td>\n" +
            "                <td>"+name+"</td>\n" +
            "                <td><img src=\"../"+src+"\" alt=\"\"></td>\n" +
            "                <td><button οnclick=\"deleteinfo(this)\">删除</button>|<button οnclick=\"updateinfo(this)\">修改</button></td>\n" +
            "            </tr>"
    }

    //修改
    function updateinfo(btn) {
        let num = prompt("请输入编号");
        let name = prompt("请输入名称");
        let src = prompt("请输入图片");
        let tr = btn.parentElement.parentElement;
        tr.innerHTML="<td>"+num+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td><img src=\"../"+src+"\" alt=\"\"></td>\n" +
            "        <td><button οnclick=\"deleteinfo(this)\">删除</button>|<button οnclick=\"updateinfo(this)\">修改</button></td>"
    }
</script>

效果图：
在这里插入图片描述
图片需要自己设置哈！仅供参考！

萌猩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
核心DOM对象模型（JavaScript）

核心DOM对象模型（JavaScript）概念Document Object Model 文档对象模型。将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。W3C DOM 标准被分为 3 个不同的部分：核心 DOM - 针对任何结构化文档的标准模型* Document：文档对象* Element：元素对象* Attribute：属性对象* Text：文本对象* Comment:注释对象* Node：节点对象，其他5个的父对象XML
复制链接

扫一扫