查找 DOM 元素的最佳实践

Question

我想在按下按钮时切换（隐藏/显示）一个元素。我有两种方法来实现这一点：

1. 根据类名查找元素，如$('.my-content')

2. 根据其在按钮的相关 DOM 位置查找元素，例如$('#my-button').parent().next().next().next()

但是，在我看来，以上都不是非常可靠，因为万一有人更改了 HTML 代码，上述方法应该不起作用。我还缺少什么更可靠的东西吗？

Answer 1

一个很好的做法是解耦 HTML、CSS和JS。

将 javascript 绑定到 DOM 元素时，您应该使用 javascript 选择器。 基本上带有一些自定义前缀的类（如js-），仅用于javascript目的（不是css样式）。

因此，无论何时更改 DOM 树结构或 CSS 类名，您仍然可以使用您的 JS 选择器

HTML

<div class="my-content js-toggle-element"></div>

JS

$('.js-toggle-element')

CSS

.my-content{ ... }

---

另外，使用 Javascript 选择器：

• 使 HTML 具有高度可读性：您可以轻松找出使用该 js 类的元素会发生什么

• 允许您在未来轻松地将该行为应用/取消应用到其他元素，只需在 HTML 中添加/删除该类，并且完全不影响 CSS

  <div class="my-content js-toggle-element"></div>
  ...
  <div class="another-content-to-toggle js-toggle-element"></div>
  

Answer 2

1. 如果它是特定元素，请为其提供一个 Id 值并使用它 找到它。
2. 如果是 TYPE 元素，请使用类名。

除此之外，没有真正的约定。只需尝试确保阅读您的代码的人了解正在发生的事情。

Answer 3

使用 jQuery 将是最简单的方法。像这样-

$( ".target" ).toggle();

通过更改 CSS 显示属性，匹配的元素将立即显示或隐藏，没有动画。如果元素最初被显示，它将被隐藏；如果隐藏，就会显示出来。

参考 - jQuery Toggle

Answer 4

如果 DOM 中元素的类或位置发生变化，那么您可以尝试 用内部文本选择它

$("button:contains('buttontextgoeshere')")