如何禁止用户从DOM中手动删除HTML元素?

你不能。

浏览器属于用户,完全由用户控制。

如果你不想在他们接受条件之前给他们提供什么,那么 不要将内容发送到浏览器 直到他们有。

这是不可能的你可以让用户更难绕过它,但是你不能阻止他们从页面中删除它。

我见过网站使用很多不同的解决方案来增加浏览难度,从锁定页面滚动到完全删除弹出窗口后面的内容,但最终无法阻止用户修改DOM。

您需要添加控制服务器端。 您的用户可以控制他们接收的数据如果不想让他们访问数据,请不要发送数据。

只要不可能阻止用户删除某个元素,就可以检测到该元素的删除。

这个 MutationObserver API允许我们检测特定DOM元素的更改。

以下是示例 Jakub Jankiewicz

var in_dom = document.body.contains(element);
var observer = new MutationObserver(function(mutations) {
    if (document.body.contains(element)) {
        if (!in_dom) {
            console.log("element inserted");
        }
        in_dom = true;
    } else if (in_dom) {
        in_dom = false;
        console.log("element removed");
    }

});
observer.observe(document.body, {childList: true});

当元素被删除时,我们当然可以再次添加它,或者重定向到错误页,指示对该页的任何操作都是非法的。

尤其是删除元素很容易 this React extension . 如果我们使用React,那么我们可以将要防止被删除的元素包装在组件中:

import { WatchForRemoval } from 'react-mutation-observer';

...

<WatchForRemoval onRemoval={console.log.bind(null, 'Child removal triggered.')}>
  <div>
    Removing this element will trigger callback
  </div>
</WatchForRemoval>