DOM要素を見つけるベストプラクティス

Question

ボタンが押されているときに要素を表示/非表示にしたい。私はこれを実装するように2つの方法があります。

1. をボタンに向けて、関連するDOMの位置に応じて要素を検索し、そのクラス名に応じて例えば$('.my-content')

2. の要素を検索し、例えば$('#my-button').parent().next().next().next()

しかし、上記のどれも私には思わない非常に信頼性の高い場合には、誰かがHTMLコードを変更するので、上記のアプローチは機能しないはずです。私は行方不明のより信頼できるものがありますか？

Answer 1

1. 特定の要素の場合は、Id値を指定して、それに を使用してください。
2. 要素のTYPEの場合は、クラス名を使用します。

これ以外には、実際の表記法はありません。ちょうどあなたのコードを読んでいる誰かが何が起こっているのかを理解しようとしてください。

Answer 2

jQueryを使用する方がずっと簡単です。このように -

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

一致する要素は、CSS表示プロパティを変更することで、アニメーションなしですぐに表示または非表示になります。要素が最初に表示されている場合、要素は非表示になります。隠されている場合は、それが表示されます。

リファレンス - jQuery Toggle

Answer 3

非常に良い練習はデカップル HTML、CSSやJSにあります。

DOMエレメントにjavascriptをバインドする場合は、javascriptセレクタを使用する必要があります。 基本的に、javascript目的（CSSスタイルではない）でのみ使用されるカスタムプレフィックス（js-など）を持つクラスです。DOMツリー構造やCSSクラス名が変更されるたび

だから、あなたはまだ作業JSセレクタ

HTML

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

JS

$('.js-toggle-element') 

CSS

持つことができます

.my-content{ ... } 

Javascriptのセレクタを使用しての

プラス、：あなたは簡単にそれがクラス

はあなたが簡単というdisapply /適用することができますJSでその要素に何が起こるかを知ることができます。

• がHTML可読性の高いを作ります単にあなたのHTMLに、すべての

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

でCSSに影響を与えることなく、そのクラスを追加/削除することにより、将来的に他の要素にも振る舞い、

Answer 4

DOM内のクラスや要素の位置が変更されている場合、あなたは は、内部テキスト

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