Rebuild jQuery native functions to HTMLElements in Javascript

Question

I want to reimplement the jQuery functions.

For example .attr().

I found some threads like this.

So I tried something like:

HTMLElement.prototype.attr = (pAttributeName, pAttributeValue) => {
  if(pAttributeValue){
    this.setAttribute(pAttributeName, pAttributeValue);
  } else {
      return this.getAttribute(pAttributeName);
  }
};

But it don't work. Do I have to init the Elements first, in a constructor?

What "didn't work" about it? Did you check the error console? — Mitya, Aug 06 '20 at 10:30
Does this answer your question? [Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable) — freedomn-m, Aug 06 '20 at 11:12

score 2 · Accepted Answer · answered Aug 06 '20 at 10:37

From the documentation:

An arrow function expression (also known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value

In your case, this was bound to window object.

Using regular function

HTMLElement.prototype.attr = function(pAttributeName, pAttributeValue) {
  if (pAttributeValue) {
    this.setAttribute(pAttributeName, pAttributeValue);
  } else {
    return this.getAttribute(pAttributeName);
  }
};

document.querySelector('h1').attr('id', 'head')

#head {
  color: red;
}

<h1>Heading</h1>

Thank you for your pretty cool answer! Really appreciate it! — ru4ert, Aug 06 '20 at 11:03

Rebuild jQuery native functions to HTMLElements in Javascript

1 Answers1