是否有任何解决方案可以删除对 Element.querySelector 和其他 dom 访问方法的访问？答案

【问题标题】：Are there any solutions for removing access to Element.querySelector and other dom accessing methods?是否有任何解决方案可以删除对 Element.querySelector 和其他 dom 访问方法的访问？
【发布时间】：2019-03-26 18:25:22
【问题描述】：

我正在寻找解决方案，以防止访问 fscoped javascript 代码的父元素之外的 dom。

是否有任何解决方案可以挂钩所有 dom 访问方法，例如我们可以挂钩控制台方法或根据范围更改文档根元素。

var document = element 应该很容易并防止访问全局元素，但文档是不可变的。

有什么解决办法吗？

【问题讨论】：

这可能是封闭影子根的用例吗？防止访问 DOM 中（某些）元素的方法已经存在。

标签： javascript dom

【解决方案1】：

一种方法是使用全局常量。

const DOM = document.getElementById('main');
...
DOM.getElementsByTagName('div');

您还可以覆盖文档对象上的所有方法（getElementById、getElementsByTagName）。在这种情况下，一定要调用 super:

class myDocument extends Document{
    getDocumentById(value) {
      console.log(`Searching for ${value} inside 'main'. `)
      // If you want to remove access to theese functions simply comment out following line
      super.getDocumentById('main').getDocumentById(value)}    
}

var array = new newArray

array.push('new Value')

用组件的 id 替换 'main'。

【讨论】：

但这如何禁用对文档的访问？
您使用在找到您的主 DOM 的其他函数上调用选择器函数的函数覆盖 Document 对象。我将使用示例编辑帖子
但是你不能覆盖 Document 对象，它是不可变的。每个人都可以访问 window.document 全局。