在前端开发中，DOM 选择器是必不可少的工具。然而，在选择器语法上，很多开发者并没有使用正确的方式，导致代码冗长、不易维护。为了解决这个问题，npm 包 semantic-dom-selectors 就应运而生。它提供了一组语义化的 DOM 选择器，让开发者能够更方便、更清晰地选择 DOM 元素，提高代码质量和可读性。
安装
npm 包 semantic-dom-selectors 采用了标准的 npm 安装方式。先打开终端，进入项目根目录，然后执行以下命令即可：
npm install semantic-dom-selectors --save
安装成功后，你就可以在项目中 import 引入，然后开始使用了。
import { $header, $nav, $section } from 'semantic-dom-selectors';
$header; // document.getElementsByTagName('header')[0]
$nav; // document.getElementsByTagName('nav')[0]
$section; // document.getElementsByTagName('section')[0]语义化的 DOM 选择器
semantic-dom-selectors 提供了一组语义化的 DOM 选择器，前缀 $ 表示是选择器。下面是一些常用的语义化选择器：
$header
选择文档中的 header 元素。
$main
选择文档中的 main 元素。
$nav
选择文档中的 nav 元素。
$aside
选择文档中的 aside 元素。
$section
选择文档中的 section 元素。
$article
选择文档中的 article 元素。
$figure
选择文档中的 figure 元素。
$figcaption
选择文档中的 figcaption 元素。
$footer
选择文档中的 footer 元素。
$h1, $h2, $h3, $h4, $h5, $h6
选择文档中特定标题级别的标题元素。比如，$h1 表示选择文档中的 h1 元素，$h2 表示选择文档中的 h2 元素，以此类推。
$p
选择文档中的 p 元素。
$a
选择文档中的 a 元素。
$img
选择文档中的 img 元素。
$button
选择文档中的 button 元素。
$input, $textarea
选择文档中的 input 和 textarea 元素。
$ul, $li
选择文档中的 ul 和 li 元素。
$ol
选择文档中的 ol 元素。
$table, $thead, $tbody, $tfoot, $tr, $th, $td
选择文档中的 table、thead、tbody、tfoot、tr、th 和 td 元素。
$form
选择文档中的 form 元素。
示例
下面是一个使用示例，我们尝试绑定一个点击事件，当点击 header 元素时，将 body 元素背景色设为红色。
-- -------------------- ---- -------
--------- -----
------
------
----------------------------- ------------
------- --------------
------ - ------- - ---- -------------------------
--------------------------------- -- -- -
----------------------------------- - ------
---
---------
-------
------
-----------------------
-----------------
---------
----------------
--------------
----------
-------------- -------------
-------
-------这样，我们就可以用语义化、简短的代码来选择 DOM 元素，提高代码的可读性和维护性。
总结
语义化的 DOM 选择器可以让我们用更简单、更清晰的代码来选择 DOM 元素，提高代码的可读性和维护性。npm 包 semantic-dom-selectors 就是一个很好的选择，它提供了一组语义化的 DOM 选择器，帮助开发者更方便和高效地选择 DOM 元素，减少代码冗余，提高代码的质量和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eee11b57a6cc516fbab6e0c