Making a short alias for document.querySelectorAll

I'm going to be running document.querySelectorAll() a whole lot, and would like a shorthand alias for it.

var queryAll = document.querySelectorAll

queryAll('body')
TypeError: Illegal invocation

Doesn't work. Whereas:

document.querySelectorAll('body')

Still does. How can I make the alias work?

标签： javascript native-methods

8条回答

Ridiculous、

2楼-- · 2019-01-21 03:38

I took @David Muller's approach and one-lined it using a lambda

let $ = (selector) => document.querySelector(selector);
let $all = (selector) => document.querySelectorAll(selector);

Example:

$('body');
// <body>...</body>

0人赞添加讨论(0) 举报

神经病院院长

3楼-- · 2019-01-21 03:39

My solution covers the four following use cases:

document.querySelector(...)
document.querySelectorAll(...)
element.querySelector(...)
element.querySelectorAll(...)

The code:

let doc=document,
    qsa=(s,o=doc)=>o.querySelectorAll(s),
    qs=(s,o=doc)=>o.querySelector(s);

In terms of parameters, the selector s is required, but the container element object o is optional.

Usage:

qs("div"): Queries the whole document for the first div, returns that element
qsa("div"): Queries the whole document for all divs, returns a nodeList of all those elements
qs("div", myContainer): Queries just within the myContainer element for the first div, returns that element
qsa("div", myContainer): Queries just within the myContainer element for all divs, returns a nodeList of all those elements

To make the code slightly shorter (but not quite as efficient), the qs code could be written as follows:

let qs=(s,o=doc)=>qsa(s,o)[0];

The code above uses ES6 features (let, arrow functions and default parameter values). An ES5 equivalent is:

var doc=document,
    qsa=function(s,o){return(o||doc).querySelectorAll(s);},
    qs=function(s,o){return(o||doc).querySelector(s);};

or the equivalent shorter but less efficient ES5 version of qs:

var qs=function(s,o){return qsa(s,o)[0];};

Below is a working demo. To ensure it works on all browsers, it uses the ES5 version, but if you're going to use this idea, remember that the ES6 version is shorter:

var doc = document;

var qs=function(s,o){return(o||doc).querySelector(s);},
    qsa=function(s,o){return(o||doc).querySelectorAll(s);}

var show=function(s){doc.body.appendChild(doc.createElement("p")).innerHTML=s;}

//           ____demo____       _____long equivalent______      __check return___      _expect__ 
//          |            |     |                          |    |                 |    |         |

let one   = qs("div");      /* doc.querySelector   ("#one") */ show(one  .id    ); // "one"
let oneN  = qs("div",one);  /* one.querySelector   ("div")  */ show(oneN .id    ); // "oneNested"
let many  = qsa("div");     /* doc.querySelectorAll("div")  */ show(many .length); // 3
let manyN = qsa("div",one); /* one.querySelectorAll("div")  */ show(manyN.length); // 2

<h3>Expecting "one", "oneNested", 3 and 2...</h3>
<div id="one">
  <div id="oneNested"></div>
  <div></div>
</div>

0人赞添加讨论(0) 举报

Root（大扎）

4楼-- · 2019-01-21 03:40

A common answer is to use $ and $$ for querySelector and querySelectorAll. This alias mimics jQuery's one.

Example:

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

$('div').style.color = 'blue'
$$('div').forEach(div => div.style.background = 'orange')

div {
  margin: 2px;
}

<div>
  test
</div>
<section>
  <div>
    hello
  </div>
  <div>
    foo
  </div>
</section>

0人赞添加讨论(0) 举报

走好不送

5楼-- · 2019-01-21 03:42

function x(expr)
{
    return document.querySelectorAll(expr);
}

0人赞添加讨论(0) 举报

Deceive 欺骗

6楼-- · 2019-01-21 03:44

The JavaScript interpreter throws an error because querySelectorAll() should be invoked in document context.

The same error is thrown when you are trying to call console.log() aliased.

So you need to wrap it like this:

 function x(selector) {
     return document.querySelectorAll(selector);
 }

0人赞添加讨论(0) 举报

Viruses.

7楼-- · 2019-01-21 03:44

Here is my take on it. If the selector has multiple matches, return like querySelectorAll. If ony one match is found return like querySelector.

function $(selector) {
  let all = document.querySelectorAll(selector);
  if(all.length == 1) return all[0];
  return all;
}

let one = $('#my-single-element');
let many = $('#multiple-elements li');

2019 update

Today I made a new take on the problem. In this version you can also use a base like this:

let base = document.querySelectorAll('ul');

$$('li'); // All li
$$('li', base); // All li within ul

Functions

function $(selector, base = null) {
  base = (base === null) ? document : base;
  return base.querySelector(selector);
}

function $$(selector, base = null) {
  base = (base === null) ? document : base;
  return base.querySelectorAll(selector);
}

0人赞添加讨论(0) 举报

1 2 下一页

Making a short alias for document.querySelectorAll

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间