このブログ記事の目的は、Javascript でデータ属性を使用する際のいくつかの混乱を解消することです。 ソフトウェア工学の学生として、ブートキャンプの世界と現実の世界は密接に関連しているようで、しかし銀河系のように離れていることがあります。 ある講義で、クラスを変更したり、html に ID を直接追加したりしているときに、ある学生が、デザイン チームが問題を起こす可能性があるので、このようなものを変更するのは特に賢明ではない、と述べました。 そこで登場したのが、HTMLElement.dataset です。 データセット プロパティは、JS プログラマに要素のカスタム属性の読み取り/書き込み機能を提供します。 この利点は、HTML と同様に DOM でもアクセスできることです。

これの混乱する部分は、HTML データ属性とそれに対応する DOM dataset.property が同じ名前を共有しないことです。 以下は、MDN ウェブサイトを読んでいて分かったことです。

ほとんどの問題はここから来ています。 新米JSプログラマーとしては、イベントリスナーを追加しつつ、要素に属性を設定する際に特に便利だと思いました。 一言お願いします。 私はまだ学生で、これはベスト プラクティスではないかもしれませんが、少なくとも、既存の HTML を修正することはありませんでした。

この主題の命名規則を読み終えたら、次に、役に立つこと、値にアクセスして設定すること、そしていくつかの例に進みます。

値にアクセスすることにより、単に className や id で呼び出すのとは異なり、操作のオプションが増えると私は考えています。 これは強力です。なぜなら、設計チームがある日やってきて、「なんと、すべてのクラスの名前を変更しました」と言い出すかどうかを心配する必要がなくなるからです。 以下は構文の例です。

以下は Mozilla が示している例です。

そして私の同期の「仲間たち」のために。” これは本当に心に響くものがあります。 私たちのペアプログラミング Toyland では、Alex と私はこのように使用しました:

今 React を学んでいる友人と話して、このコードを読み進めているとわかってくることは、.innerText は IE のメソッドであり、.textContent を使用する必要がありますが、それは別の投稿で説明します。

新しい教材を学ぶのに多くの時間を費やしていると、重要な点が抜け落ちてしまうことがあります。 プロジェクト ウィークが始まれば、DOM を操作してきれいなコードを書くために、これらのカスタム ツールを活用することがより良くなると思います。 読んで楽しんでいただけると幸いです！

。