Переопределить методы элемента HTML DOM JS

Question

Краткий вопрос:

Как я могу переопределить Встроенную функцию DOM как document.getElementById () или создать свою собственную метод , в чистый JS?

---

Пояснения:

Я работаю над API, который использует атрибуты, чтобы найти div на моей HTML-странице.

Я могу получить атрибуты 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 объекта).Я не нахожу, как заменить document на что-то вроде allHTMLElements в моем методе выше.Цель состоит в том, чтобы иметь такую ​​же свободу использования, как, например, document.getElementById.

Как мне это сделать?

---

Примечание: Я очень удивлен, потому что document.getElementById кажется расположен в объекте document.Однако, когда я пытаюсь встроить свой собственный метод в этот объект, он не работает. Почему?

---

Другое примечание : Это ( по крайней мере для меня) объект HTML DOM : var A = document.getElementById ("C");.Здесь объект A представляет собой объект HTML Dom, который вызывает: «object» от Google Chrome, когда я пытаюсь console.log (typeof A);.

---

В противном случае обратите внимание:

Это пример одного из моих дел:

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

---

Наконецnote :

Использование document.querySelector - это то, что я уже использую в своей библиотеке.Однако теперь мне нужно запускать обновления и тесты для элементов, которые вызываются пользователем.Я построил функцию, которая использует document.querySelector, а затем запускает тесты, но это не очень красиво.

---

Скажите мне комментарий, если у вас есть вопросы.

Answer 1

Этот атрибут не может быть найден встроенным методом (или, по крайней мере, я не знаю его)

Да, естьявляется встроенным методом для поиска специальных атрибутов, и этот метод называется querySelector или если вы хотите получить более одного объекта, существует querySelectorAll , который будет возвращать список (называемый NodeList) элементов документа, которые соответствуют указанной группе селекторов.

---

Предполагается, что у вас есть div с атрибутом someWeirdAttribute вот так:

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

Вы можете найти вышеуказанный элемент следующим образом:

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

---

Или, если вы хотите более практичный пример, давайте получим значение атрибута кака также содержимое div из вышеперечисленного в этом jsFiddle или в фрагменте кода ниже:

/* 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>

Answer 2

Чтобы повторить, что происходит в комментариях;пожалуйста, пожалуйста, ПОЖАЛУЙСТА , не пытайтесь взломать основные функции.Если вы хотите создать собственный метод для использования в своем коде, вы можете расширить объект 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.

Может быть возможно взломать основной код;но очень настоятельно рекомендуется не пытаться это сделать.Когда все обнаруживают, когда идут по этому пути, это обычно приводит к непредвиденным ошибкам в коде - там, где все связано, и это не было немедленно известно.