操作第三方脚本添加的 DOM 元素答案

【问题标题】：Manipulating DOM element added by third-party script操作第三方脚本添加的 DOM 元素
【发布时间】：2015-06-28 17:50:59
【问题描述】：

情况：

加载了一个向 DOM 添加一些内容的外部第三方脚本。

目标：

一旦这些东西被添加到 DOM，我想用一点 jQuery 来操作它的内容。

为了确保这个新的 DOM 元素在操作之前存在，我可以这样做：

var updateText, target;

updateText = function() {
    target = $('#targetElement');
    if(target.length) {
        target.text('Updated!');
    } else {
        window.setTimeout(updateText, 500);
    }
};

updateText();

这看起来有点可怕。有没有更好的方法来处理这种依赖？

相关限制：

第三方脚本没有暴露的 API。
为了工作，这个特别的脚本显然必须通过<script> 元素加载，该元素在src 属性中具有特定的URL。所以通过传递给$script.js 来加载脚本是行不通的。
当它运行时，它还会依次加载自己的外部依赖包。即使我可以在触发我自己的代码之前检查初始脚本是否已加载，我也不知道我是否可以检查这些其他外部脚本。

【问题讨论】：

由于您的代码正在运行并且您正在寻找更好/更清洁的实现，因此最好将其发布在Code Review
该第三方脚本是否使用异步代码？
@Oriol 这有点难看，我只是稍微研究了一下。我看到通过附加到head 的script 元素请求了几个依赖项。
@mutus 您可以尝试使用load 事件监听器。

标签： javascript jquery dom

【解决方案1】：

您可以使用 DOMSubtreeModified 事件来做到这一点。这是一个例子：

$("#a").bind("DOMSubtreeModified", function() {
    alert("tree changed");
    $("span").css("background", "blue");
});


$("#add").click(function() {a
    $("#a").append("<span>hey there</span><br>");
});

div {
    background-color: black;
}

span {
    background-color: red;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
</div>

<button id="add">Add to Div</button>

【讨论】：

这有效（以某种方式），但不推荐使用DOMSubtreeModified。我收集的原因非常好（与性能相关）。