Hacker News Reader

Comment by bambax | Hacker News Reader

Instead of importing dsq you can do this

    const $ = document.querySelector.bind(document);
    const $$ = document.querySelectorAll.bind(document);

View on HN

That's pretty much what that include file does, but with "dqs" rather than "$". I'm not a fan of using the $ as it might confuse others that you're using JQuery.

Wouldn't that be a feature? ;-)

$ is what I would expect and prefer, because it’s what I’ve been using in my browser dev tools for over fifteen years (ah, Firebug; fond reminiscences). If your document doesn’t use the names, you’ll get implementations roughly equivalent to these:

  function $(selector, element = document) {
      return element.querySelector(selector);
  }

  function $$(selector, element = document) {
      return Array.from(element.querySelectorAll(selector));
  }

Reference on more magic available in the console (there’s a lot of good stuff):

• https://firefox-source-docs.mozilla.org/devtools-user/web_co... (I think “:help” is my new favourite: opens that URL, which is not particularly discoverable)

• https://developer.chrome.com/docs/devtools/console/utilities...

That's what I did before I put those lines (and some more) into dqs.js

That's a neat shortcut, I prefer vanilla JS too.

const $ = (query) => document.querySelector(query);

const $$ = (query) => document.querySelectorAll(query);

(How do I write monospace on HN?)

> How do I write monospace on HN?

Line that start with four spaces

    like this

  Looks like 2 spaces are sufficient. But I sympathize with 4-space indentation.

Indeed! I've always thought it was 4, because... Markdown, probably?

> (How do I write monospace on HN?)

Two-space indentation.

  Thank you

Is there a way to make this also work as a function? e.g. myTable.$$('tr').foreach()

    import {qsA} from './dqs.js';

    rows = qsA(myTable, 'tr');

Thanks but the point is being able to chain it:

myTable.qsA('tr')

TypeError: myTable.qsA is not a function

Well, since html elements already have a querySelectorAll function, you could just assign it to a new method "qsA":

    HTMLElement.prototype.qsA = HTMLElement.prototype.querySelectorAll;

Now myTable.qsA('tr') will work. You can try it right here on the HN page in the browser console:

    HTMLElement.prototype.qsA = HTMLElement.prototype.querySelectorAll; 
    document.querySelector('#hnmain').qsA('tr');

Why do you prefer chaining?

Perfect, thankyou!

I suppose habit plus I find it easier to grok in that order, targetelement->childelements->foreach.

You'll have to do this in addition to one of the previously discussed solutions if you want something like document.qsA since document isn't an HTMLElement.

Reply on news.ycombinator.com