how to delete the virtual dom that created in memory using js

const virtualDomConvert = (filename = ``) => {
const svg = document.querySelector(`[id="live_map_svg"]`);
const clone = svg.cloneNode(true);
clone.id = 'vdom_svg';
// autoRemoveAttributes(clone);
const html = clone.outerHTML;
// add xml namespace, support browser open preview
const xml = `
<?xml version="1.0" encoding="UTF-8"?>
${html}
`.trim();
const alink = document.createElement('a');
alink.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(xml));
alink.setAttribute('download', filename);
alink.style.display = 'none';
const vdom = document.createElement(`div`);
vdom.appendChild(alink);
alink.click();
vdom.removeChild(alink);
// ??? how to delete vdom ???
// document.body.appendChild(alink);
// alink.click();
// document.body.removeChild(alink);
}

solution

object delete


vdom = document.createElement(`div`);
// <div>​</div>​ vdom.remove();
// undefined vdom;
// <div>​</div>​ window.vdom;
// <div>​</div>​ this.vdom;
// <div>​</div>​
delete this.vdom;
// true
vdom;
// VM98286:1 Uncaught ReferenceError: vdom is not defined at <anonymous>:1:1

vdom = document.createElement(`div`);
// <div>​</div>​ vdom.setAttribute("id", "uuid_div");
//undefined
document.getElementById("uuid_div");
//null
document.getElementById("uuid_div").remove();
//VM105598:1 Uncaught TypeError: Cannot read property 'remove' of null
at <anonymous>:1:36

demo




not work

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

// remove child
node.removeChild(child);
// OR
const oldChild = node.removeChild(child);

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

// remove self
node.remove();

Web Component

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement#Web_component_example

https://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElement

https://www.w3.org/TR/custom-elements/

https://github.com/w3c/webcomponents/

refs

https://www.digitalocean.com/community/tutorials/how-to-make-changes-to-the-dom



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


how to delete the virtual dom that created in memory using js的更多相关文章

  1. React v16-alpha 从virtual dom 到 dom 源码简读

    一.物料准备 1.克隆react源码, github 地址:https://github.com/facebook/react.git 2.安装gulp 3.在react源码根目录下: $npm in ...

  2. Virtual DOM(八)

    Virtual DOM 这个概念相信大部分人都不会陌生,它产生的前提是浏览器中的 DOM 是很“昂贵"的,为了更直观的感受,我们可以简单的把一个简单的 div 元素的属性都打印出来,如图所示 ...

  3. vue的Virtual Dom实现- snabbdom解密

    vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...

  4. 将你的 Virtual dom 渲染成 Canvas

    项目概述 一个基于Vue的virtual dom插件库,按照Vue render 函数的写法,直接将Vue生成的Vnode渲染到canvas中.支持常规的滚动操作和一些基础的元素事件绑定. githu ...

  5. 简单说明 Virtual DOM 为啥快

    Virtual DOM 就是用 JS 的对象来描述 DOM 结构的一个 DOM 树.如: var element = { tagName: 'ul', // 节点标签名 props: { // DOM ...

  6. virtual DOM的作用:将DOM的维护工作由系统维护转交给virtual DOM维护

    virtual DOM的作用:将DOM的维护工作由系统维护转交给virtual DOM维护 两个方面:对应用端 & 对DOM端(渲染准备的计算) 1.将DOM状态的维护工作由系统维护转交给vi ...

  7. React Virtual DOM Explained in Simple English

    If you are using React or learning React, you must have heard of the term “Virtual DOM”. Now what is ...

  8. React virtual DOM explained in simple English/简单语言解释React的虚拟DOM

    初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

随机推荐

  1. .NET5 它来了!微软大一统时代来临!

    今天双11,Microsoft released.NET 5(在他们的开发博客上同时发布).新版本的重点是改进.NET Core 3.1: 更小的单文件应用程序.对 Windows ARM64的支持以 ...

  2. springboot项目-声明式事务失效

    1.项目背景 集成了shiro配置 2. 项目分析 由于ShiroFilterFactoryBean实现了FactoryBean接口,所以它会提前被初始化.又因为SecurityManager,Sec ...

  3. 动态传参,命名空间,嵌套,gloabal,nonlocal

    一.动态传参 动态接受位置参数:  *参数名 def eat(*food): print(food) #多个参数传递进去,收到的内容是元祖tuple eat("盖浇饭", &quo ...

  4. TRUNK与VTP

    TRUNK协议: 交换机之间VLAN通信: 同一个VLAN可以跨越多个交换机 主干功能支持多个VLAN的数据 Trunk(主干) VLAN 中交换机之间的链路:用来承载多个VLAN的数据流. Trun ...

  5. msf+cobaltstrike联动(一):把msf的session发给cobaltstrike

    前提:MFS已经获取到session,可以进入metepreter,现在需要使用cobaltstrike进行图形化管理或团队协作. cobaltstrike起一个beacon监听,如使用:window ...

  6. Mysql:好好的索引,为什么要下推?

    前段时间有读者提议讲讲索引下推,这期就把这事儿安排上.多余的前言就不赘述了,我们直接开始. 列位坐好! 图注:思维导图 回表操作 对于数据库来说,只要涉及到索引,必然绕不过去回表操作.当然这也是我们今 ...

  7. Java中的fail-fast和 fail-safe 的区别

    在我们详细讨论这两种机制的区别之前,首先得先了解并发修改. 1.什么是同步修改? 当一个或多个线程正在遍历一个集合Collection,此时另一个线程修改了这个集合的内容(添加,删除或者修改).这就是 ...

  8. 2020 ICPC Universidad Nacional de Colombia Programming Contest

    2020 ICPC Universidad Nacional de Colombia Programming Contest A. Approach 三分 显然答案可以三分,注意\(eps\)还有两条 ...

  9. Codeforces Round #666 (Div. 2)

    比赛链接:https://codeforces.com/contest/1397 A. Juggling Letters 题意 给出 $n$ 个字符串,可在字符串间任意移动字母,问最终能否使这 $n$ ...

  10. Windows10与虚拟机中CentOS-7.2进行telnet通信 出现在端口23处失败【解决】

    (telnet服务是由xinetd守护,所以安装和启动都要用到xinetd) 1.先检查CentOS7.0是否已经安装以下几个安装包:telnet-server.telnet.xinetd.命令如下: ...