In 'n' Out

取得した要素を実際に変更する

要素を取得できるようになると、次はその要素に対して何ができるのかが重要になります。
DOM操作では、取得した要素の文字内容を変えたり、HTMLを差し替えたり、見た目やクラスを切り替えることができます。
このページでは、要素の中身や表示を変更するための基本的な操作方法を、具体例とあわせて解説します。

文字の操作

要素が持つテキスト内容を取得・変更します。

構文

要素.textContent='文字列';

textContentは、要素内のテキストのみを扱います。
HTMLタグは解釈されず、そのまま文字として扱われます。

コード例

<ul>
    <li id="operate">1番目の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
    <li>4番目の要素</li>
    <li>5番目の要素</li>
</ul>

//domOperate1.js
const str = document.getElementById('operate');
str.textContent = '最初の要素';

動作例

1番目の要素が最初の要素に変わります。
HTMLとして解釈されないため、安全に文字を変更できます。
文章の差し替えや表示内容の更新に最もよく使われる方法です。

HTMLの操作

要素の中身をHTMLとして取得・変更します。

構文

要素.innerHTML='HTML文字列';

innerHTMLは、タグを含むHTML構造そのものを操作します。
指定した文字列はHTMLとして解釈され、要素として展開されます。

コード例

<ul id="liOperate">
    <li>1番目の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
    <li>4番目の要素</li>
    <li>5番目の要素</li>
</ul>

//domOperate2.js
const docObj = document.getElementById('liOperate')
let list = docObj.getElementsByTagName('li');

for(let i = 0; i < list.length; i++) {
   list[i].innerHTML = i + 1 + '個目の要素'; 
}

動作例

li要素の中身を、for文を使って何個目の要素という文字列に変更しています。
HTML構造を一度に書き換えられる反面、意図しないタグの混入に注意が必要です。
textContentと使い分けることが重要です。

入力値の操作

フォーム要素の入力値を取得・変更します。

構文

要素.value='値';

valueは、inputやtextareaなどのフォーム要素で使用されます。
ユーザーが入力した値や、初期値を操作できます。

コード例

<form action="" method="post">
    <label for="name">お名前</label>
    <input id="name" name="name" type="text">
</form>

//domOperate3.js
const input = document.getElementById('name');
input.value = 'サンプル';
alert(input.value);

動作例

idにnameのついたフォームの値をinput.valueに代入して、サンプルと文字が入力されます。
このようにvalueは表示されている文字列そのものではなく、入力値を扱います。
通常のテキスト要素では使用できず、フォーム専用のプロパティになります。
入力内容の確認や、初期値の設定などで効果を発揮します。

スタイルの操作

要素のスタイルを直接変更します。

構文

要素.style.プロパティ名='値';

CSSプロパティをJavaScriptから指定できます。
ハイフンを含むプロパティは、キャメルケースで記述します。

コード例

<p class="elementColor">1番目の要素</p>
<p class="elementColor">2番目の要素</p>
<p>3番目の要素</p>
<p class="elementColor">4番目の要素</p>
<p>5番目の要素</p>

//domOperate4.js
const fontColor = document.querySelectorAll('p.elementColor');
for (let i = 0; i < fontColor.length; i++) {
    fontColor[i].style.color = '#ff0000';
}

動作例

pタグにelementColorが付与されている要素をすべて取得し、要素数分の色を#ff0000に変えます。
複数のスタイルを切り替える場合は、クラス操作のほうが管理しやすくなります。
その場限りの見た目変更に向いています。

クラスの追加

指定したクラスを要素に追加します。

構文

要素.classList.add('クラス名');

既存のクラスを保持したまま、新しいクラスを追加できます。

コード例

<p class="elementAdd">1番目の要素</p>
<p class="elementAdd">2番目の要素</p>
<p>3番目の要素</p>
<p class="elementAdd">4番目の要素</p>
<p>5番目の要素</p>

//domOperate5.js
const classAdd = document.getElementsByClassName('elementAdd');

for (let i = 0; i < classAdd.length; i++) {
    classAdd[i].classList.add('classAdd');
    classAdd[i].style.backgroundColor = '#ff0000';
}

動作例

elementAddクラスが付与された要素を取得し、その要素すべてにclassAddというクラスを付与し、classAddで指定された背景色が適用されます。
このようにCSSと組み合わせることで、見た目や状態をまとめて切り替えられます。

