What is the vanilla JS equivalent of jQuery's $(document)?

Question

I'm trying to figure out the vanilla equivalent of the following code:

$(document).attr('key', 'value'); 

So far I've looked into

• document - it's not an element so you cannot call setAttribute on it
• document.documentElement - returns the html tag. This is not the same "element" that jquery is targeting
• $(document)[0] seems to return a shadow element in Chrome Inspector
• $(document).attr('key', 'somethingUnique') doesn't exist in the Chrome Inspector

Is jQuery creating it's own shadow element mock of the document so it can treat it like a real element? What element is jQuery actually referencing when you do $(document)?

Answer 1

A jQuery results set is an array like object that in general holds DOMElement, but jQuery does not really care about what type the objects in the result set have. Neither the DOMElements nor any other element that is stored within the jQuery result set is somehow mocked/wrapped, they are directly stored in the result set. jQuery tries to figure out what it has to do to those objects by looking at their available functions.

When you call .attr, jQuery checks for each object in the set if it has the function getAttribute if this is the case it assumes that it also has a function setAttribute.

If it does not have a function getAttribute, then it will forward the function call to the .prop() function, and prop will internally just do:

elem[name] = value 

So if you pass a plain object to jQuery, then it will just set its property.

var a = {    }    $(a).attr('test', 'hello world');    console.dir(a) // for `a`  the property `test` is set

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you add a getAttribute and setAttribute function to that object then jQuery will call those:

var a = {    getAttribute() {      },    setAttribute() {      console.log('setAttribute was called')    }  }    $(a).attr('test', 'hello world');    console.dir(a);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

However, you should always assume, that the way and order how jQuery does these tests might change. Moreover, only rely on it if it is mentioned explicitly in the documentation.

Answer 2

I believe you're incorrect about $(document) not referring to document, thus, the answer is (quite simply):

document['key']  = 'value' 

E.g. In Chrome:

> $(document)[0] === document true  > $(document).attr('blarg', 'narf') n.fn.init [document, context: document]  > document.blarg "narf"  > document.foo = 'bar' "bar"  > document.foo "bar"