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

前書き

このseriesの前のチュートリアルでは、「https://www.digitalocean.com/community/tutorials/how-to-make-changes-to-the-dom [DOMに変更を加える方法]、 」では、組み込みのメソッドを使用して、ドキュメントオブジェクトモデル(DOM)から要素を作成、挿入、置換、および削除する方法について説明しました。 DOMの操作に習熟することで、JavaScriptのインタラクティブ機能を活用し、Web要素を変更できるようになります。

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

要素の選択のレビュー

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

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

Demo ID

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要素があります。

Demo Class 1
Demo Class 2

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つです。 要素を変更する多くの例では、これらのメソッドとプロパティを複数の要素に適用するプロセスを説明しません。

この記事のプロパティとメソッドは、クリック、ホバー、またはその他のトリガーに応答するために、多くの場合event listenersにアタッチされます。

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

属性の変更

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

最も一般的なHTML属性には、imgタグのsrc属性、aタグのhrefclassidがあります。 、およびstyle。 HTML属性の完全なリストについては、Mozilla Developer Networkのattribute listを参照してください。 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





    



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

First rendering of classes.html

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

// 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');

Second rendering of classes.html

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

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

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

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

クラスの変更

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

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

Method/Property 説明

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








    
Div 1
Div 2

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

First rendering of classes.html

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に割り当てました。 次の出力が表示されます。

Second rendering of classes.html

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

クラスを変更するもう1つの方法は、classListプロパティを使用することです。これには、いくつかの便利なメソッドが付属しています。 これらのメソッドは、jQueryのaddClassremoveClass、および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ページは次のようになります。

Final rendering of classes.html

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

スタイルの変更

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

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

styles.html






    
Div

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

First rendering of 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プロパティはケバブケースで記述され、ダッシュで区切られた小文字の単語です。 JavaScriptスタイルプロパティでkebab-case CSSプロパティを使用できないことに注意することが重要です。 代わりに、最初の単語が小文字になり、後続のすべての単語が大文字になるキャメルケースに置き換えられます。 つまり、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の最終レンダリングに円が表示されます。

Final rendering of styles.html

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

結論

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

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