DOMで属性、クラス、およびスタイルを変更する方法

序章

このシリーズの前回のチュートリアル「DOMに変更を加える方法」では、ドキュメントオブジェクトモデル（DOM）から要素を作成、挿入、置換、および削除する方法について説明しました。）組み込みのメソッドを使用します。 DOMの操作能力を高めることで、JavaScriptのインタラクティブ機能をより有効に活用し、Web要素を変更できるようになります。

このチュートリアルでは、HTML要素ノードのスタイル、クラス、およびその他の属性を変更して、DOMをさらに変更する方法を学習します。これにより、DOM内の重要な要素を操作する方法をより深く理解できるようになります。

選択要素のレビュー

最近まで、 jQuery と呼ばれる人気のあるJavaScriptライブラリが、DOMの要素を選択および変更するために最も頻繁に使用されていました。 jQueryは、1つ以上の要素を選択し、それらすべてに同時に変更を適用するプロセスを簡素化しました。「DOMの要素にアクセスする方法」では、バニラJavaScriptでノードを取得して操作するためのDOMメソッドを確認しました。

確認すると、document.querySelector()とdocument.getElementById()は、単一の要素にアクセスするために使用されるメソッドです。以下の例でdivとid属性を使用すると、どちらの方法でもその要素にアクセスできます。

<div id="demo-id">Demo ID</div>

querySelector()メソッドは、任意のタイプのセレクターでページ上の要素を選択できるという点で、より堅牢です。

// Both methods will return a single element
const demoId = document.querySelector('#demo-id');

単一の要素にアクセスすることで、内部のテキストなどの要素の一部を簡単に更新できます。

// Change the text of one element
demoId.textContent = 'Demo ID text updated.';

ただし、特定のクラスなどの共通のセレクターで複数の要素にアクセスする場合は、リスト内のすべての要素をループする必要があります。以下のコードでは、共通のクラス値を持つ2つのdiv要素があります。

<div class="demo-class">Demo Class 1</div>
<div class="demo-class">Demo Class 2</div>

querySelectorAll()を使用して、demo-classが適用されているすべての要素を取得し、forEach()を使用してそれらをループし、変更を適用します。 querySelectorAll()を使用して、配列の場合と同じように、角かっこ表記を使用して特定の要素にアクセスすることもできます。

// Get a NodeList of all .demo elements
const demoClasses = document.querySelectorAll('.demo-class');

// Change the text of multiple elements with a loop
demoClasses.forEach(element => {
  element.textContent = 'All demo classes updated.';
});

// Access the first element in the NodeList
demoClasses[0];

これは、jQueryからバニラJavaScriptに進むときに注意すべき最も重要な違いの1つです。要素を変更する多くの例では、それらのメソッドとプロパティを複数の要素に適用するプロセスを説明していません。

この記事のプロパティとメソッドは、クリック、ホバー、またはその他のトリガーに応答するために、イベントリスナーにアタッチされることがよくあります。

注：メソッドgetElementsByClassName()およびgetElementsByTagName()は、querySelectorAll()が持つforEach()メソッドにアクセスできないHTMLコレクションを返します。このような場合、コレクションを反復処理するには、標準のforループを使用する必要があります。

属性の変更

属性は、HTML要素に関する追加情報を含む値です。これらは通常、名前/値のペアで提供され、要素によっては必須の場合があります。

最も一般的なHTML属性のいくつかは、imgタグのsrc属性、aタグのhref、class、 id、およびstyle。 HTML属性の完全なリストについては、MozillaDeveloperNetworkの属性リストを参照してください。 HTML標準の一部ではないカスタム要素には、data-が付加されます。

JavaScriptには、要素属性を変更するための4つのメソッドがあります。

方法	説明	例
`hasAttribute()`	`true`または`false`ブール値を返します	`element.hasAttribute('href');`
`getAttribute()`	指定された属性または`null`の値を返します	`element.getAttribute('href');`
`setAttribute()`	指定された属性の値を追加または更新します	`element.setAttribute('href', 'index.html');`
`removeAttribute()`	要素から属性を削除します	`element.removeAttribute('href');`

1つの属性を持つimgタグを使用して新しいHTMLファイルを作成しましょう。 URLを介して利用可能な公開画像にリンクしますが、オフラインで作業している場合は、別のローカル画像と交換できます。

attributes.html

<!DOCTYPE html>
<html lang="en">
<body>

    <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">

</body>

</html>

上記のHTMLファイルを最新のWebブラウザーにロードし、組み込みの Developer Console を開くと、次のように表示されます。

これで、すべての属性メソッドをその場でテストできます。

// Assign image element
const img = document.querySelector('img');

img.hasAttribute('src');                // returns true
img.getAttribute('src');                // returns "...shark.png"
img.removeAttribute('src');             // remove the src attribute and value

この時点で、src属性とimgに関連付けられた値は削除されますが、その属性をリセットして、img.setAttribute()を使用して値を代替イメージに割り当てることができます。

img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');

最後に、要素のプロパティとして属性に新しい値を割り当て、srcをshark.pngファイルに戻すことで、属性を直接変更できます。

img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';

上記の方法と同様に、この方法で任意の属性を編集できます。

hasAttribute()およびgetAttribute()メソッドは通常条件文で使用され、setAttribute()およびremoveAttribute()メソッドは直接変更するために使用されますDOM。

クラスの変更

class 属性は、CSSクラスセレクターに対応します。これは、特殊なタイプのJavaScript関数であるES6クラスと混同しないでください。

