上接《这篇博文》，其应用于avalon的if绑定。如果一个节点还没有插入DOM树，那么avalon将延时对它进行扫描渲染，直到它再次插入到DOM树为止。由于CSS3 keyframe动画的复杂性，我还是使用很挫的轮询方式来判定一个节点插入到DOM树。

https://github.com/RubyLouvre/avalon/blob/master/avalon.js#L1938

                avalon(elem).addClass("fixMsIfFlicker")

                var id = setInterval(function() {

                    if (root.contains(elem)) {

                        clearInterval(id)

                        ifcall()

                        avalon(elem).removeClass("fixMsIfFlicker")

                    }

                }, 20)

今天一早与Aaron聊过后，决定试用DOMNodeInserted事件。因为Aaron提供了非常好的脚本，用于判定浏览器是否支持变动事件。

document.implementation.hasFeature("MutationEvents", "2.0")

下面是一个完整的测试脚本，如果有IE9或其他标准浏览器的人，请帮忙把你们在控制台看到的打印日志提交给我（连同浏览器的类型与版本号）

 <!DOCTYPE HTML>

<html id="html">

    <head>

        <meta charset="utf-8">

        <title>测试用例</title>

    </head>

    <body>

        <h3>测试变动事件支持情况：</h3>

        <table>

            <tr>

                <th>浏览器</th><th>DOMNodeRemoved</th><th>DOMNodeInserted</th>

            </tr>

            <tr>

                <th>IE11</th><th>ok</th><th>ok</th>

            </tr>

            <tr>

                <th>IE10</th><th>ok</th><th>ok</th>

            </tr>

            <tr>

                <th>IE10的IE9模式</th><th>ok</th><th>ok</th>

            </tr>

            <tr>

                <th>firefox25</th><th>ok</th><th>ok</th>

            </tr>

            <tr>

                <th>chrome31</th><th>ok</th><th>ok</th>

            </tr>

            <tr>

                <th>safar5.1.7</th><th>ok</th><th>ok</th>

            </tr>

        </table>

        <div id="aaa"></div>

        <script>

            console.log(document.implementation && document.implementation.hasFeature("MutationEvents", "2.0"))

            window.onload = function() {

                var el = document.getElementById("aaa")

                document.body.addEventListener("DOMNodeRemoved", function(e) {

                    console.log(e.type)

                    console.log(e.target.id)

                })

                document.body.addEventListener("DOMNodeInserted", function(e) {

                    console.log(e.type)

                    console.log(e.target.id)

                })

                var div = document.createElement("div")

                div.id = "insert"

                document.body.appendChild(div)

                el.parentNode.removeChild(el)

            }

        </script>

    </body>

</html>

目前收集的数据如下：

浏览器 DOMNodeRemoved DOMNodeInserted
IE11 ok ok
IE10 ok ok
IE10的IE9模式 ok ok
firefox25 ok ok
chrome31 ok ok
safar5.1.7 ok ok

外国这篇文章提示说DOMNodeInserted有BUG。

判定元素是否刚插入到DOM树的更多相关文章

  1. 判定元素正在插入到DOM树——DOMNodeInsertedIntoDocument

    在firefox, webkit中我们可以使用DOMNodeInsertedIntoDocument事件,但这个事件很快变废弃了,虽然浏览器还是很有节操地支持它们,但哪一天不在也很难说.比如说fire ...

  2. 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

    zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...

  3. WebKit Inside: DOM树的构建

    当客户端App主进程创建WKWebView对象时,会创建另外两个子进程:渲染进程与网络进程.主进程WKWebView发起请求时,先将请求转发给渲染进程,渲染进程再转发给网络进程,网络进程请求服务器.如 ...

  4. DOM树操作

    DOM 操作 访问与树关系(节点) 绘制 DOM 树: childNodes, attributes 从一个中心元素访问其所有的直系亲属元素 访问父节点: parentNode 访问上一个兄弟节点: ...

  5. 从Chrome源码看浏览器如何构建DOM树

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 1 ...

  6. JS的Dom树小结

    一[DOM树节点]  DOM节点分为三大类:元素节点.文本节点.属性节点 文本节点.属性节点,为元素节点的两个子节点:  通过getElement系列方法,可以去到元素节点.     二[查看节点] ...

  7. DOM树节点和事件

    一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点  ...

  8. 深入解析浏览器的幕后工作原理(三) 呈现树和 DOM 树的关系

    呈现树和 DOM 树的关系 呈现器是和 DOM 元素相对应的,但并非一一对应.非可视化的 DOM 元素不会插入呈现树中,例如"head"元素.如果元素的 display 属性值为& ...

  9. 超全面的JavaWeb笔记day04<dom树等>

    1.案例:在末尾添加节点(*****) 创建标签 createElement方法 创建文本 createTextNode方法 把文本添加到标签下面 appendChild方法 2.元素对象(了解) 如 ...

随机推荐

  1. L138 Cryptocurrency Exchanges at Risk of Manipulation

    Several cryptocurrency exchanges are plagued by poor market surveillance, pervasive conflicts of int ...

  2. 2017.11.13 python+ Jlink+EFM32 批量烧录

    1 Add whl files to Python a. install the  environment variable of path b . useing the CMD command  : ...

  3. Android 开发最牛的图片轮播控件，基本什么都包含了。

    Android图片轮播控件  源码下载地址: Android 图片轮播 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能.因为ViewPager并不支持循环翻页, ...

  4. Electron 打包时下载 xxx-electron-v1.6.8--x64.zip 文件出错

    Electron 打包时下载 xxx-electron-v1.6.8--x64.zip 文件出错 今天在windows上打包其它平台的Electron应用的时候,由于是第一次,所以总是下载 xxx-e ...

  5. 使用Hydra通过ssh破解密码

    Hydra是非常高效的网络登录破解工具,它可以对多种服务程序执行暴力破解(SSH.VNC等等). 防止这种攻击其实很容易,方法很多.以SSH为例: Ubuntu:使用Port Knocking隐藏SS ...

  6. Eclipse环境搭建配置操作

    1.选择window 2.设置字体 3.设置编码格式:国际编码:UTF-8 第一个地方设置编码格式 第二个地方设置编码格式:这个更重要些 4.配置26个英文小写字母. 作用:能够在开发时提示你,快速开 ...

  7. Mac OS X显示隐藏文件命令

    defaults write com.apple.finder AppleShowAllFiles Yes && killall Finder //显示隐藏文件 defaults wr ...

  8. ①HttpURLConnection通过报文提交

    在进行短信发送的接口,因厂家不同,有的厂家会采用报文的格式进行短信请求的发送与接收.本文主要介绍利用HttpURLConnection进行短信报文的请求与响应. 一般的url请求分为两种,一种是GET ...

  9. Go入门教程

    本人录制的Go入门视频 20小时快速入门go语言视频:https://pan.baidu.com/s/1jJPsThk 基础编程 01.Go语言介绍02.环境搭建03.第一个Go程序 04.命名.变量 ...

  10. 51nod 1965 奇怪的式子 —— min_25筛

    题目:http://www.51nod.com/Challenge/Problem.html#!#problemId=1965 推式子就同这里:https://www.cnblogs.com/yoyo ...