javascript 代码更改 innerhtml 时未触发 Mutationobserver

Question

我有一个 MutationObserver，它观察 ID 为 shipping_cost 的元素，并在元素的 innerhtml 更改时触发函数 updateTotal()。当 innerHTML 从外部源（例如检查元素）发生更改时，MutationObserver 会起作用。但是当我从 javascript 内部更改 innerHTML 时，MutationObserver 没有被触发，我哪里做错了？

在代码中可以看到，在javascript的末尾，我试图从javascript内部更改innerhtml，但是id为total的元素的innerhtml却没有没有改变，这表明 updateTotal() 没有被解雇。

但是，当我使用 inspect 元素更改 innerhtml 时，函数 updateTotal() 被触发（在 chrome 中：右键单击 -> inspect）。我该如何解决这个问题？

const subtotal = document.getElementById("subtotal");
const shipping_cost = document.getElementById("shipping_cost");
const total = document.getElementById("total");
const price_loading_text = "Loading . . .";
shipping_cost.innerHTML = price_loading_text;
total.innerHTML = price_loading_text;
function updateTotal() {
    if(shipping_cost.innerHTML != price_loading_text) {
        total.innerHTML = parseFloat(subtotal.innerHTML) + parseInt(shipping_cost.innerHTML);
    } else {
        total.innerHTML = price_loading_text;
    }
}
updateTotal();

observer = new MutationObserver(updateTotal);

observer.observe(shipping_cost, {
attributes: false,
childList: false,
subtree: true,
characterData: true});

shipping_cost.innerHTML = "100";

<p>Subtotal: <span id="subtotal" class="subtotal">9999</span></p>
<p>Shipping_cost: <span id="shipping_cost" class="shipping_cost"></span></p>
<p>Total: <span id="total" class="total"></span></p>

Answer 1

正在做

shipping_cost.innerHTML = "100";

修改元素的 children - 具体来说，它将所有现有的 children 从 DOM 中删除，然后插入一个新的文本节点作为 child .这应该使您直观地知道您不需要

childList: false,

而是

childList: true,

要查看 children 的更改。

const subtotal = document.getElementById("subtotal");
const shipping_cost = document.getElementById("shipping_cost");
const total = document.getElementById("total");
const price_loading_text = "Loading . . .";
shipping_cost.innerHTML = price_loading_text;
total.innerHTML = price_loading_text;

function updateTotal() {
  if (shipping_cost.innerHTML != price_loading_text) {
    total.innerHTML = parseFloat(subtotal.innerHTML) + parseInt(shipping_cost.innerHTML);
  } else {
    total.innerHTML = price_loading_text;
  }
}
updateTotal();

observer = new MutationObserver(updateTotal);

observer.observe(shipping_cost, {
  attributes: false,
  childList: true,
  subtree: true,
  characterData: true
});

shipping_cost.innerHTML = "100";

<p>Subtotal: <span id="subtotal" class="subtotal">9999</span></p>
<p>Shipping_cost: <span id="shipping_cost" class="shipping_cost"></span></p>
<p>Total: <span id="total" class="total"></span></p>

就是说，我建议仅在代码 您无法控制 对 DOM 进行突变时才使用观察器。如果您可以控制应用程序中的所有代码，通常在更改 DOM 后调用所需函数会容易得多。例如，不要做

shipping_cost.innerHTML = "100";

但是

const updateShippingCost = (newCost) => {
  shipping_cost.innerHTML = newCost;
  total.innerHTML = Number(subtotal.innerHTML) + newCost;
};
updateShippingCost(100);

javascript 代码更改 innerhtml 时未触发 Mutationobserver

Mutationobserver not fired when innerhtml changed by javascript code

javascript

mutation-observers