Double dollar $$() vs Dollar sign $() in Chrome console behavior

Question

In our project, there is a different functionality when one Dollar sign used $() in Chrome console vs two Dollar signs $$(), besides the known difference that $$() return an array an $() return the first element.

For example, selector for specific element, with one dollar and two dollar queries:

$$(".my-class[my-attribute='trump']") //works

$('.my-class[my-attribute=sanders]') //works

$$('.my-class[my-attribute=trump]') //not work

What is the source and explanation for this behavior?

Answer 1

From Chrome Developer Tools documentation:

Selecting Elements

There are a few shortcuts for selecting elements. These save you valuable time when compared to typing out their standard counterparts.

$() Returns the first element that matches the specified CSS selector. It is a shortcut for document.querySelector().

$$() Returns an array of all the elements that match the specified CSS selector. This is an alias for document.querySelectorAll()

$x() Returns an array of elements that match the specified XPath.

When you use querySelector (or $), the result is an element or null. When you use $$, the result isn't an element but an Array which can be easily iterated over. This differs from the native querySelectorAll where it returns a NodeList which is slightly harder to go over all the entries.

Regarding the quote: of course it works the same. See:

Conclusion: It's useless to quote trump. You might also end insane.