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. Django学习之URLconf

    Django处理request的步骤: 1.确定根URLconf 2.载入urls.py,找到变量urlpatterns,urlpatterns是django.conf.urls.url()的实例对象 ...

  2. 简单使用shell 自动打包,发布项目 脚本

    (1)打包,发布脚本 deploy.sh packagepath=/home/admin/testProject/project application=testProject mkdir -p $p ...

  3. hadoop入门博客链接

    http://blog.itpub.net/30066956/cid-175369-list-1/

  4. Java并发编程(十二)线程安全性的委托

    在组合对象中如果每个组件都已经是线程安全的,是否需要再加一个额外的"线程安全层",需要视情况而定. final可以修饰未复制的属性,只要在静态代码块或者构造函数中赋值了即可. 独立 ...

  5. Java并发编程(十一)实例封闭

    本节主题:如果一个类是线程不安全的,但是又要在多线程程序中安全地使用,你该怎么办? 大体有两种思路: 第一种:确保该对象是能由单个线程访问,也就是这个对象是被封闭在线程中的: 第二种:通过锁来对该对象 ...

  6. 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全

    jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...

  7. Web Services 概要

    WSDL WSDL 是基于 XML 的用来描述 Web services 以及如何访问它们的一种语言. WSDL 可描述 web service,连同用于 web service 的消息格式和协议的细 ...

  8. gcc 编译 连接 生成可执行文件

    gcc c语言编译器 g++ c++编译器 gcc a.c  生成默认的a.out 可执行文件  ./a.out  来执行 gcc -c a.c 编译生成 a.o 目标文件 可以检查语法错误 gcc ...

  9. LeetCode Problem 2:Two Sum

    描述: Given an array of integers, find two numbers such that they add up to a specific target number. ...

  10. 【BZOJ1923】[Sdoi2010]外星千足虫 高斯消元

    [BZOJ1923][Sdoi2010]外星千足虫 Description Input 第一行是两个正整数 N, M. 接下来 M行,按顺序给出 Charles 这M次使用“点足机”的统计结果.每行 ...