dom增删改查

Posted 2022-04-14 a199706

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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索引处的单元格

以上是关于dom增删改查的主要内容，如果未能解决你的问题，请参考以下文章