JS——DOM节点操作

最新推荐文章于 2025-10-29 16:38:11 发布

原创最新推荐文章于 2025-10-29 16:38:11 发布 · 1.4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

课后习题

这篇博客详细介绍了JavaScript中DOM节点的操作，包括创建、添加、插入、替换和删除等基本操作。通过document.createElement创建元素，使用appendChild、insertBefore进行节点位置调整，replaceChild实现替换节点，以及removeChild和remove方法删除节点。还提到了克隆节点的cloneNode方法。内容还涉及了表单元素的内容获取，以及在实际操作中与删除相关的注意事项。

主要包括

创建添加插入替换删除克隆

创建：document.createElement（'标签名'）
创造一个指定标签元素，返回的是一个创建好的元素节点、

如果浏览器无法识别标签名就会生成一个未知HTML元素

一般流程----

1创建空对象（只能用document调用）
2为空元素添加关键属性和内容
3将空元素加载到dom树中

添加：父节点.appendChild（子节点）

把这个子节点追加到父节点下所有子元素的末尾，如果加入的子节点已经存在DOM树中，那么就会改变该子节点的位置

插入：父节点.insetBefore（要插在哪个节点前面就写哪个节点）

它在参考节点之前插入了一个有父元素的子节点，如果引用的节点是文档树里面的，那么这个方法会把这个参考节点从原位置移动到新位置

替换：父节点.replaceChild（新节点，旧节点）

它会替换父元素下一个现有的旧节点，它会返回被替换掉的节点

删除：

方法1：父节点.removeChild(子节点)。从父节点中删除一个子节点

方法2：节点.remove().该节点自杀（element.remove（）把对象从它所属的DOM树删除）

克隆：节点.cloneNode（是否为克隆后代节点）

把该节点复制克隆出一个一模一样的，返回调用该方法的副本

document是我们的根，所以我们调用要用它打头阵
表单元素内容是表单元素.value

但凡跟删除挂钩的都要做判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #user_table{
            border: 1px solid black;
            width: 500px;
            border-collapse: collapse;
        }
        #user_table th,
        #user_table td{
            border: 1px solid black;
            text-align: center;
        }
        #from_div{
            border: 1px solid black;
            width: 500px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <table id="user_table">
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>薪资</th>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>34</td>
                <td>2455</td>
                <td>
                    <a href="javascript:;">删除</a>
                </td>
            </tr>
            <tr>
                <td>张三</td>
                <td>34</td>
                <td>2455</td>
                <td>
                    <a href="javascript:;">删除</a>
                </td>
            </tr>
            <tr>
                <td>张三</td>
                <td>34</td>
                <td>2455</td>
                <td>
                    <a href="javascript:;">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <div>
        <h2>添加新员工</h2>
        <table>
            <tr>
                <td id="word">姓名</td>
                <td class="input">
                    <input type="text"id='from_name'>
                </td>
            </tr>
            <tr>
                <td id="word">年龄</td>
                <td class="input">
                    <input type="text"id='from_age'>
                </td>
            </tr>
            <tr>
                <td id="word">薪资</td>
                <td class="input">
                    <input type="text"id='from_money'>
                </td>
            </tr>
            <tr>
                <td >
                    <button id="addbtn">提交按钮</button>
                </td>
            </tr>
        </table>
    </div>
    <script>
        //删除
        let allA=document.getElementsByTagName('a')
        //获取一个合集，然后遍历它们每一个删除
        for(let allkey of allA){
            allkey.onclick=function(){//绑定点击事件
                let allA=this
                //找到父元素删除
                let tr=allA.parentNode.parentNode
                console.log(tr)
                //删除前判断
                let username=tr.children[0].innerHTML //获取要删的
                if(confirm(`您确定要删除${username}么`)){
                   // tr.parentNode.removeChild('tr')
                   tr.parentNode.removeChild(tr)//这里是变量不需要写引号
                }
            }
            //添加用户信息
            //获取，添加按钮
            let addbtn=document.getElementById('addbtn')
            addbtn.onclick=function(){//绑定点击事件
                //获取填写的信息
                let names=document.getElementById('from_name').value
                let ages=document.getElementById('from_age').value//获取信息的值
                let moneys=document.getElementById('from_money').value
                //1将我们的输入的内容添加到user_table的tr中
                let tr=document.createElement('tr')//创建tr
                let nametd=document.createElement('td')//创4个td
                let agetd=document.createElement('td')
                let moneytd=document.createElement('td')
                let atd=document.createElement('td')
                let a=document.createElement('a')//创建td的a
                //2创建文本节点 里面放你的值
                let nametext=document.createTextNode(names)
                let agetext=document.createTextNode(ages)
                let moneytext=document.createTextNode(moneys)
                let deletext=document.createTextNode('删除')
                //3创建的节点添加到td里
                nametd.appendChild(nametext)
                agetd.appendChild(agetext)
                moneytd.appendChild(moneytext)
                a.appendChild(deletext)//添加删除给a标签
                atd.appendChild(a)//把a添加到td里
                //4.将td添加到tr里
                tr.appendChild(nametd)
                tr.appendChild(agetd)
                tr.appendChild(moneytd)
                tr.appendChild(atd)
                //5.还没给超连接添加href属性呢！
                a.href='javascript:;'
                a.onclick=function(){
                    let allA=this
                    let tr=allA.parentNode.parentNode
                    let username=tr.children[0].innerHTML
                    if(confirm(`你确定要删除&{username}吗`)){
                        tr.parentNode.removeChild(tr)
                    }
                }
                //继续往table塞，将tr添加到tbody中，先获取哦！
                let user_table=document.getElementById('user_table')
                let tbody=user_table.getElementsByTagName('tbody')[0]
                tbody.appendChild(tr)
            }
        }
    </script>
</body>
</html>