覆盖 HTML DOM 元素方法 JS

Question

简短的问题：

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

---

说明：

我正在开发一个 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 对象（除了这里的document对象）调用这个函数。 我在上面的方法中没有找到如何用allHTMLElements类的东西替换document 。 例如，目标是拥有与document.getElementById相同的使用自由。

我该怎么做？

---

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

---

其他注意事项：这是（至少对我而言）一个HTML DOM 对象： var A = document.getElementById ("C"); . 这里的对象 A 是一个 HTML Dom 对象调用："object" by google chrome 当我尝试console.log (typeof A); .

---

否则请注意：

这是我的一个 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 中的原始方法。

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

Answer 2

无法使用内置方法找到此属性（或者至少我不知道）

是的，有一种用于查找特殊属性的内置方法，该方法称为querySelector，或者如果您想检索多个对象，则querySelectorAll将返回与指定组匹配的文档元素的列表（称为 NodeList）选择器。

---

假设您有一个具有someWeirdAttribute属性的 div，如下所示：

<div someWeirdAttribute="someWeirdValue">
    Hello World
</div>

您可以像这样找到上述元素：

document.querySelector('[someWeirdAttribute="someWeirdValue"]');

---

或者，如果你想要一个更实际的例子，让我们在这个jsFiddle或下面的代码片段中从上面检索属性值以及 div 内容：

 /* JavaScript */ var div = document.querySelector('[someWeirdAttribute="someWeirdValue"]'); var output = document.getElementById('info'); var btn = document.querySelector('button'); btn.addEventListener('click', function(){ var attrVal = div.getAttribute('someWeirdAttribute'); var divContent = div.textContent; console.log(attrVal); output.innerHTML = ''; output.innerHTML += `<p>The div atrribute value of <strong>someWeirdAttribute</strong> is <strong>${attrVal}</strong></p> <p>The content inside the div is <strong>${divContent}</strong></p>` })

 <!-- HTML --> <div someWeirdAttribute="someWeirdValue"> Hello World </div> <hr> <button> Get info about above element </button> <div id="info"></div>