带你彻底学会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>


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

目录
相关文章
|
27天前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
27天前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
9天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
14天前
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
15 0
|
25天前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
21 0
|
2天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
9 0
|
2天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
9 4
|
6天前
|
JavaScript 前端开发
|
14天前
|
JavaScript
理解DOM树的加载过程(js的问题)
理解DOM树的加载过程(js的问题)
|
16天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
16 4