如何为任意元素的querySelector方法创建自定义简写

方案1：扩展Element原型（不推荐） #

如果需要实现element.shortHand(args)与element.querySelector(args)完全等价，可以直接在Element原型上挂载同名引用：

Element.prototype.shortHand = Element.prototype.querySelector

注意：该方案会污染全局DOM元素原型，可能与第三方库的同名属性、方法产生冲突，不符合前端开发最佳实践，仅做原理展示，不推荐在生产环境使用。

方案2：实现支持指定查询根的$、$$工具函数（推荐） #

该方案完全不污染全局原型，同时兼容原有全局查询的用法，也能满足指定根元素的查询需求，实现代码如下：

// 单元素选择器
const $ = (selector, root = document) => root.querySelector(selector)
// 多元素选择器
const $$ = (selector, root = document) => root.querySelectorAll(selector)

使用示例：

// 等价于 document.querySelector('a')
const globalLink = $('a')
// 等价于 element.querySelector('a')
const scopedLink = $('a', element)
// 等价于 element.querySelectorAll('.item')
const scopedItems = $$('.item', element)

内容的提问来源于stack exchange，提问作者klm123