Mutation observer - 获取孩子的所有视频标签

Question

我有一个变异观察者（子树：真）。我显示了所有添加的节点（我猜）。当我用 console.log(mutation.target.tagName) 监视它时，我看到 DIV 和 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 (https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) 的 addedNodes 属性中（在您的情况下为 mutation）。您必须遍历此列表并搜索视频节点。
这是一个例子：

如果 Whosebug 代码片段不起作用 - 试试 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>

Mutation observer - 获取孩子的所有视频标签

Mutation observer - get all video tags of childs

javascript

mutation

mutation-observers