.hasAttribute()

JavaScriptの.hasAttribute()でalt属性のない画像にalt属性を追記

2022年8月19日 5分

alt属性は、アクセシビリティを考慮して画像が表示されない場合に代替テキストとして表示されたり、Googleの画像検索に登録する為に必要だったりと、重要な属性です。

この記事では、JavaScriptの .hasAttribute() とループを使って、alt属性を a タグに追記してしまう方法をご紹介します。

是非、最後までご覧ください。

.hasAttribute()
alt属性のない画像にalt属性を追記したサンプル
- JavaScriptでaltを追記する前のHTMLのソース
- JavaScriptでaltを追記した後のHTMLのソース
実装の手順と方法
ざっくりとしたコードの解説
- HTML
- JavaScript
さいごに

.hasAttribute()

JavaScriptの .hasAttribute() は、指定した要素が指定の属性を持つかどうかについての真偽値を返します。

var result = element.hasAttribute(attName);

上記のような構文で、attName では属性の名前を表す文字列を指定します。

この記事では、.hasAttribute() で属性の存在をチェックして if の条件分岐で処理内容を記述しています。

かかかず

そんなメソッドなので、この辺を理解した上でご覧ください。

alt属性のない画像にalt属性を追記したサンプル

早速サンプルです。

5つの画像が並んでいますが、上から2つ目はHTMLの時点でalt属性をしており、それ以外の4つの画像にはHTMLでalt属性を記述していません。このalt属性のない画像4つに、JavaScriptで alt属性を追記して表示させています。

JavaScriptでalt属性を追加しない画像にのみ placeHolder img[alt="placeholder"] CSSの属性セレクタで枠線と色味を変えるようにしています。

かかかず

ソースも書き変わっているので、chromeのデベロッパーツールで見てみてください。

JavaScriptでaltを追記する前のHTMLのソース

サンプルの実表示だけだと分かりづらい部分もあるので、JavaScriptでalt属性を追記前後のHTMLもあわせてご覧ください。

まずは、「JavaScriptでaltを追記する前のHTMLのソース」で、以下の通りです。

<div id="placeHolder">
  <img src="https://placehold.jp/800x400.png">
  <img src="https://placehold.jp/800x400.png" alt="placeholder">
  <img src="https://placehold.jp/800x400.png">
  <img src="https://placehold.jp/800x400.png">
  <img src="https://placehold.jp/800x400.png">
</div>

JavaScriptでaltを追記した後のHTMLのソース

次に「JavaScriptでaltを追記した後のHTMLのソース」です。

<div id="placeHolder">
  <img src="https://placehold.jp/800x400.png" alt="altがない場合の文字列">
  <img src="https://placehold.jp/800x400.png" alt="placeholder">
  <img src="https://placehold.jp/800x400.png" alt="altがない場合の文字列">
  <img src="https://placehold.jp/800x400.png" alt="altがない場合の文字列">
  <img src="https://placehold.jp/800x400.png" alt="altがない場合の文字列">
</div>

alt属性がなかった4つの画像に、alt属性が追加されその中に「altがない場合の文字列」と記述されていることが確認できると思います。

かかかず

こんなようにalt属性をJavaScriptで追記するのが、この記事のスニペットです。

実装の手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。

HTMLを記述

まずはじめに、HTMLを記述します。

コードを表示

<div id="placeHolder">
  <img src="https://placehold.jp/800x400.png">
  <img src="https://placehold.jp/800x400.png" alt="placeholder">
  <img src="https://placehold.jp/800x400.png">
  <img src="https://placehold.jp/800x400.png">
  <img src="https://placehold.jp/800x400.png">
</div>

JavaScriptを記述

次にJavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

window.addEventListener('DOMContentLoaded', () => {
  // imgタグをNodeListで取得
  const plsImgs = document.querySelectorAll('#placeHolder img');
  // altの文字列
  const imgAlt = 'altがない場合の文字列';
  // コンソール出力
  console.log(plsImgs)
// ループでaltを付与
for (i = 0; i < plsImgs.length; i++) {
  //条件分岐でaltがない場合に文字列を追記
    if(!plsImgs[i].hasAttribute('alt')){
        plsImgs[i].setAttribute('alt', imgAlt);
    }
}
});

かかかず

今回はCSSの記述はないので、HTMLとJavaScriptの2つと簡単な仕様です。

ざっくりとしたコードの解説

コードは、HTMLとjavaScriptの2種類です。この2つのコードについて、順に解説していきます。

HTML

HTMLは、前述で出てきた通り上から2つ目はHTMLの時点でalt属性をしており、それ以外の4つの画像にはHTMLでalt属性を記述していません。

<div id="placeHolder">
  <img src="https://placehold.jp/800x400.png">
  <img src="https://placehold.jp/800x400.png" alt="placeholder">
  <img src="https://placehold.jp/800x400.png">
  <img src="https://placehold.jp/800x400.png">
  <img src="https://placehold.jp/800x400.png">
</div>

div タグで img タグを括っていますが、親要素のi d名が「placeHolder」を ul タグに変えて、img タグを li タグで括ったりするのもアリです。

JavaScript

JavaScriptは、はじめに「DOMContentLoaded」の .addEventListener で、HTML 文書の読み込みと解析が完了したときに処理を開始させます。

window.addEventListener('DOMContentLoaded', () => {
  // imgタグをNodeListで取得
  const plsImgs = document.querySelectorAll('#placeHolder img');
  // altの文字列
  const imgAlt = 'altがない場合の文字列';
  // コンソール出力
  console.log(plsImgs)
// ループでaltを付与
for (i = 0; i < plsImgs.length; i++) {
  //条件分岐でaltがない場合に文字列を追記
    if(!plsImgs[i].hasAttribute('alt')){
        plsImgs[i].setAttribute('alt', imgAlt);
    }
}
});

詳細の処理内容はコメントアウトの通りですが、.querySelectorAll() で対象の要素をNodeListで取得して、alt の文字列を追記します。

その時 .hasAttribute() メソッドでaltの有無で条件分岐する if で処理を分け、alt属性がない場合に追記をさせています。