DOM文档对象select、ul和table元素的增删操作-脚本世界

/*
1、DOM创建节点的方法：
    document.createElement(Tag),Tag必须是合法的HTML元素；
2、DOM复制节点的方法：
    节点.cloneNode(boolean deep),当deep为true时，表示复制当前节点以及当前节点全部后代节点。为false时，只复制当前节点。
3、DOM添加、删除节点的方法：
    appendChild(newNode):将newNode添加成当前节点的最后一个子节点；
    insertBefore(newNode,refNode):在refNode节点之前插入newNode节点；
    replaceChild(newNode,oldNode):将oldNode节点替换成newNode节点；
    removeChild(oldNode):将oldNode子节点删除。
*/

//例子如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建元素</title>
<script type="text/javascript">
var num = 0;
function create(){
    num++;
    
    var city=document.getElementById("city");
    var element=document.createElement("li");
    element.innerHTML="广州" + num;
    
    city.appendChild(element);  //在ul末尾添加一个li节点
    //city.insertBefore(element, city.firstChild.nextSibling);//在ul的第一个li节点前面插入一个li节点
       
}

function replace(){
    num++;
    var city=document.getElementById("city");
    var element=document.createElement("li");

    element.innerHTML="广州" + num;
    city.replaceChild(element, city.firstChild.nextSibling);//替换第一个li节点
}

function copy(){
    var city=document.getElementById("city");
    //注意：这里复制的是firstChild.nextSibling，而不是firstChild。【回车换行包括注释，也属于DOM一部分】
    var element=city.firstChild.nextSibling.cloneNode(true);

    city.appendChild(element);
}

function  del(){
    var city=document.getElementById("city");
    //删除ul下面第一个li节点
    var element= city.firstChild.nextSibling;

    city.removeChild(element);
}


</script>
</head>
<body>
    <ul id="city">
    <li>北京</li>
    <li>上海</li>
    </ul>
    <input type="button" value="创建并插入节点" onclick="create()">
    <input type="button" value="替换节点" onclick="replace()">
    
    <input type="button" value="复制节点" onclick="copy()">
    <input type="button" value="删除节点" onclick="del()">
</body>
</html>

/*
4、DOM为列表框、下拉菜单添加选项的方式：
    创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。语法如下：
        new Option(text,value,defaultSelected,selected)
        该构造器有4个参数，说明如下：
        text:该选项的文本，即该选项所呈现的“内容”；
        value:选中该选项的值；
        defaultSelected:设置默认是否显示该选项；
        selected:设置该选项当前是否默认被选中。
提示：并不是每次构造都需要指明4个参数，可以指明一个或者两个都可以，假如一个的话指明的是text，假如两个的话，第一个参数是text，第二个参数是value。

5、添加创建好的选项至列表框或下拉菜单的方式：
    直接为<select.../>的指定选项赋值
列表框或下拉菜单对象.option[i]=创建好的option对象；

6、删除列表框、下拉菜单的选项的方法：
    (1)直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项；
    (2)直接将指定选项赋值为null。
    即列表框或下拉菜单对象.remove(index)或对象.options[index]=null。
*/

//例子如下


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select控件操作</title>
<script type="text/javascript">
function  createSelect(){
    var element=document.createElement("select");

    for(var i=0;i<5;i++){
        var op=new Option("呼伦贝尔"+i,i,true,true);
        element.options[i]=op;
    }
    element.size=5;
    element.id="city";
    document.getElementById("test").appendChild(element);
}


function deleteOneByOne(){
    var city=document.getElementById("city");
    if(city === null)
        return;

    if(city.options.length>0){
        city.remove(city.options.length-1);//删除末尾option方法一
        // city.options[city.options.length-1]=null;//删除末尾option方法二
        return;
    }

    //移除city节点方式一
    city.remove();
}

function deleteAll(){
    var city=document.getElementById("city");
    if(city === null)
        return;

    if(city.options.length>0){
        city.options.length=0;
    }

    //移除city节点方式二
    city.parentNode.removeChild(city);
}


</script>
</head>
<body id="test">
    <div>
    <input type="button" value="创建一个城市列表框" onclick="createSelect()">
    <input type="button" value="一条条删除列表框内容" onclick="deleteOneByOne()">
    <input type="button" value="一次性清空列表框内容" onclick="deleteAll()">
    </div>
</body>
</html>

/*
7、DOM动态添加删除表格内容所使用的常用方法：
    insertRow(index):在指定索引位置插入一行；
    createCaption():为该表格创建标题；
    createTFoot():为该表格创建<tfoot.../>元素，假如已存在就返回现有的；
    createTHead():为该表格创建<thead.../>元素，假如已存在就返回现有的；
    deleteRow(index):删除表格中index索引处的行；
    deleteCaption():删除表格的标题；
    deleteTFoot():从表格中删除tfoot元素及其内容；
    deleteTHead():从表格中删除thead元素及其内容。

8、给表格行创建、删除单元格的方法：
    insertCell(index):在index处创建一个单元格，返回新创建的单元格；
    deleteCell(index):删除某行在index索引处的单元格。
*/

//例子如下



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>对表格元素进行增删改操作</title>
<script type="text/javascript">
function  createMyTable(){
    var demo = document.getElementById("demo");
    var table = document.createElement("table");
    table.border="1";
    table.id="my_Table";
    var cap=table.createCaption();//创建表格标题
    cap.innerHTML="My_Table";

    for(var i=0;i<3;i++){
        var tr=table.insertRow(i);//创建行
        for(var j=0;j<5;j++){//创建列
            var td=tr.insertCell(j);
            td.innerHTML="单元格["+i+"]["+j+"]";
        }
    }
    demo.appendChild(table);
}


function deleteLastRow(){
    var table = document.getElementById("my_Table");
    //删除table中的最后一行
    if(table.rows.length>0){
        table.deleteRow(table.rows.length-1);
    }
}

function deleteLastCell(){
    var table=document.getElementById("my_Table");
    if(table.rows.length>0){
        var lastRow=table.rows[table.rows.length-1];
        if(lastRow.cells.length>0){
            lastRow.deleteCell(lastRow.cells.length-1);
        }
    }
}

</script>
</head>
<body id="demo">
<input type="button" value="创建一个3行5列的表格" onclick="createMyTable()">
<input type="button" value="删除表格最后一行" onclick="deleteLastRow()">
<input type="button" value="删除表格最后一个单元格" onclick="deleteLastCell()">
</body>
</html>

首页

网页制作

Web编程

数据库

DOM文档对象select、ul和table元素的增删操作