id、クラスを変更する
テスト
<div id="test" class="test-class">テスト</div>
const element = document.getElementById('test');
element.id = 'newId'; //idの変更
element.className = 'new-class'; //クラスの変更
element.classList.add('new-class2'); //クラスの追加
element.classList.remove('new-class'); //クラスの削除
element.classList.replace('new-class2', 'new-class3') //クラス名の書き換え
console.log('クラス名:',element.className);
上の例では取得した要素に対してidやクラス名の変更、削除などを行っています。
element.classNameとelement.classList.replaceの違いは要素が複数のクラスを持っているとき、
の書き方だとクラスがnew-classのみになるのに対して、
のようにするとnew-class2がnew-class3に代わるだけで他のクラスはそのまま保持される点です。
element.classNameとelement.classList.replaceの違いは要素が複数のクラスを持っているとき、
element.className = 'new-class';
の書き方だとクラスがnew-classのみになるのに対して、
element.classList.replace('new-class2', 'new-class3')
のようにするとnew-class2がnew-class3に代わるだけで他のクラスはそのまま保持される点です。