こんにちは、ユアサです。
今回は前回作成したギャラリーモーダルに工夫を加えるためのパーツについてまとめていきたいと思います
↓前回の記事はこちら
tech.arms-soft.co.jp
altを取得しよう
imgタグに指定されているalt属性はgetAttribute('alt')を使って取得することができます。例えばクラス名「image-content」が付与されたimgタグのaltを取得してコンソールで確認する場合は
const img = document.querySelector('.image-content')
const imgAlt = img.getAttribute('alt')
console.log(imgAlt)
と記述することで実装できます。これは簡単ですね。
モーダルのHTML記述をJS管理にする
前回の記事で記述していたコードでは正常に動作していましたが、モーダル非表示時でもHTMLにはコードが残ってしまっていました。
何かしらの操作をしない限り表示しない・見せない要素については極力そのコードがDOM上に表示されないようにするのが望ましいので、JSでHTML要素を生成して挿入できる仕様を目指していきます。
ここで使用するのがinsertAdjacentHTML()メソッドです。これは指定されたテキストをHTML・XMLとして解釈してDOMの指定された箇所に挿入する役割があります。
記述方法はinsertAdjacentHTML(挿入位置, 挿入するテキスト)となっていて、特に挿入位置は"beforebegin"（要素の前）、"afterbegin"（要素のすぐ内側、最初の子の前）、"beforeend"（要素のすぐ内側、最後の子の後）、"afterend"（要素の後）の4種類の中から選ぶことができます。
insertAdjacentHTML？innerHTMLでもいいんじゃないの？
これはmdnでの紹介でもある通り明確に棲み分けがされていて、innerHTML()は要素の置き換え（要素丸ごと更新）の際に使用するのに対して、insertAdjacentHTML()はHTMLを生成し特定の箇所に挿入する場合に使用します。
また生成・挿入する動作だけのinsertAdjacentHTML()とHTML要素丸々置き換えるinnerHTML()とでは前者の方が処理速度が速いとされているので、モーダルの表示・非表示程度のものであればinsertAdjacentHTML()が推奨されるでしょう。
まとめ
次回は本格的にコードの改修に入りますが、その前準備としてポイントとなるJSの記述についてまとめました。 実は既にコードを改修し始めていますが少々手こずっているので、次回の投稿までに間に合うといいなぁ・・・・とお祈りしながら試行錯誤していきます。
