mik*_*ana 47 javascript native-methods
我将运行document.querySelectorAll()很多,并且想要一个简写别名.
var queryAll = document.querySelectorAll
queryAll('body')
TypeError: Illegal invocation
不行.鉴于:
document.querySelectorAll('body')
仍然.如何使别名起作用？
Sun*_*oot 81
这似乎有效:
var queryAll = document.querySelectorAll.bind(document);
bind返回对querySelectorAll函数的引用,将querySelectorAll方法中的'this'的上下文更改为文档对象.
绑定功能仅在IE9 +(以及所有其他浏览器)中受支持 - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
更新:事实上,您可以创建一系列文档方法的快捷方式,如下所示:
var query = document.querySelector.bind(document);
var queryAll = document.querySelectorAll.bind(document);
var fromId = document.getElementById.bind(document);
var fromClass = document.getElementsByClassName.bind(document);
var fromTag = document.getElementsByTagName.bind(document);
小智 14
JavaScript解释器抛出错误,因为querySelectorAll()应该在文档上下文中调用.
当您尝试调用console.log()别名时,会抛出相同的错误.
所以你需要像这样包装它:
function x(selector) {
return document.querySelectorAll(selector);
}
alo*_*ica 11
一个常见的答案是使用$和$$for querySelector和querySelectorAll.这个别名模仿jQuery的一个.
例:
$ = 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>我的解决方案涵盖以下四个用例:
代码:
let doc=document,
qsa=(s,o=doc)=>o.querySelectorAll(s),
qs=(s,o=doc)=>o.querySelector(s);
在参数方面,选择器s是必需的,但容器元素对象o是可选的.
用法:
qs("div"):查询第一个div的整个文档,返回该元素qsa("div"):查询所有div的整个文档,返回所有这些元素的nodeListqs("div", myContainer):在第一个div的myContainer元素内查询,返回该元素qsa("div", myContainer):在所有div的myContainer元素内查询,返回所有这些元素的nodeList为了使代码稍微缩短(但效率不高),qs代码可以写成如下:
let qs=(s,o=doc)=>qsa(s,o)[0];
上面的代码使用ES6功能(let箭头功能和默认参数值).ES5等价物是:
var doc=document,
qsa=function(s,o){return(o||doc).querySelectorAll(s);},
qs=function(s,o){return(o||doc).querySelector(s);};
或相当于较短但效率较低的ES5版本qs:
var qs=function(s,o){return qsa(s,o)[0];};
下面是一个工作演示.为确保它适用于所有浏览器,它使用ES5版本,但如果您打算使用此想法,请记住ES6版本更短:
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>这可以工作,您需要使用call()或apply()使用适当的上下文来调用别名.
func.call(context, arg1, arg2, ...)
func.apply(context, [args])
var x = document.querySelectorAll;
x.call(document, 'body');
x.apply(document, ['body']);
我采用@David Muller的方法，并使用lambda对其进行了单行处理
let $ = (selector) => document.querySelector(selector);
let $all = (selector) => document.querySelectorAll(selector);
例：
$('body');
// <body>...</body>
| 归档时间： |
|
| 查看次数： |
10490 次 |
| 最近记录： |