Question

简短问题：

如何以document.getElementById () 替代 DOM内置功能或以 pure构建我的自己方法 JS？

说明：

我正在使用一种API，该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宾语）。在上述方法中，我找不到如何将document替换为allHTMLElements之类的东西。目标是具有与document.getElementById相同的使用自由度。

我该怎么办？

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

其他说明 ：（至少对我来说是）一个 HTML DOM对象：var A = document.getElementById ("C");。在这里，对象A是一个HTML Dom对象，当我尝试console.log (typeof A);时，它由google chrome调用：“ 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中的原始方法。

可能会破解核心代码；但强烈建议您不要尝试此操作。当每个人都发现自己走这条路的时候，通常会在代码中导致意外错误-事物之间是连接在一起的，并且并没有立即被发现。

Answer 2

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

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

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

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

您可以找到上述元素，如下所示：

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

或者，如果您想要一个更实际的示例，请让我们在以上querySelectorAll或下面的代码片段中从上面检索属性值以及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>

覆盖HTML DOM元素方法JS

2 个答案: