javascript DOM节点操作-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38358436/article/details/88096611

本文详细介绍了如何使用JavaScript进行DOM操作，包括创建、复制、删除及替换节点等基本操作，并提供了具体的代码示例。

创建节点

createElement

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
    <div id="box">
        <p class="testNode">---------a测试a--------</p>
        <p class="testNode">---------b测试b--------</p>
        <p class="testNode">---------c测试c--------</p>
    </div>
<script>
window.onload = function () {
    // 1.创建节点
    var aNode = document.createElement('a');

    // 2.为节点对象添加属性
    aNode.href   = 'https://www.baidu.com';
    aNode.text   = '百度一下,你就知道';
    aNode.target = '_blank';

    // 3.获取 "当前节点"
    var box   = document.getElementById('box');
    // 4.将 aNode 这个节点追加到 box 中, appendChild 追加到最后
    // box.appendChild(aNode);

    // 5 插入到指定节点的前面
    var referenceNode = document.querySelectorAll('.testNode')[1];
    // 将 要插入节点 插入到 参照节点之前   box.insertBefore(要插入节点, 参照节点);
    box.insertBefore(aNode, referenceNode);
}
</script>
</body>
</html>

复制(克隆)节点

cloneNode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
    <div class="box">
        <p>--------a测试节点a---------</p>
        <p>--------b测试节点b---------</p>
        <p>--------c测试节点c---------</p>
    </div>
<script>
window.onload = function () {
    // 复制节点:  新节点 = 原节点.cloneNode(参数); 参数可选复制节点
    
    // 1.获取需要拷贝的节点
    var box = document.getElementsByClassName('box')[0];

    // 2.克隆节点
    // var newNode = box.cloneNode(false); // 浅克隆: 只拷贝需要拷贝的节点(默认)
    var newNode = box.cloneNode(true);     // 深克隆: 拷贝节点中所有子节点

    // 3.将拷贝的内容追加到box中
    box.appendChild(newNode);
}
</script>
</body>
</html>

删除节点

remove 自杀
removeChild 他杀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
    <div id="box">
        <p class="testNode">---------a测试a--------</p>
        <p class="testNode">---------b测试b--------</p>
        <p class="testNode">---------c测试c--------</p>
    </div>
<script>
window.onload = function () {
    // 删除节点   删除 <p class="testNode">---------b测试b--------</p> 这个节点
    // 1.获取 "需要删除的节点"
    var delNode = document.getElementById('box').children[1];

    // 2.获取 "需要删除的节点" 的 父节点并调用 removeChild 删除需要删除的节点
    // delNode.parentNode.removeChild(delNode);   // 他杀

    // 2.直接删除节点(自杀)    推荐使用
    delNode.remove();
    // 可简写为 document.getElementById('box').children[1].remove();
}
</script>
</body>
</html>

替换节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>replaceNode</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <button id="replace">replace</button>
    <div id="box"></div>
<script>
window.onload = function () {
    document.getElementById('replace').onclick = function () {
        var btnNode = document.createElement("button");
        btnNode.innerText = 'button';
        document.body.replaceChild(btnNode, document.getElementById('box'));
    };
};
</script>
</body>
</html>