Bdtjtk

Short question:

How may I override DOM built-in function as document.getElementById () or build my own method, in pure JS?

Explanations:

I am working on an API which uses attributes to locate divs in my HTML page.

I can get the attributes of a div using this method:

for (var att, i = 0, atts = div.attributes, n = atts.length; i < n; i++) {

    att = atts[i];

    nodeName = att.nodeName; 

    nodeValue = att.nodeValue;

}

Then, I need to use this code to check the attributes of a given HTML object. I built a method which checks the document's div's attributes:

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

        }

    }

} 

However, I can not call this function from an HTML Dom object (except, here, the document object). I do not find how to replace document by something like allHTMLElements in my method above. The goal is to have the same freedom of usage as document.getElementById for example.

How may I do that?

Note: I am very surprised because the document.getElementById seems to be located into the document object. However, when I try to build my own method into this object, it does not work. Why?

Other note: This is (at least for me) an HTML DOM object:var A = document.getElementById ("C");. Here the object A is an HTML Dom object calls: "object" by google chrome when I try console.log (typeof A);.

Otherwise note:

This is an example of one of my divs:

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

Finally note:

Use document.querySelector is the way I am already using on my library. However, I now have to run updates and tests for elements which are called by the user. I built a function which uses document.querySelector and then runs tests but it is not very pretty.

Tell me a comment if you have some questions.

To repeat what's going on up in the comments; please, please, PLEASE, do not try and hack core functionality. If you would like to create a custom method to use in your code you can extend the Object 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>

This way you can have the more condensed call document.getEl() to target your desired elements while still preserving the original methods in JavaScript.

It may be possible to hack the core code; but it is very strongly recommended to not attempt this. As everyone discovers when they go down this path, it normally results in unexpected errors in the code -- where things are connected and it was not immediately known.

This attribute cannot be found with a built-in method (or at least I
do not know it)

Yes there is a built-in method for finding special attributes and that method is called querySelector or if you want to retrieve more than one object, there is querySelectorAll that will return a list (called NodeList) of the document's elements that match the specified group of selectors.

Assuming you have a div with the attribute someWeirdAttribute like this:

<div someWeirdAttribute="someWeirdValue">

    Hello World

</div>

You can find the above element like this:

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

Or if you want a more practical example, let us retrieve the attribute value as well as the div content from the above in this jsFiddle or in the code snippet below:

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