创建您自己的查询选择器简写 - Javascript

在Javascript中，我们可以使用query选择器来获取DOM元素。但是，有时候我们可能需要一些简写，以便更加快捷地选择元素。在本篇文章中，我们将学习如何创建自己的查询选择器简写。

第一步：创建一个函数

我们首先需要创建一个函数，这个函数将作为我们自定义的查询选择器的起点。

markdown:

/**
 * 自定义查询选择器
 * @param {string} selector 要查找的选择器
 * @param {HTMLElement} parent 父元素，默认为document
 */
function mySelector(selector, parent = document) {}

第二步：判断选择器类型

在上面的函数中，我们需要对传入的选择器进行类型判断。

对于id选择器，我们可以使用#来表示。

对于class选择器，我们可以使用.来表示。

对于标签选择器，直接使用标签名即可。

我们来简单地实现一下这个逻辑：

markdown:

function mySelector(selector, parent = document) {
  if (selector.includes('#')) {
    // id选择器
    const id = selector.split('#')[1]
    return document.getElementById(id)
  }
  if (selector.includes('.')) {
    // class选择器
    const className = selector.split('.')[1]
    return parent.getElementsByClassName(className)
  }
  // 标签选择器
  return parent.getElementsByTagName(selector)
}

第三步：简记操作

现在我们可以使用自定义的查询选择器来选择元素了。但是，如果每次都要输入一大堆代码，那还是有点麻烦的。

因此，我们需要把这个查询选择器封装到一个快捷操作中。对于常用的选择器，我们可以创建一些简写，以便更加快捷地选择元素。

例如：

• #id 表示通过id选择元素
• .class 表示通过class选择元素
• tag 表示通过标签名选择元素

我们可以这么做：

markdown:

// 创建一个快速选择器
const $ = (selector, parent = document) => mySelector(selector, parent)

// 简写操作
const id = (id) => `#${id}`
const cls = (className) => `.${className}`
const tag = (tagName) => `${tagName}`

// 使用
const header = $(id('header'))
const links = $(cls('link'))
const divs = $(tag('div'))

总结

通过上面的步骤，我们就可以创建自定义的查询选择器简写了。虽然这些简写可能微不足道，但是它们确实可以帮助我们更好地理解代码，提高开发效率。