带你彻底学会JS DOM技术之删除,复制,替换元素

简介: 参数obj表示被复制的元素,而参数bool是一个布尔值,取值如下。1或true:表示复制元素本身以及复制该元素下的所有子元素。0或false:表示仅仅复制元素本身,不复制该元素下的子元素。


1.删除元素


在JavaScript中,我们可以使用removeChild()方法来删除父元素下的某个子元素


A.removeChild(B);


A表示父元素,B表示父元素内部的某个子元素


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>IMUSTCTF</title>
  <script src="js/index.js"></script>
</head>
<body>
  <ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>VUE</li>
  </ul>
  <input type="button" id="btn" value="删除最后一个"/>
</body>
</html>


window.onload=function() {
  var oBtn = document.getElementById("btn");
  oBtn.onclick = function() {
    var oUl = document.getElementById("list");
    oUl.removeChild(oUl.lastElementChild);
  }
}


页面点击删除元素后,会删除页面列表的最后一项:


3772aa94560943908aa976b163fff00c.png


2.复制元素


在JavaScript中,我们可以使用cloneNode()方法来实现复制元素


obj.cloneNode(bool)


参数obj表示被复制的元素,而参数bool是一个布尔值,取值如下。

1或true:表示复制元素本身以及复制该元素下的所有子元素。

0或false:表示仅仅复制元素本身,不复制该元素下的子元素。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>IMUSTCTF</title>
  <script src="js/index.js"></script>
</head>
<body>
  <ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>VUE</li>
  </ul>
  <input type="button" id="btn" value="复制列表"/>
</body>
</html>


window.onload=function() {
  var oBtn = document.getElementById("btn");
  oBtn.onclick = function() {
    var oUl = document.getElementById("list");
    document.body.appendChild(oUl.cloneNode(1));
  }
}


点击复制后,会对整个列表进行复制:



3.替换元素


在JavaScript中,我们可以使用replaceChild()方法来实现替换元素


A.replaceChild(new,old);


A表示父元素,new表示新子元素,old表示旧子元素

案例:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         window.onload=function()
         {
             var oBtn=document.getElementById("btn");
             oBtn.onclick=function()
             {
                //获取body中的第1个元素
                var oFirst=document.querySelector("body *:first-child");
                //获取2个文本框
                var oTag=document.getElementById("tag");
                var oTxt=document.getElementById("txt");
                //根据2个文本框的值来创建一个新节点
                var oNewTag=document.createElement(oTag.value);
                var oNewTxt=document.createTextNode(oTxt.value);
                oNewTag.appendChild(oNewTxt);
                document.body.replaceChild(oNewTag,oFirst);
             }
         }
    </script>
</head>
<body>
    <p>JavaScript</p>
    <hr/>
    输入标签:<input id="tag" type="text" /><br />
    输入内容:<input id="txt" type="text" /><br />
  <input id="btn" type="button" value="替换" />
</body>
</html>


文本框中输入信息,点击替换,结果如下

目录
相关文章
|
12天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
22天前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
23天前
|
JavaScript 前端开发 API
探索后端技术:Node.js的优势和实际应用
【10月更文挑战第6天】 在当今数字化时代,后端开发是任何成功软件应用的关键组成部分。本文将深入探讨一种流行的后端技术——Node.js,通过分析其核心优势和实际应用案例,揭示其在现代软件开发中的重要性和潜力。
95 2
|
13天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
16 3
|
22天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
36 4
|
23天前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
33 4
|
21天前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
27 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2