突变观察者 - 获取所有孩子的视频标签

Question

我有一个突变观察者(subtree：true(。我显示添加的所有节点(我想(。当我使用Console.Log(Mutation.target.tagname(进行监视时，我会看到Div and Body等...但是，我现在需要在所有添加的标签中添加一个侦听器(实际上是一个用于Onplay，一个用于Onpause(

知道我如何在添加的儿童诺德斯中找到(和反应(所有添加的视频标签？

var target = document.body;
//then define a new observer
var bodyObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
    //How do i egt the video tags to add a listener?
    console.log("mutation detected: " + mutation.target.tagName);
    if (mutation.target.tagName == "VIDEO") {
        mutation.target.onclick =function () { console.log("The video has been clicked")}
    }
})
})
var bodyObserverConfig = { attributes: true, childList: true, subtree: true, 
characterData: true };
bodyObserver.observe(target, bodyObserverConfig);

Answer 1

添加的节点在 MutationRecord的 addedNodes属性中列出(https://developer.mozilla.org/en-us/docs/web/api/maintrecord((在您的情况下，mutation(。您必须迭代此列表并搜索视频节点。
这是一个示例：

如果Stackoverflow代码段不起作用 - 尝试Codepen https://codepen.io/bsalex/pen/wmgvry。

var target = document.body;
//then define a new observer
function addVideoHandler(node) {
  if (node.tagName == "VIDEO") {
    node.onclick = function() {
      alert("The video has been clicked");
    };
  }
}
var bodyObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    //How do i egt the video tags to add a listener?
    console.log("mutation detected: " + mutation.target.tagName);
    mutation.addedNodes.forEach(addedNode => {
      addVideoHandler(addedNode);
      // it might be text node or comment node which don't have querySelectorAll
      addedNode.querySelectorAll && addedNode.querySelectorAll("video").forEach(addVideoHandler);
    });
  });
});
var bodyObserverConfig = {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
};
bodyObserver.observe(target, bodyObserverConfig);
// Example tools code below
document
  .querySelector(".add-videos-here-action")
  .addEventListener("click", () => {
    const videoElement = document.createElement("video");
    document.querySelector(".add-videos-here").appendChild(videoElement);
  });
document
  .querySelector(".add-nested-videos-here-action")
  .addEventListener("click", () => {
    const wrappingElement = document.createElement("div");
    wrappingElement.innerHTML =
      "<div><p><video /></p></div><div><video /></div>";
    document.querySelector(".add-videos-here").appendChild(wrappingElement);
  });
document
  .querySelector(".add-not-videos-here-action")
  .addEventListener("click", () => {
    const notVideoElement = document.createElement("div");
    notVideoElement.textContent = "It is not a video";
    document.querySelector(".add-videos-here").appendChild(notVideoElement);
  });
document
  .querySelector(".add-videos-here-too-action")
  .addEventListener("click", () => {
    const videoElement = document.createElement("video");
    document.querySelector(".add-videos-here-too").appendChild(videoElement);
  });

video {
  min-width: 100px;
  min-height: 100px;
  border: 1px solid red;
}

<button class="add-videos-here-action">Add video</button>
<button class="add-not-videos-here-action">Add NOT video</button>
<button class="add-videos-here-too-action">Add another video</button>
<div>
  <div class="add-videos-here">
    
  </div>
  
  <div class="add-videos-here-too">
    
  </div>
</div>