仅当具有特定 id 的元素可用时才执行函数

Question

我有一个 JavaScript 函数，只有当某个 id 的元素在 DOM 中可用时才应该执行该函数。

Answer 1

好吧，如果我正确理解您的需求，我相信这应该可行：

const elementToObserve = document.querySelector("#parentElement");
const lookingFor = '#someID';
const observer = new MutationObserver(() => {
    if (document.querySelector(lookingFor)) {
        console.log(`${lookingFor} is ready`);
        observer.disconnect();
    }
});

observer.observe(elementToObserve, {subtree: true, childList: true});

您需要观察您希望元素出现的位置的父元素。将 subtree 和 childList 选项设置为 true 后，它将观察那里的变化，并在发现任何差异后触发回调。如果您要查找的元素现在在页面上，您可以检查该回调。

Answer 2

按照文档生成工作示例非常重要，DOM documentation 可以提供有用的说明。

事实证明 MutationObserverInit dictionary 不是“对象类型”，而只是一个接口描述语言 (IDL) 术语，用于描述用于观察更改的选项对象 - 只需要一个 Object 对象。

FWIW 这是一个检测添加新节点或将现有节点的 ID 更改为“certainId”的示例。

"use strict";
const target = document.getElementById("target");
const observer = new MutationObserver( checkChanges);
const certainId = "certainId";

function checkChanges(changeList, fromObserver) {
   console.log("Callback 2nd argument is the observer object: %s", fromObserver === observer);
   for( let change of changeList) {
      if( change.type == "attributes") {
          if( change.target.id === certainId) {
              console.log("id has been changed: ", change.target);
              break;
          }
      }
      else if( change.type == "childList") {
          for( let node of change.addedNodes) {
              if( node.id==certainId) {
                  console.log("target was added: ", node);
                  break;
              }
          }     
      }
   }
}
observer.observe( target, {
    subtree: true,
    attributeFilter: ["id"],
    childList: true
});

// test
function changeId() {
    if( document.getElementById("test1")) {
         test1.id = "certainId";
    }
}

function insertSpan() { // button click
    if( document.getElementById("test2")) {
       test2.innerHTML = '<span id="certainId">span#certainId<\/span>';
    }    
}

<div id="target">
    <div id="test1">
        div#test1 (oriinally)
    </div>
    <div id="test2">
       div#test2
    </div>
</div>
<button type="button" onclick='changeId()'>Set id value</button> OR
<button type="button" onclick="insertSpan()">insert new element</button>

点击代码段中的两个测试按钮并生成具有重复 ID 的元素是可能的 - 在实践中最好避免。

仅当具有特定 id 的元素可用时才执行函数

Execute a function only when an element with a certain id becomes available

javascript

function

listener

observers