JavaScript之DOM操作

最新推荐文章于 2024-05-17 17:29:20 发布

Sunny-安好

最新推荐文章于 2024-05-17 17:29:20 发布

阅读量810

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript dom 文章标签： javascript dom

本文链接：https://blog.youkuaiyun.com/qq_19001241/article/details/77884873

javascript 同时被 2 个专栏收录

5 篇文章

订阅专栏

dom

1 篇文章

订阅专栏

本文介绍了文档对象模型（DOM）的概念及其在HTML与XML中的应用。通过两个实例展示了如何使用DOM来动态地创建和修改HTML表格，包括添加和删除行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是DOM

Document Object Model 文档对象模型简称（DOM），它是HTML与XML之间的应用编程接口（API）

DOM的作用

DOM将整个页面映射成一个由层次节点组成的文件。
它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
DOM把网页和脚本以及其他的编程脚本联系了起来

DOM编程实例（动态绘制表格）

题目：在输入框中填写数据点击添加的时候给表格中添加一行数据

方法一：

1、创建表格框架

姓名：<input type="text" name="name" id="name"> 
年龄：<input type="text" name="age" id=age> 
<input type="button" value="添加" onclick="add()">

<table id="myTable" border="1" cellspacing="0" cellpadding="0" width="500">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
</table>

2、编写添加和删除的方法

<script>
    function $(id) {
        return document.getElementById(id);
    }
    var index = 1;
    function add(){
        var name = $("name").value;
        var age = $("age").value;
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
        var td4 = document.createElement("td");

        td1.innerHTML=index++;
        td2.innerHTML=name;
        td3.innerHTML=age;
        td4.innerHTML="<input type='button' value='删除' onclick='remove(this.parentNode.parentNode)'>";

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);

        $("myTable").appendChild(tr);
    }

    function remove(node){
        $("myTable").removeChild(node);
    }

</script>

方法二：

1、创建表格框架同方法一
2、编写添加和删除的方法

<script>
    function $(id) {
        return document.getElementById(id);
    }
    var index = 0;
    var code = 1;
    function add(){
        var name = $("name").value;
        var age = $("age").value;
        var tr = $("myTable").insertRow(index);
        var td1 = tr.insertCell(0);
        var td2 = tr.insertCell(1);
        var td3 = tr.insertCell(2);
        var td4 = tr.insertCell(3);

        td1.innerHTML = code;
        td2.innerHTML = name;
        td3.innerHTML = age;
        td4.innerHTML = "<a href='JavaScript:void(0)' onclick='remove(this.parentNode.parentNode.rowIndex)' >删除</a>";
        index++;
        code++;
    }

    function remove(node){
        $("myTable").deleteRow(node);
        index--;
    }

</script>

这里使用了tableModel的insertRow(index)方法和rowModel的insertCell(index)方法
两个方法中的都需要传一个index这个index代表要添加的数据在表中的行数和列数。如果前面是空的会报如下错误，这里需要注意一下。
在添加和删除的时候必须对index进行自增和自减的操作。

Uncaught DOMException: Failed to execute 'insertCell' on 'HTMLTableRowElement': The value provided (1) is outside the range [-1, 0].