クラスの削除

指定したクラスを要素から削除します。

構文

要素.classList.remove('クラス名');

不要になったクラスを明示的に取り除きます。

コード例

<p class="elementDelete">1番目の要素</p>
<p class="elementDelete">2番目の要素</p>
<p>3番目の要素</p>
<p class="elementDelete">4番目の要素</p>
<p>5番目の要素</p>

.elementDelete {
    font-weight: bold;
}

//domOperate6.js
const classRemove = document.getElementsByClassName('elementDelete');

for (let i = classRemove.length - 1; i >= 0; i--) {
    classRemove[i].classList.remove('elementDelete');
}

動作例

elementDeleteクラスが付与された要素を取得し、その要素すべてからelementDeleteクラスを削除します。
そのため、elementDeleteで設定されたスタイルもなくなります。
ただし、削除の際に気を付けなくてはならないのはfor文を逆に繰り返さなければなりません。
また、存在しないクラスを指定してもエラーにはなりません。

クラスの切り替え

クラスの有無を自動で切り替えます。

構文

要素.classList.toggle('クラス名');

クラスが存在すれば削除し、存在しなければ追加します。

コード例

<b class="elementToggle">1番目の要素</b>
<b class="elementToggle">2番目の要素</b>
<b>3番目の要素</b>
<b class="elementToggle">4番目の要素</b>
<b>5番目の要素</b>

b {
    display: block;
}

.elementToggle {
    font-weight: normal;
}

//domOperate7.js
const toggleB = document.getElementsByTagName('b');

for (let i = 0; i < toggleB.length; i++) {
    toggleB[i].classList.toggle('elementToggle');
}

動作例

bタグの要素を取得し、その要素すべてにelementToggleクラスを付与または削除します。
今回は変化が分かりやすいようにフォントの太さで確認していますが、実際には表示状態やON/OFF管理などで使われることが多いです。
状態のON・OFF切り替えに適しており、ボタン操作やイベント処理と相性が良い操作です。

属性の操作

これまで紹介してきたtextContentやvalue、classListなどは、それぞれ特定の要素や目的に対応したプロパティでした。
一方、HTMLの属性そのものを直接操作したい場合は、setAttributeやgetAttributeを使用します。

構文

要素.getAttibute('属性名');
要素.setAttibute('属性名', '値');

getAttributeはメソッドで、指定した属性の値を取得します。
HTML要素に設定されている属性名を指定すると、その属性に設定されている値を取得できます。
setAttributeもメソッドで、指定した属性の値を設定または変更します。
すでに存在する属性の場合は値が上書きされ、存在しない属性の場合は新しく属性が追加されます。
この2つを使用することで、idやclassだけでなく、srcやhref、data属性など、HTMLのさまざまな属性を操作できます。

コード例

<img id="sampleImg" src="../img/animal-01.png" alt="ネズミ">

//domOperate8.js
const img = document.getElementById('sampleImg');

img.getAttribute('src');
img.setAttribute('src','../img/animal-02.png');
img.getAttribute('alt');
img.setAttribute('alt', 'ウシ');
alert(img.getAttribute('alt'));

動作例

※このボタンは動作確認用です

実行 リセット

画像のidであるsampleImgを取得し、そのsrc属性とalt属性を変更しています。
alt属性はソースを見ないと確認ができないため、あえてalertで表示させました。
このコードでは、getAttributeで現在の属性値を取得する例も含めています。
また、このスクリプトは下のようにシンプルに書き換えられます。

//domOperate8.js
const img = document.getElementById('sampleImg');

img.setAttribute('src','../img/animal-02.png');
img.setAttribute('alt', 'ウシ');
alert(img.getAttribute('alt'));

同じ挙動なので動作例は省略しましたが、getAttributeは属性の値を取得するためのメソッドであり、値を変更することはできません。
そのため、変更したい属性が分かっている場合は、setAttributeだけで処理を書くことができます。
setAttributeは属性名と値をセットで指定して、属性の値を変更します。
このように属性を変更することで、表示内容を動的に切り替えることができます。

このように操作系を見てきましたが、classList.addやclassList.removeは、状態管理を意識せずに使うと意図しない表示になるため、使用する際には注意が必要です。