JavaScriptでHTMLタグ操作方法まとめ

【概要】JavaScriptでHTMLタグの操作方法についてまとめます。ここでまとめている内容は下記になります。・クラスの追加と削除・style操作・テキスト操作・複数要素へのstyle適用する場合【詳細】[前提]下記のように対象タグの情報をelm変数に格納している事とします。let elm document.getElementById('id01');[クラス操作]・クラスの追加elm.classList.add('w-100');実行例lt;h1 id"id01" class"w-100"例lt;/h1・クラス削除elm.classList.remove('w-100');実行例lt;h1 id"id01"例lt;/h1[style操作]・スタイルに代入する方法elm.style 'background-color: #FFF';・プロパティを指定して代入する方法例下記の例は文字色と横幅の指定を行っています。elm.style.color '#FFF';elm.style.width '100%';・style全削除elm.style '';・特定プロパティの削除elm.style.color '';[テキスト操作]・innerHTMLinnerHTMLでは内部にHTMLタグが入っている場合、そのまま代入すると削除してしまいます。その場合はreplaceメソッドで変更して代入する事をお勧めします。elm.innerHTML elm.innerHTML.replace('タイトル1', 'タイトル2');・innerTextelm.innerHTML 'タイトル3';[複数要素へのstyle適用する場合]document.getElementsByClassName等のメソッドで対象の要素群を取得し、for文で回して適応します。let elms document.getElementsByClassName('hoge');for (let elm of elms) {elm.style.color '#FFF';}