如何使HTML元素不可变？阻止H1标签被修改或移除的方法

为啥Object.freeze不管用 #

Object.freeze()只能冻结目标对象自身的属性，管不到原型链上的方法（比如remove()），也没法直接锁住style这种动态关联的子对象——你之前如果只冻了H1元素本身，style对象照样能改，remove()也还是能从原型链调用。

可行的解决办法 #

1. 阻止修改样式 #

有两种靠谱方式：

• 直接冻结style对象：把H1元素的style对象冻住，这样就没法通过style.xxx改样式了：

const h1 = document.querySelector("h1");
Object.freeze(h1.style);
// 这时候再执行 document.querySelector("h1").style.backgroundColor="red" 完全没用

• CSS锁死+禁用style属性修改：先给H1加!important样式锁死默认样式，再通过Object.defineProperty禁止修改style属性：

h1 {
  background-color: #你的默认颜色 !important;
}

const h1 = document.querySelector("h1");
Object.defineProperty(h1, 'style', {
  writable: false,
  configurable: false
});

这种方式连替换style对象都做不到，更彻底。

2. 阻止移除元素 #

也有两种实用方法：

• 重写元素的remove方法：给H1自己加个remove方法，覆盖原型链上的方法，让它执行时啥也不干：

const h1 = document.querySelector("h1");
h1.remove = function() {
  // 空函数，啥也不执行
};
// 这时候跑 document.querySelector("h1").remove() 根本删不掉元素

• 用MutationObserver监听恢复：监听文档里的节点移除变化，一旦发现H1被删，立刻把它插回去：

const h1 = document.querySelector("h1");
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.removedNodes.includes(h1)) {
      // 把H1插回原来的父元素里
      mutation.target.appendChild(h1);
    }
  });
});
observer.observe(document.body, { childList: true, subtree: true });

这种方式能拦住所有移除操作，包括通过父元素removeChild之类的方法删H1的情况。

注意点 #

• 这些方法能拦住你给出的两种常规JS操作，但如果对方用更底层的API（比如document.write或者直接改DOM内部结构），还是可能绕过去，但对付你提到的场景完全够用。
• 冻住style对象后，用h1.style.setProperty也改不了样式，彻底封死了JS改样式的路子。

内容的提问来源于stack exchange，提问作者Davi Areias