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