JavaScriptで特定の要素の属性の取得・書き換えに便利なsetAttribute()・getAttribute()・hasAttribute()メソッドの使い方

特定の要素の属性の取得・書き換えに便利な3つのメソッド

JavaScriptでHTML要素の属性を操作する際には下記の3つのメソッドを利用します。

メソッド

メソッド意味返り値
要素.setAttribute(属性名,値)要素の属性を設定なし
要素.getAttribute(属性名,値) 要素の属性を取得なし
要素.hasAttribute(属性名) 要素に属性があるか確認真偽値
特定の要素の属性の取得・書き換えをするメソッド

サンプルコード

ページを開いてから3秒後に画像を置き換えるサンプルコードを紹介します。

Output
Pug
#targetArea.text-center
		img(src="http://placehold.jp/150x150.png")
JavaScript
const targetArea = document.getElementById('targetArea');
const targetImg = document.querySelector('#targetArea img');

setTimeout(() => {
  const initialSrc = targetImg.getAttribute('src');
  const initialSrcinfo = document.createElement('div');
  initialSrcinfo.textContent = `オリジナル画像は${initialSrc}でした。`;
  targetArea.appendChild(initialSrcinfo);

  //画像の書き換え
  targetImg.setAttribute('src', 'http://placehold.jp/300x300.png');
}, 3000);
インストラクター
コメント

コメントを残す