查找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')")