DOM 对HTML元素的增删改操作

DOM创建节点的方法：

• document.createElement(Tag)。Tag必须是合法的HTML元素

DOM 复制节点的方法：

• 节点 cloneNode(boolean deep),当deep为true时，表示复制当前节点以及当前节点的全部后代节点。为false时，只复制当前节点。

DOM 添加、删除节点的方法：

appendChild(newNode) 将newNode添加成当前节点的最后一个子节点
insertBefore(newNode,refNode) 在refNode节点之前插入newNode节点
replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点
removeChild(oldNode) 将oldNode子节点删除

• 实例：（注意互相干扰，可以注释掉单独尝试）

    <ul id="city">
        <li>北京</li>
        <li>上海</li>
    </ul>
    <input type="button" value="创建,复制,替换节点"
    onclick="create();"
    >
    <input type="button" value="复制节点" onclick="copy()">
    <input type="button" value="删除节点" onclick="del()">

    <script>
        function create() {
            var city = document.getElementById("city");
            var element = document.createElement("li");
            city.appendChild(element).innerHTML = "wuhan";

            var span = document.createElement("span");
            city.insertBefore(span,city.firstChild).innerHTML = "myspan元素";

            var p = document.createElement("p");
            city.replaceChild(p,city.firstElementChild.nextElementSibling);
            p.innerHTML = "guangzhou";
        }

        function copy() {
            var city = document.getElementById("city");
            var elem = city.firstChild.nextSibling.cloneNode(true);
            city.appendChild(elem);  
            // elem.innerHTML = city.firstChild.nextSibling.innerHTML;
        }
        function del() {
            var city = document.getElementById("city");
            var ele = city.firstChild.nextSibling;
            city.removeChild(ele);
        }
    </script>

DOM为列表框、下拉菜单添加选项的方式：

• 创建选项除了使用前面所示的createElement 方法之外，还可以使用专门的构造器构造一个选项出来，语法如下：

    new Option(text.value.defaultSelected.selected)

• 该构造器有4个参数，说明如下：

text 该选项的文本、即该选项所呈现的“内容”
value 选中该选项的值
defaultSelected 设置默认是否显示该选项
selected 设置该选项当前是否被选中
**提示：**并不是每次构造都需指明四个参数，可以指明一个或者两个都可以，假如一个的话指明的是text，假如两个的话，第一个参数是text，第二个参数是value。

添加创建好的选项至列表框或下拉菜单的方式

• 直接为< select…>的指定选项赋值。

列表框或下拉菜单对象.options[i] = 创建好的option对象

删除列表框、下拉菜单的选项的方法

• 直接使用列表框或下拉菜单对象.remove(index) 方法删除指定选项
• 直接将指定选项赋值为null

DOM 动态添加删除表格内容所使用到的常用方法：

insertRow(index) 在指定索引位置插入一行
createCaption() 为该表格创建标题
createTFoot() 为该表格创建 tfoot 元素，假如已存在就返回现有的
createTHead() 为该表格创建 thead 元素，假如已存在就返回现有的
deleteRow(index) 删除表格中index 索引处的行
deleteCaption() 删除表格标题
deleteTFoot() 从表格删除 tFoot 元素及其内容。
deleteTHead() 从表格删除 tHead 元素及其内容。

给表格行创建、删除单元格的方法：

insertCell(index) 在index处创建一个单元格、返回新创建的单元格
deleteCell(index) 删除某行在index索引处的单元格

    input type="button" value="创建一个五行四列的表格" onclick="createTable()">
    <input type="button" value="删除最后一行" onclick="delLastRow()">
    <input type="button" value="删除最后一个单元格" onclick="delLastCell()">
    
    <script>
        function createTable() {
            var b = document.getElementById("test");
            var t = document.createElement("table");
            b.appendChild(t);
            t.border = "1";
            t.id = "mytable";
            // var caption = t.createCaption();
            // caption.innerHTML = "我的表格"；
            t.createCaption().innerHTML = "我的表格";
            for(var i = 0; i < 5; i++ ) {
                var tr = t.insertRow(i);
                for(var j = 0; j < 4; j ++) {
                    var td = tr.insertCell(j);
                    td.innerHTML = "单元格" + (i + 1) + (j + 1);
                }
            }
        }
        function delLastRow() {
            var table = document.getElementById("mytable");
            if(table.rows.length > 0) {
                table.deleteRow(table.rows.length - 1);
            }
        }
        function delLastCell() {
            var table = document.getElementById("mytable");
            var lastRow = table.rows[table.rows.length - 1];
            if(lastRow.cells.length > 0) {
            lastRow.deleteCell(lastRow.cells.length - 1);
            }
        }
    </script>