JavaScript基础(23)_DOM增删改

风之舞_yjf

已于 2024-01-09 22:47:06 修改

阅读量550

点赞数 9

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-12-06 15:59:06 首次发布

本文链接：https://blog.csdn.net/no15870678621/article/details/134833788

版权

JavaScript 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

DOM增加对象

createElement():
含义：创建一个元素节点对象。
用法：它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。
比如，创建一个列表项：var li = document.createElement("li");

createTextNode():
含义：创建文本节点对象。
用法：需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。
比如：var TextNode = document.createTextNode("广州");

appendChild():
含义：向一个父节点中添加一个新的子节点。
语法：父节点.appendChild(子节点)；

DOM删除对象

removeChild():
含义：删除一个子节点。
语法：父节点.removeChild(子节点);

DOM改动对象

insertBefore():
含义：在指定的子节点前面插入新的子节点。
语法：父节点.insertBefore(新子节点,旧子节点);

replaceChild():
含义：使用指定的子节点替换已有的子节点。
语法：父节点.replaceChild(新子节点,旧子节点);

父节点的获取：

1、直接找出父节点。
参照以下练习，举例：var city = document.getElementsByClassName("city")[0];

2、子节点.parentNode(推荐使用)。
参照以下练习举例：
var sz = document.getElementById("sz");               
sz.parentNode.replaceChild(li,sz);

代码示例：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>DOM增删改</title>
    <script>
        window.onload = function () {
            var li = document.createElement("li");
            // 相当于：var TextNode = document.createTextNode("广州");
            // li.appendChild(TextNode);
            li.innerHTML = "广州";

            // 为 "添加城市"按钮 绑定事件
            myclick("AddCity", function () {
                var city = document.getElementsByClassName("city")[0];
                city.appendChild(li);
            }
            );

            // 为 "删除城市"按钮 绑定事件
            myclick("RemoveCity", function () {
                var city = document.getElementsByClassName("city")[0];
                city.removeChild(li);
            }
            );

            // 为 "在最前面添加城市"按钮 绑定事件
            myclick("InsertBefore_city", function () {
                var sh = document.getElementById("sh");
                // 调用子节点.parentNode直接代替city，使代码更简洁。
                sh.parentNode.insertBefore(li, sh);
            }
            );

            // 为 "把深圳替换为广州"按钮 绑定事件
            myclick("ReplaceCity", function () {
                var sz = document.getElementById("sz");
                sz.parentNode.replaceChild(li, sz);
            }
            );
        }

        // 回调函数
        function myclick(btn, fun) {
            flag = document.getElementById(btn);
            flag.onclick = fun;
        }
    </script>
</head>

<body>
    <p>你喜欢哪个城市？</p>
    <ul class="city">
        <li id="sh">上海</li>
        <li>北京</li>
        <li>厦门</li>
        <li id="sz">深圳</li>
        <li>天津</li>
    </ul>
    <form action="">
        <input type="button" value="添加城市" id="AddCity">
        <input type="button" value="删除城市" id="RemoveCity"><br>
        <input type="button" value="在最前面添加城市" id="InsertBefore_city"><br>
        <input type="button" value="把深圳替换为广州" id="ReplaceCity">
    </form>
</body>

</html>