JavaScript之DOM操作

什么是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].