dom增删改查

一、创建节点

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

二、DOM添加、删除节点的方法:

 

         

appendChild(newNode)

将newNode添加成当前节点的最后一个子节点

insertBefore(newNode,refNode)

refNode节点之前插入newNode节点

replaceChild(newNode,oldNode)

oldNode节点替换成newNode节点

removeChild(oldNode)

oldNode子节点删除

 

 例如:

<script type="text/javascript">
    //replaceChild(newNode,oldNode)    将oldNode节点替换成newNode节点
    function create1(){
        //创建一个li节点
        var li=document.createElement("li");
        //自行添加文本属性等在
        li.innerHTML="lalallala";
        //获取ul元素
        var city=document.getElementById("city");
        //将li元素添加到ul元素上 li变量
        city.appendChild(li);
        
    }
    /*添加到第一个节点*/
function create2(){
    //创建li元素
    var a=document.createElement("li");
    a.innerHTML="你是谁";
    //获取ul元素
    var city=document.getElementById("city");
    //获取要插入的位置的那个元素 适用通用的利用节点关系访问HTML元素。
    var first=city.firstChild.nextSibling;
    //插入元素,将定义的a插入到first之前
    city.insertBefore(a,first);
}
    
    
    function create(){
        //创建li元素
        var b=document.createElement("li");
        b.innerHTML="山东";
        //获取ul元素
        var ul=document.getElementById("city");
        //获取要替换的旧元素
        var old=ul.lastChild.previousSibling;
        //替换 将b替换到old位置后
        ul.replaceChild(b,old);
    }
    
        /*复制节点*/
    var count=0;
    function copy(){
        count++;
        var ul=document.getElementById("city");
        //获取city中的ul元素,变成全局变量,共享
        if(count==1){
        
        //获取你要复制的节点,ul中的最后一个节点
        var old=ul.lastChild.previousSibling;
        //复制节点 复制当前节点及后代节点 true真,false只复制本身
        var li=old.cloneNode(true);
        //将li元素添加到ul元素中
        ul.appendChild(li);
        
        }else{
            //获取city中的ul元素
        var ul=document.getElementById("city");
        //获取你要复制的节点,ul中的最后一个节点
        var old=ul.lastChild;
        //复制节点 复制当前节点及后代节点
        var li=old.cloneNode(true);
        //在ul元素中添加li
        ul.appendChild(li);
            }
        
        }
    
    function del(){
        //获取ul元素
        var ul=document.getElementById("city");
        //获取要删除的元素,ul中的最后一个元素
        var old=ul.lastChild.previousSibling;
        //ul中删除old
        ul.removeChild(old);
    }
    </script>
</head>

<body>
<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()">
</body>

二、下拉菜单表单控件:

    function create(){
        //创建select元素
        var select=document.createElement("select");
        //id属性
        select.id="city";
        select.size=5;
        //循环创建10个option元素并添加到select元素上
        for(i=0;i<10;i++){
            //创建option元素
            var op=new Option("选项"+1,i);
            //添加option元素到select上
            select.options[i]=op;
        }
        //将select添加到body中,从第一个数组开始
        var body=document.getElementsByTagName("body")[0];
//        var body=document.getElementById("test");
        //添加元素 添加节点到目前的最后一个节点
        body.appendChild(select);
        
    }
    
    function del(){
        var select1=document.getElementById("city");
        //判断是否满足数组》0
        if (select1.length>0)
            {
        //select1中的下拉列表的长度
        select1.remove(select1.options.length-1);
                }
    }
    
    
    function qk(){
        var select=document.getElementById("city");
        if(select.length>0){
            
        
        select.options.length=null;
            }
    }
    </script>
</head>

<body id="test">
<input type="button" value="创建一个城市列表框" onClick="create()">
<input type="button" value="一条条删除列表框的内容" onClick="del()">
<input type="button" value="一次性清空列表框内容" onClick="qk()">
</body>

重点:通过循环来逐个将option添加到select上面

三、表格的增删改查

<script type="text/javascript">
    function create(){
    //创建表格元素
    var table=document.createElement("table");
    table.id="mytable";
    table.border="1px";
    //创建五行 for循环=5 i=5
    for(var i=0;i<5;i++){
        
        var row=table.insertRow(i);
        
        //每一行创建四列 每行四个列
        for(var j=0;j<4;j++){
            var cell=row.insertCell(j);
            cell.innerHTML=""+(i+1)+"行第"+(j+1)+"";
        }    
    }
        
    //将table元素添加到body标签中
    var body=document.getElementById("test");
    body.appendChild(table);
        
    }
    function del(){
        //获取table元素
        var table=document.getElementById("mytable");
        //判断表格中有行再删除
        if(table.rows.length>0){
            table.deleteRow(table.rows.length-1);
        }    
    }
    
    //表格的列cell是通过行来控制的,所以前面不能加table.row.cell,但行是通过table来控制,所以可以加table.rows,row是table的单个行,rows是返回该表格里的所有表格行(数组),cell是单元格联合
    function del1(){
            //获取table元素
        var table=document.getElementById("mytable");
        //获取最后一行
        var row=table.rows[table.rows.length-1];
        if(row.cells.length>0){
            //删除最后一列,删除行内单元格数组的最后一位
            row.deleteCell(row.cells.length-1);
        }
        //如果最后一行所有列都没有了就删除最后一行
        else{
            tal.deleteRow(table.rows.length-1);
        }
    }
    </script>
</head>

<body id="test"> 
<input type="button" value="创建一个5行4列的表格" onClick="create()">
<input type="button" value="删除最后一行" onClick="del()">
<input type="button" value="删除最后一个单元格" onClick="del1()">
</body>

表格与其不同的地方在于她要从行列开始创建,并且要记住是table.rows这是表格的全部行,这是row.deleteCell表格行里的单元格。不要弄混。

表格行的创建删除

insertRow(index)

在指定索引位置插入一行

createCaption()

为该表格创建标题

deleteRow(index)

删除表格中index索引处的行

   

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

insertCell(index)

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

deleteCell(index)

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

猜你喜欢

转载自www.cnblogs.com/a199706/p/11181481.html
0条评论
添加一条新回复