要素の属性値を取得・設定（getAttribute、setAttribute）

（Web API ＞ Element）

属性値を取得する（Element:getAttribute()メソッド）

Element: getAttribute() メソッド - Web API | MDN

element.getAttribute(qualifiedName)

Element オブジェクトの getAttribute メソッドは指定した属性名の属性値を取得する。
引数には取得したい属性名を DOMString オブジェクトで指定する。戻り値は引数に指定した属性名の属性値を DOMString オブジェクトで返す。指定した属性が見つからなかった場合は空文字か null が返される。
なおプロパティを使って属性値を取得する場合、 class 属性の値を取得するときはプロパティ名として className を指定していたが、 getAttribute メソッドを使う時は引数に ‘class’ のように属性名をそのまま指定する。他の属性名についても同じである。

let element = document.getElementById('shopinfo');
let attvalue = element.getAttribute('class');

属性値を設定する（Element:setAttribute()メソッド）

Element: setAttribute() メソッド - Web API | MDN

...

element.setAttribute(qualifiedName, value)

Element オブジェクトの setAttribute メソッドは指定した属性名の属性値に新しい値を設定する。
1 番目の引数に属性名、 2 番目の引数に属性値をそれぞれ DOMString オブジェクトで指定する。
属性名に対して値が設定されていた場合は新しい属性値が設定される。属性名に値が設定されていなかった場合は、新しく属性名に対して属性値が設定される。例えば class 属性の値に ‘box’ と設定する場合は次のように記述する。

let element = document.getElementById('shopinfo');
element.setAttribute('class', 'box');