js如何获取动态生成的dom节点

应用场景-植入js脚本

植入js脚本对站点实现各种限制的难点在于，如何正确且及时的获取到需要操作的dom节点。
需要进行操作的dom节点可能不是一开始就出现在文档流当中，所以使用常规获取节点的方式并不能取到要操作的节点。

针对以上问题就需要有一个方法可以及时获取到节点（节点渲染到文档流中的时候及时获取到再进行对应的操作）

listening()函数就是完成及时获取到动态节点的方法也是植入js脚本实现对站点各种限制的核心函数；

实现思路：

首先一个帧循环函数（setInterval）执行间隔就是速率，经过测试推荐200 -600毫秒之间，不宜过快也不宜过慢。
过快会导致性能消耗过大且有可能造成意想不到的bug，但也会越及时的获取到需要操作的dom节点
过慢会导致获取dom节点不及时影响实际功能效果

然后主体函数listening（domText, callback, effective）该函数有3个参数

参数	说明	类型	可选值	默认
callback	获取到节点后的回调函数并在第一个参数回传获取到的dom节点	function(value)	–	–
domText	JQ选择器表达式	string	–	–
effective	是否持续获取表达式对应的节点，false为否true为是。	boolean	true/false	false

listening（）//函数主要负责的是根据入参生成一个监听对象push到listens数组中

var obj = {
	id: (new Date()).valueOf()+randomString(12),    //对象唯一id
    text: domText,    //jq表达式
   	callback: callback,      //回调函数
    state: false,         //状态，标识有没有找到过
    effective: effective     //是否持续匹配不管是否找到过
}

然后把对象push到listens变量中。
最后在funs对象中新增一个唯一id的属性
funs[obj[‘id’]] = callback

上面帧循环的函数会遍历listens变量并根据对象里的状态去判断是否需要获取dom节点。
如在帧循环中获取到了指定节点那边就调用回调函数并回传获取到的dom节点。在执行回调函数中的对应操作。

代码示例：

	//生成随机字符串
    function randomString(len) {
    　　len = len || 32;
    　　var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    　　var maxPos = $chars.length;
    　　var pwd = '';
    　　for (i = 0; i < len; i++) {
    　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    　　}
    　　return pwd;
    }



    // 帧循环
    setInterval(function() {

        for (var i in listens) {
            if (listens[i]['state'] == false) {
                if (AJS.$(listens[i]['text']).length > 0) {
                    funs[listens[i]['id']](AJS.$(listens[i]['text']))
                    if (!listens[i]['effective']) listens[i]['state'] = true
                }
            }
        }

    }, 300);

    //获取动态元素
    var listens = []
    var funs = {}
    function listening(domText, callback, effective) {

        effective = effective || false

        if (AJS.$(domText).length > 0) {
            callback(AJS.$(domText))
        } else {
            var obj = {
                id: (new Date()).valueOf()+randomString(12),
                text: domText,
                callback: callback,
                state: false,
                effective: effective
            }
            listens.push(obj);
            funs[obj['id']] = callback
        }

    }

应用示例：

//移除某个按钮
listening('.plugin_attachments_upload_container', function(e) {
          e.remove()
})