【JavaScript】img要素がalt属性を持っていない場合に自動追加する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでimg要素がalt属性を持っていない場合に自動追加する方法をご紹介しています。

JavaScriptでimg要素のalt属性を自動で追加したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

img要素を取得する

ドキュメント内のimg要素を取得します。存在するタグを全て取得するため、idやclassではなくタグを指定して要素を取得します。

HTML

<img src="https://picsum.photos/id/1008/1920/1080">
<img src="https://picsum.photos/id/656/1280/720">
<img src="https://picsum.photos/id/646/1366/768">

JavaScript

const imgs = document.getElementsByTagName('img');

querySelecotAllの方が使いやすい場合は変更してください。

const imgs = document.querySelectorAll('img');

img要素がalt属性を持っているか判定する

ドキュメント内に存在する各img要素がalt属性を持っているかを判定します。属性の判定にはhasAttributeを使用します。hasAttributeは要素に指定した引数を持っていればtrueを、持っていない場合はfalseを返すElementのメソッドです。（HTMLは前項と同様のため省略します。）

JavaScript

//ドキュメント内のimg要素を取得
const imgs = document.getElementsByTagName('img');

Array.from(imgs).forEach(function(img){

    if(!img.hasAttribute('alt')){
        //alt属性がない場合の処理を追記
    }

});

img要素がalt属性を持っていない場合に自動追加する

hasAttributeでalt属性の有無を判定し、持っていなければalt属性を追加します。ここでは空のalt属性を追加します。属性の追加はsetAttributeで実現することができます。

JavaScript

//ドキュメント内のimg要素を取得
const imgs = document.getElementsByTagName('img');

Array.from(imgs).forEach(function(img){

    if(!img.hasAttribute('alt')){
        //空のalt属性を追加
        img.setAttribute('alt', '');
    }

});