使用$而不是querySelector()
使用$而不是querySelector()
提问于 2020-08-25 19:54:51
我想自己实现一些东西，而不是编写something.querySelector()来编写$，我已经修复了一半的问题，当我想要生成document.querySelector()时，我现在可以使用$了
<div>
<button>hi</button>
</div>
let $ = (x) => {
return document.querySelector(x);
}
div = $("div");但是我现在要做的是从div内部选择按钮，所以现在我不能这样做：
div.$("button");我想这样做，我对原型有一点了解，但我不知道如何实现这个东西，如何实现？
编辑:我见过很多人说这是一个糟糕的实现，你能告诉我为什么吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2020-08-25 19:58:02
如果您不想搞乱原型，可以让$接受第二个参数，即要从中选择的父参数。
const $ = (x, parent = document) => {
return parent.querySelector(x);
}
const div = $("div");
const button = $('button', div);
console.log(button);<div>
<button>hi</button>
</div>
改变原型是不好的做法，但它是可行的：
const $ = (x, parent = document) => {
return parent.querySelector(x);
}
Element.prototype.$ = function(selector) {
return $(selector, this);
}
const div = $("div");
const button = div.$('button');
console.log(button);<div>
<button>hi</button>
</div>
Stack Overflow用户
发布于 2020-08-25 20:02:52
window.$ = HTMLElement.prototype.$ = function(selector) {
if (this === window) {
return document.querySelector(selector);
} else {
return this.querySelector(selector);
}
};
console.log($('div').$('button'));<div>
<button>hi</button>
</div>
你可以，我不知道我会不会，把这个方法放在窗口和HTMLElement原型上，以便像你所问的那样进行链接。
Stack Overflow用户
发布于 2020-08-25 20:00:05
不建议这样做，但您可以修改Element.prototype和Document.prototype。
Element.prototype.$ = Document.prototype.$ = function(x){
return this.querySelector(x);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63586197
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号