javascript - 重写 HTML DOM 元素方法 JS

Question

简短的问题:

我如何覆盖 DOM 内置函数作为 document.getElementById () 或构建我的自己的 方法，在纯 JS 中？

---

解释:

我正在开发一个 API，它使用属性在我的 HTML 页面中定位 div。

我可以使用此方法获取 div 的属性:

for (var att, i = 0, atts = div.attributes, n = atts.length; i < n; i++) {
    att = atts[i];
    nodeName = att.nodeName; 
    nodeValue = att.nodeValue;
}

---

然后，我需要使用这段代码来检查给定 HTML 对象的属性。我构建了一个检查文档的 div 属性的方法:

document.getElementByIdentifier = function (identifier) {
    for (var i = 0; i < this.children.length; i++) {
         for (var att, i = 0, atts = div.attributes, n = atts.length; i < n; i++) {
            att = atts[i];
            nodeName = att.nodeName; 
            nodeValue = att.nodeValue;
            // Here I check the attributes
        }
    }
} 

但是，我无法从 HTML Dom object 调用此函数(此处的 document 对象除外)。我没有找到如何在上面的方法中用 allHTMLElements 之类的东西替换 document 。例如，目标是拥有与 document.getElementById 相同的使用自由度。

我该怎么做？

---

注意:我很惊讶，因为 document.getElementById 似乎位于 document 对象中。但是，当我尝试将自己的方法构建到该对象中时，它不起作用。 为什么？

---

其他注意事项:这是(至少对我而言)HTML DOM 对象:var A = document.getElementById ( “C”)；。这里的对象 A 是一个 HTML Dom 对象调用:当我尝试 console.log (typeof A); 时，谷歌浏览器调用“object”。

---

另外注意:

这是我的一个 div 的示例:

<script identifier="OAdgRzf"></script>

---

最后注意:

使用 document.querySelector 是我已经在我的图书馆中使用的方式。但是，我现在必须对用户调用的元素运行更新和测试。我构建了一个使用 document.querySelector 的函数，然后运行测试，但它不是很漂亮。

---

如果您有任何问题，请告诉我评论。

Answer 1

在评论中重复发生的事情；请，请，请，不要尝试破解核心功能。如果您想创建自定义方法以在您的代码中使用，您可以扩展 Object 对象...

Object.prototype.getEl = function( selector ){
	return document.querySelector( `[special-attribute="${selector
}"]` );
}
console.log( document.getEl('potatoSalad') );

<div special-attribute="potatoSalad">one two three</div>

通过这种方式，您可以更简洁地调用 document.getEl() 来定位您想要的元素，同时仍保留 JavaScript 中的原始方法。

有可能破解核心代码；但强烈建议不要尝试这样做。每个人在沿着这条路走下去时都会发现，它通常会导致代码中出现意想不到的错误——事情是相互联系的，但并没有立即知道。