Question

是否有任何事件需要知道特定元素＆＃34;何时开始存在＆＃34;在原始的JavaScript？例如，我有

<div class="parent">
  <div class="child"></div>
</div>

我想在.parent和.parent（而不是.child）＆＃34;开始存在时做一些事情＆＃34;使用事件而不是将js代码放在其中。我尝试了setInterval并检查.parent是否存在。

Answer 1

我无法想象你想做什么，但我希望这会对你有所帮助

<div class="parent" onload="yourFunction()">
     <script>
         function yourFunction(){
             // your code
         }
     </script>
     <div class="child"></div>
</div>

Answer 2

此功能，使用DOMSubtreeModified等的突变事件现在正在完全删除。 as shown here，但您可以使用MutationObserver代替specs here

一个关于如何使用它的简单示例来自here这个：

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

您可以在MutationObserverInit

获取观察者配置对象的所有配置参数

Answer 3

您可以使用DOMSubtreeModified处理DOM更改。

使用jQuery

$(function() {
  $(".parent-wrapper").bind("DOMSubtreeModified", function() {
     if ($(this).find(".parent")) {
        alert("hey a new element with 'parent' class seems to be exist")
     }
  });
  
  
  //lets simulate dom change
  setTimeout(function() {
      $(".parent-wrapper").append('<div class="parent"><div class="child">test</div></div>');
   }, 3000);
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent-wrapper">
  
</div>

<强>更新：

以下是纯javascript 版本，

document.getElementById("parent-wrapper").addEventListener('DOMSubtreeModified', function () {
  alert("hey a new element with 'parent' id seems to be exist")
}, false);

//lets simulate dom change
  setTimeout(function() {
      document.getElementById("parent-wrapper").innerHTML = '<div class="parent"><div class="child">test</div></div>';
   }, 3000);

<div id="parent-wrapper">
  
</div>

特定元素是否存在事件

3 个答案: