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"

Answer 3

jQuery is just assigning the value to document directly.

$(document).attr('test', 'hello world');
console.log(document['test']); // prints "hello world"

Answer 4

I really thought jQuery would have wrapped DOM elements, since for some reason, I never write var x = $('#x') to reuse it later but recall $.

That´s why I wrote:

Yes it is wrapped

But after reading @t.niese answer here I tried

var x = $('#x')
var y = $('#y')

var ref = x[0]
x[0] = y[0] // hack jQuery Object reference to DOM element

setTimeout(() => x.html('1'), 1000) // actually writes in #y
setTimeout(() => x.html('2'), 2000) // actually writes in #y
setTimeout(() => { x.push(ref) }, 2500) // hack jQuery Object reference to DOM element
setTimeout(() => x.html('3'), 3000) // actually writes in both #x and #y

And understood I don't write var x = $('#x') not because it is a wrapped object, but exactly because it is not a wrapped object.

I thought the entry point of the API was $, but I may see the API like var api = $(), and the entry point as (el) => api.push(el) or (sel) => api.push(document.querySelector(sel))

I can $().push but I can not $().forEach nor shift nor unshift but yes delete an index, also

In the example

setTimeout(() => { x.map((item) => {console.log(item)}) }, 3500)

logs 0 and 1, not the elements. Tested using jQuery version 3.3.1