function unwrap(el, target) {
    if ( !target ) {
        target = el.parentNode;
    }
    while (el.firstChild) {
        target.appendChild(el.firstChild);
    }
    el.parentNode.removeChild(el);
}

var AutoFix = true;

document.getElementById('editable')
.addEventListener('DOMNodeInserted', function(ev) {
    if ( !AutoFix ) {
        return;
    }
    if ( ev.target.tagName=='SPAN' ) {
        unwrap(ev.target);
    }
});

dom节点被删除,在内存中也没有了,他也就没有所谓的next previous了
引用类型一个改变,其他的一样会改变,引用的是同一个内存,就不用重复的获取了 如
child = parents.childNodes [text span span]
只要有一个子节点改变了 child就立马改变,比如去掉第二个的span,则child就变成了[text text span]
childNodes获取的是所有的子节点   children是除了text节点之外的所有元素节点

dom树改变监听的更多相关文章

  1. dom元素改变监听

    function domChange(domId, callback) { // select the target node var target = document.getElementById ...

  2. Vue获取dom和数据监听

    Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...

  3. IE与DOM的事件监听

    IE 事件监听 标准DOM不支持   注意几点: window.onload attachEvent detachEvent 标准DOM监听,ie不支持

  4. asterisk-java ami3 属性改变监听

    asteriskServer.addAsteriskServerListener(new AsteriskListenerInit());//服务属性监听会自动连接服务 实现AsteriskServe ...

  5. 微信小程序全局变量改变监听

    问题来源 最近工作需要写小程序页面,其中有个页面情况为:父页面中包含了一个组件页面,组件页面中又包含了另外一个组件页面.需求为:点击最后一个组件页面中的一个view,需要显示最外层父页面中的一个弹出层 ...

  6. JS学习笔记(一)DOM事件和监听

    将事件绑定到元素身上的三种方法: 1.HTML事件处理程序(不推荐使用) 1 <a onclick="hide()"> 2.传统的DOM事件处理程序 即在目标DOM事件 ...

  7. dom 加载监听事件 及解析

    document.addEventListener("DOMContentLoaded", function (_event) { console.log("初始DOM ...

  8. Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  9. Vs 2015 调试ASP.NET Core修改监听端口

    如何改变监听IP地址和端口?在这里找到了答案:https://github.com/aspnet/KestrelHttpSer... 把Program.cs加一行UseUrls代码如下: using ...

随机推荐

  1. layui表格渲染中模板的使用举例

    实例一: { field: 'status', align: 'center', title: '活动状态', templet: function (d) { if (d.status == &quo ...

  2. HTTP协议之http状态码详解

    什么是HTTP状态码 HTTP状态码的作用是:Web服务器用来告诉客户端,发生了什么事. 状态码位于HTTP Response 的第一行中,会返回一个”三位数字的状态码“和一个“状态消息”. ”三位数 ...

  3. FastMethod和PropertyUtils两种反射方法的性能比较

    这两个类都提供反射方法的实现,性能对比如下: 循环条件是:1亿次 结论:PropertyUtils提供的getXXX和setXXX反射方法的性能是FastMethod的三倍 以下是测试方法: 首先是F ...

  4. 2016ATF阿里巴巴技术论坛

    转自:http://blog.csdn.net/mini_monster/article/details/51175879 “爱迪生的贡献不在于让灯泡亮的更久一些,爱迪生最大的贡献是在全世界第一个想到 ...

  5. IOS设计模式浅析之桥接模式(Bridge)

    引言 在项目开发中,我们会遇到这样的一种场景:某些类型由于自身的逻辑,往往具有两个或多个维度的变化,比如说大话设计模式书中所说的手机,它有两个变化的维度:一是手机的品牌,可能有三星.苹果等:二是手机上 ...

  6. LeetCode递归 -2(Recursion) 培训专题 讲解文章翻译 (附链接) (2019-04-09 15:50)

    递归 - 空间复杂度  在本文中, 我们将讨论如何分析递归算法的空间复杂度. 在计算递归算法的空间复杂度时,最需要考虑的两个部分就是: 递归相关空间 (recursion related space) ...

  7. Spring MVC内部资源视图解析器

    InternalResourceViewResolver用于将提供的URI解析为实际URI.下面的示例演示如何在Spring Web MVC框架中使用SpringResultViewResolver. ...

  8. JavaScript 函数语法

    函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { 这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件发生 ...

  9. C++11写算法之冒泡排序

    冒泡排序很形象,指从数组后面将更小的值慢慢浮到前面去,每遍历一趟使得最小值浮到最前面(指当前位置). 这里有点小技巧,当某一次遍历过程中发现无交换,则说明此时数组已经排序完成,可提前退出. 时间复杂度 ...

  10. 怎么把顶部的Django administration去掉!!

    /Library/Frameworks/Python.framework/Versions/3.4/lib/python3.4/site-packages/django/contrib/admin/t ...