JS操作dom树：增删改查

最新推荐文章于 2023-07-25 20:26:10 发布

充满鲜花的世界到底在哪里

最新推荐文章于 2023-07-25 20:26:10 发布

阅读量158

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/New_new_zero/article/details/115748582

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<html>
<head>
    <meta charset="utf-8"/>
    <title>操作dom树</title>
</head>
<style type="text/css">
    #div1Id {
        width: 200px;
        height: 150px;
        border: 2px solid red;
    }

    #div2Id {
        width: 250px;
        height: 150px;
        border: 5px dashed green;
    }
</style>
<body>
<div id="div1Id">
    <ul id="ul1Id">
        <li>a</li>
        <li id="li2">b</li>
        <li id="li3">c</li>
    </ul>
</div>
<!-- 执行剪切或复制后将得到 div1Id 中的 ul 标签 -->
<div id="div2Id">

</div>
<!-- 创建按钮用来将 div1Id 的列表剪切至 div2Id 中 -->
<input type="button" value="一键剪切" onclick="cut();"/>
<!-- 在 ul1Id 中 b 后面添加d -->
<input type="button" value="一键添加" onclick="add();"/>
<!-- 删除 b -->
<input type="button" value="一键删除" onclick="remove();"/>
<!-- 替换 c 为 e -->
<input type="button" value="一键替换" onclick="replace();"/>
<!-- 创建按钮用来将 div1Id 的列表复制至 div2Id 中 -->
<input type="button" value="一键复制" onclick="copy();"/>
</body>
<script type="text/javascript">
    //剪切列表
    function cut() {
        //获取目的添加对象 div2
        var div2 = document.getElementById("div2Id");
        //获取源添加对象 div1 中的 ul1
        var ul1 = document.getElementById("ul1Id");
        /* 将 ul1 剪切至 div2 中 */
        div2.appendChild(ul1);
        //div2.insertBefore(ul1);//效果一样
    }

    //在b后面添加d
    function add() {
        //创建 li4 准备储存值 d
        var li4 = document.createElement("li");
        //将值 d 添加（剪切）至 li4 中
        li4.appendChild(document.createTextNode("d"));

        //获取值为 b 的 li2
        var li2 = document.getElementById("li2");
        //获取源添加对象 div1 中的 ul1
        var ul1 = document.getElementById("ul1Id");
        //将新 li4 添加至 li2 之前（在b后面添加d）
        ul1.insertBefore(li4, li2);
        //没有insertAfter()方法
    }

    //删除 b
    function remove() {
        var ul1 = document.getElementById("ul1Id");
        ul1.removeChild(document.getElementById("li2"));
    }

    //替换 c 为 e
    function replace() {
        var ul1 = document.getElementById("ul1Id");
        var li3 = document.getElementById("li3");
        //创建节点 li5
        var li5 = document.createElement("li");
        //将 li5 值赋为 e
        li5.appendChild(document.createTextNode("e"));
        //用新节点 li5 替换旧节点 li3
        ul1.replaceChild(li5, li3);
    }

    //复制列表
    function copy() {
        var ul1 = document.getElementById("ul1Id");
        //获取 ul1 的副本
        var ul1Copy = ul1.cloneNode(true);
        //获取目的 div 标签
        var div2 = document.getElementById("div2Id");
        //将  ul1 的副本放入目的 div 标签
        div2.appendChild(ul1);
    }
</script>
</html>
<!-- 
	** 操作dom总结
		* 获取节点使用方法
			getElementById()：通过节点的id属性，查找对应节点。
			getElementsByName()：通过节点的name属性，查找对应节点。
			getElementsByTagName()：通过节点名称，查找对应节点
			---------------------------------------------------------------------------------
			以下方法都是通过父节点调用：
		* 插入节点的方法
			insertBefore方法：在某个节点之前插入
			appendChild方法：在末尾添加，剪切黏贴
		* 删除节点方法
			removeChild方法：通过父节点删除
		* 替换节点方法
			replaceChild方法：通过父节点替换
		 -->