代码之家 › 专栏 › 技术社区 › David

突变观察者-获取儿童的所有视频标签

mutation mutation-observers javascript

1

David · 技术社区 · 7 年前

我有一个突变观察者(子树:true)。我显示添加的所有节点(我猜)。当我用控制台监视它时。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);

1 回复 | 直到 7 年前

1

0

Bsalex 7 年前

中列出了添加的节点 addedNodes a的属性 MutationRecord ( https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord ) ( 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>