前書き
この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
タグのhref
、class
、id
があります。 、およびstyle
。 HTML属性の完全なリストについては、Mozilla Developer Networkのattribute listを参照してください。 HTML標準の一部ではないカスタム要素には、data-
が付加されます。
JavaScriptには、要素の属性を変更するための4つのメソッドがあります。
方法 | 説明 | 例 |
---|---|---|
|
|
|
|
指定された属性または |
|
|
指定された属性の値を追加または更新します |
|
|
要素から属性を削除します |
|
1つの属性を持つimg
タグを使用して新しいHTMLファイルを作成しましょう。 URLを介して利用可能な公開画像にリンクしますが、オフラインで作業している場合は、別のローカル画像と交換できます。
attributes.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()
メソッドは通常conditional statementsで使用され、setAttribute()
およびremoveAttribute()
メソッドはDOMを直接変更するために使用されます。
クラスの変更
class属性はCSS class selectorsに対応します。 これは、特殊なタイプのJavaScript関数であるES6 classesと混同しないでください。
CSSクラスは、ページごとに1つしか存在できないIDとは異なり、スタイルを複数の要素に適用するために使用されます。 JavaScriptでは、クラス属性を操作するためのclassName
プロパティとclassList
プロパティがあります。
Method/Property | 説明 | 例 |
---|---|---|
|
クラス値を取得または設定します |
|
|
1つ以上のクラス値を追加します |
|
|
クラスのオンとオフを切り替えます |
|
|
クラス値が存在するかどうかを確認します |
|
|
既存のクラス値を新しいクラス値に置き換えます |
|
|
クラス値を削除する |
|
2つの要素といくつかのクラスを使用して、クラスメソッドで動作する別のHTMLファイルを作成します。
classes.html
Div 1
Div 2
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
Div
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プロパティはケバブケースで記述され、ダッシュで区切られた小文字の単語です。 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
の最終レンダリングに円が表示されます。
要素に多くのスタイルの変更を適用する場合、アクションの最善の方法は、スタイルをクラスに適用し、新しいクラスを追加することです。 ただし、インラインスタイル属性を変更する必要がある場合や、より簡単な場合があります。
結論
HTML要素には、多くの場合、属性の形式で追加情報が割り当てられています。 属性は名前と値のペアで構成されている場合があり、最も一般的な属性のいくつかはclass
とstyle
です。
このチュートリアルでは、プレーンJavaScriptを使用してDOMのHTML要素の属性にアクセス、変更、削除する方法を学びました。 また、要素のCSSクラスを追加、削除、切り替え、置換する方法、およびインラインCSSスタイルを編集する方法も学びました。 詳細については、Mozilla Developer Networkのattributesに関するドキュメントを確認してください。