CSSクラスは、ページごとに1回しか存在できないIDとは異なり、複数の要素にスタイルを適用するために使用されます。 JavaScriptでは、クラス属性を操作するためのclassNameプロパティとclassListプロパティがあります。

メソッド/プロパティ	説明	例
`className`	クラス値を取得または設定します	`element.className;`
`classList.add()`	1つ以上のクラス値を追加します	`element.classList.add('active');`
`classList.toggle()`	クラスのオンとオフを切り替えます	`element.classList.toggle('active');`
`classList.contains()`	クラス値が存在するかどうかを確認します	`element.classList.contains('active');`
`classList.replace()`	既存のクラス値を新しいクラス値に置き換えます	`element.classList.replace('old', 'new');`
`classList.remove()`	クラス値を削除する	`element.classList.remove('active');`

2つの要素といくつかのクラスを含むクラスメソッドで動作する別のHTMLファイルを作成します。

classes.html

<!DOCTYPE html>
<html lang="en">

<style>
    body {
        max-width: 600px;
        margin: 0 auto;
        font-family: sans-serif;
    }
    .active {
        border: 2px solid blue;
    }

    .warning {
        border: 2px solid red;
    }

    .hidden {
        display: none;
    }

    div {
        border: 2px dashed lightgray;
        padding: 15px;
        margin: 5px;
    }
</style>

<body>

    <div>Div 1</div>
    <div class="active">Div 2</div>

</body>

</html>

classes.htmlファイルをWebブラウザーで開くと、次のようなレンダリングが表示されます。

classNameプロパティは、JavaScriptおよびDOMにアクセスできる他の言語で見られるclassキーワードとの競合を防ぐために導入されました。 classNameを使用して、クラスに直接値を割り当てることができます。

// Select the first div
const div = document.querySelector('div');

// Assign the warning class to the first div
div.className = 'warning';

classes.htmlのCSS値で定義されたwarningクラスを最初のdivに割り当てました。次の出力が表示されます。

要素にクラスがすでに存在する場合、これはそれらをオーバーライドすることに注意してください。 classNameプロパティを使用して複数のスペース区切りクラスを追加するか、代入演算子なしで使用して、要素のクラスの値を取得できます。

クラスを変更するもう1つの方法は、 classList プロパティを使用することです。これには、いくつかの便利なメソッドが付属しています。これらのメソッドは、jQuery addClass、removeClass、およびtoggleClassメソッドに似ています。

// Select the second div by class name
const activeDiv = document.querySelector('.active');

activeDiv.classList.add('hidden');                // Add the hidden class
activeDiv.classList.remove('hidden');             // Remove the hidden class
activeDiv.classList.toggle('hidden');             // Switch between hidden true and false
activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class

上記の方法を実行すると、Webページは次のようになります。

classNameの例とは異なり、classList.add()を使用すると、既存のクラスのリストに新しいクラスが追加されます。複数のクラスをコンマ区切りの文字列として追加することもできます。 setAttributeを使用して要素のクラスを変更することもできます。

スタイルの変更

style プロパティは、HTML要素のインラインスタイルを表します。多くの場合、この記事で前に行ったように、スタイルはスタイルシートを介して要素に適用されますが、インラインスタイルを直接追加または編集する必要がある場合もあります。

JavaScriptを使用した編集スタイルを示す短い例を作成します。以下は、正方形を表示するためにいくつかのインラインスタイルが適用されたdivを含む新しいHTMLファイルです。

styles.html

<!DOCTYPE html>
<html lang="en">

<body>

    <div style="height: 100px;
                width: 100px;
                border: 2px solid black;">Div</div>

</body>

</html>

Webブラウザで開くと、styles.htmlは次のようになります。

スタイルを編集する1つのオプションは、setAttribute()を使用することです。

// Select div
const div = document.querySelector('div');

// Apply style to div
div.setAttribute('style', 'text-align: center');

ただし、これにより、既存のすべてのインラインスタイルが要素から削除されます。これは意図した効果ではない可能性が高いため、style属性を直接使用することをお勧めします

div.style.height = '100px';
div.style.width = '100px';
div.style.border = '2px solid black';

CSSプロパティは、ダッシュで区切られた小文字の単語であるkebab-caseで記述されます。ケバブの場合のCSSプロパティはJavaScriptスタイルのプロパティでは使用できないことに注意してください。代わりに、最初の単語が小文字で、後続のすべての単語が大文字になっている、同等のキャメルケースに置き換えられます。つまり、text-alignの代わりに、JavaScriptスタイルプロパティにtextAlignを使用します。

// Make div into a circle and vertically center the text
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';

上記のスタイル変更を完了すると、styles.htmlの最終レンダリングに円が表示されます。

要素に多くのスタイルの変更を適用する場合、最善のアクションは、スタイルをクラスに適用し、新しいクラスを追加することです。ただし、インラインスタイル属性の変更が必要な場合や、より簡単な場合があります。

結論

HTML要素には、多くの場合、属性の形式で追加情報が割り当てられています。属性は名前と値のペアで構成されている場合があり、最も一般的な属性のいくつかはclassとstyleです。

このチュートリアルでは、プレーンJavaScriptを使用してDOMのHTML要素の属性にアクセス、変更、および削除する方法を学習しました。また、要素のCSSクラスを追加、削除、切り替え、および置換する方法と、インラインCSSスタイルを編集する方法についても学びました。詳細については、MozillaDeveloperNetworkの属性に関するドキュメントを確認してください。