DOM对HTML元素的增删改操作

时间:2021-02-15 14:49:09

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子节点删除

DOM为下拉菜单(select)添加选项的方式:

  1. 创建选项除了使用前面所示的createElement方法之外,还可以使用专门的构造器来构造一个选项出来(IE、谷歌都支持)。语法如下:

new Option(text,value,defaultSelected,selected)

该构造器有4个参数,说明如下:

text

该选项的文本、即该选项所呈现的“内容”

value

选中该选项的值

defaultSelected

设置默认是否显示该选项

selected

设置该选项当前是否被选中

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

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

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

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

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

列表框或下拉菜单对象.remove(index)或对象.options[index]=null

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

insertRow(index)

在指定索引位置插入一行

createCaption()

为该表格创建标题

deleteRow(index)

删除表格中index索引处的行

deleteCaption()

删除表格标题

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

insertCell(index)

在index处创建一个单元格,返回新创建的单元格

deleteCell(index)

删除某行在index索引处的单元格

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>对表格元素进行增删改操作</title>

<script type="text/javascript">

         function createTable(){

                   var b=document.getElementById("test");

                   var t=document.createElement("table");

                   t.border="1";

                   t.id="mytable";

                   var caption=t.createCaption();

                   caption.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);

                                    

                   }

                   b.appendChild(t);td.innerHTML="单元格"+i+j;

                            }

 

         }

         function deleteLastRow(){

                   var t=document.getElementById("mytable");

                   if(t.rows.length>0){

                            t.deleteRow(t.rows.length-1);

                   }

         }

         function deleteLastCell(){

                   var t=document.getElementById("mytable");

                   var lastRow=t.rows[t.rows.length-1];

                   if(lastRow.cells.length>0){

                            lastRow.deleteCell(lastRow.cells.length-1);

                   }

         }

</script>

</head>

 

<body id="test">

<input type="button" value="创建一个5行4列的表格" onClick="createTable()">

<input type="button" value="删除最后一行" onClick="deleteLastRow()">

<input type="button" value="删除最后一个单元格" onClick="deleteLastCell()">

</body>

</html>