JavaScript 选择元素有长字

在开发 Web 应用时，我们经常需要通过 JavaScript 选择某个元素或一组元素，然而有些情况下我们会遇到一些元素的 ID 或 CSS 类名非常长，这是会造成一些不方便，本文将介绍如何通过 JavaScript 更方便地选择这些元素。

使用 querySelector 和 querySelectorAll 方法

querySelector 方法可以通过 CSS 选择器选择一个元素，querySelectorAll 方法可以选择多个匹配的元素。这两个方法都可以接收任何 CSS 选择器作为参数，并且都可以用于任何 DOM 节点。

例如，我们有一个 ID 为 very-long-id-name-for-div 的元素，我们可以这样选择它：

const div = document.querySelector('#very-long-id-name-for-div');

同样地，如果我们有一个 CSS 类名为 very-long-class-name-for-div 的元素，我们可以这样选择它：

const divs = document.querySelectorAll('.very-long-class-name-for-div');

使用 HTML5 数据属性

在 HTML5 中，我们可以为元素添加自定义数据属性。这些属性的命名规则是以 data- 开头，后面跟任意名称。这些数据属性可以在 JavaScript 中很方便地选择。

例如，我们有一个 ID 为 div-with-data-attr 的元素，我们可以在 HTML 中添加一个名为 long-id 的数据属性：

<div id="div-with-data-attr" data-long-id></div>

然后我们可以在 JavaScript 中这样选择它：

const div = document.querySelector('[data-long-id]');

同样地，如果我们有一个 CSS 类名为 div-with-data-class 的元素，我们可以在 HTML 中添加一个名为 data-long-class 的数据属性：

<div class="div-with-data-class" data-long-class></div>

然后我们可以在 JavaScript 中这样选择它：

const divs = document.querySelectorAll('[data-long-class]');

使用 ES6 模板字符串

ES6 的模板字符串支持多行字符串，这使得我们可以将字符串分成多行，从而方便地处理长字。

例如，我们有一个 ID 为 very-long-id-name-for-div 的元素，我们可以这样选择它：

const div = document.querySelector(`
  #very-long-id-name-for-div
`);

同样地，如果我们有一个 CSS 类名为 very-long-class-name-for-div 的元素，我们可以这样选择它：

const divs = document.querySelectorAll(`
  .very-long-class-name-for-div
`);

结论

有时我们不能避免在 HTML 中使用一些非常长的 ID 或 CSS 类名。在选择这些元素时，我们可以使用 querySelector 和 querySelectorAll 方法、HTML5 数据属性和 ES6 模板字符串等方法，以使代码更具可读性和可维护性。