如何使用突变观察器通过 Id 隐藏元素

Question

我已阅读 https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/ 但仍不确定如何配置以实现我的 objective。

页面上有一个元素是由代码生成器生成的（所以我无法阻止这种行为）。该元素有一个 id "myid"，我只需要在它显示在浏览器中后将其隐藏。我的挑战是如何配置观察者，以便在显示元素时触发代码。

我已将我的问题作为评论插入我认为我需要帮助的地方，但如果我完全错了，请指导我：

var target = document.querySelector('#myid');
 
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {

  // how do I detect when the element is now on the page so that the next statement makes sense?
    document.getElementById("myid").style.visibility = "hidden";     
  });    
});
 
// what change do I need to make here?
var config = { attributes: true, childList: true, characterData: true }; 
 
observer.observe(target, config);
 
observer.disconnect();

Answer 1

为什么不直接使用 CSS？这样您就不必担心项目何时创建，您不需要脚本开始。

#myid {
  visibility: hidden; /*!important; if necessary*/
}

如何使用突变观察器通过 Id 隐藏元素

How to hide an element by Id with mutation observer

javascript

mutation-observers