DOMで属性、クラス、およびスタイルを変更する方法
序章
このシリーズの前回のチュートリアル「DOMに変更を加える方法」では、ドキュメントオブジェクトモデル(DOM)から要素を作成、挿入、置換、および削除する方法について説明しました。 )組み込みのメソッドを使用します。 DOMの操作能力を高めることで、JavaScriptのインタラクティブ機能をより有効に活用し、Web要素を変更できるようになります。
このチュートリアルでは、HTML要素ノードのスタイル、クラス、およびその他の属性を変更して、DOMをさらに変更する方法を学習します。 これにより、DOM内の重要な要素を操作する方法をより深く理解できるようになります。
選択要素のレビュー
最近まで、 jQuery と呼ばれる人気のあるJavaScriptライブラリが、DOMの要素を選択および変更するために最も頻繁に使用されていました。 jQueryは、1つ以上の要素を選択し、それらすべてに同時に変更を適用するプロセスを簡素化しました。 「DOMの要素にアクセスする方法」では、バニラJavaScriptでノードを取得して操作するためのDOMメソッドを確認しました。
レビューする、 document.querySelector()
と document.getElementById()
単一の要素にアクセスするために使用されるメソッドです。 を使って div
と id
以下の例の属性では、どちらの方法でもその要素にアクセスできます。 The querySelector()
メソッドは、任意のタイプのセレクターによってページ上の要素を選択できるという点で、より堅牢です。
HTMLを考えると:
<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];
注:メソッド getElementsByClassName()
と getElementsByTagName()
にアクセスできないHTMLコレクションを返します forEach()
その方法 querySelectorAll()
もっている。 このような場合、コレクションを反復処理するには、標準のforループを使用する必要があります。
これは、jQueryからバニラJavaScriptに進むときに注意すべき最も重要な違いの1つです。 これらのメソッドとプロパティを複数の要素に適用するプロセスに注意することが重要です。
このチュートリアルでは、要素の属性を変更するために使用されるプロパティとメソッドについて説明します。 これらのプロパティとメソッドは、クリック、ホバー、またはその他のトリガーに応答するために、イベントリスナーにアタッチされることがよくあります。
属性の変更
属性は、HTML要素に関する追加情報を含む値です。 これらは通常、名前/値のペアで提供され、要素によっては必須の場合があります。
最も一般的なHTML属性のいくつかは src
の属性 img
タグ、 href
の a
タグ、および class
, id
、 と style
属性。 HTML属性の完全なリストについては、MozillaDeveloperNetworkの属性リストを参照してください。 HTML標準の一部ではないカスタム要素には、先頭に追加されます data-
また aria-
.
JavaScriptには、要素属性を変更するための4つのメソッドがあります。
方法 | 説明 | 例 |
---|---|---|
hasAttribute() |
を返します true また false ブール値 |
element.hasAttribute('href'); |
getAttribute() |
指定された属性の値を返すか、 null |
element.getAttribute('href'); |
setAttribute() |
指定された属性の値を追加または更新します | element.setAttribute('href', 'index.html'); |
removeAttribute() |
要素から属性を削除します | element.removeAttribute('href'); |
を使用して新しいHTMLファイルを作成しましょう img
1つの属性を持つタグ。 URLを介して利用可能な公開画像にリンクしますが、オフラインで作業している場合は、別のローカル画像と交換できます。
<!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';
上記の方法と同様に、この方法で任意の属性を編集できます。
The 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ファイルを作成します。 さらに、インラインCSSスタイルシートを含めて、作業の結果を確認するのに役立ついくつかのスタイルを提供します。
<!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ブラウザに入れると、次のようなレンダリングが表示されます。
The className
プロパティは、との競合を防ぐために導入されました class
JavaScriptおよびDOMにアクセスできる他の言語で見つかったキーワード。 使用できます className
クラスに直接値を割り当てます。
// Select the first div
const div = document.querySelector('div');
// Assign the warning class to the first div
div.className = 'warning';
を割り当てることによって warning
のCSS値で定義されたクラス classes.html
最初に 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ページは次のようになります。
なぜなら activeDiv
要素にはまだクラスがあります hidden
適用すると、ページに表示されません。
とは異なり className
例、 classList.add()
既存のクラスのリストに新しいクラスを追加します。 複数のクラスをコンマ区切りの文字列として追加することもできます。 使用することも可能です setAttribute
要素のクラスを変更します。
スタイルの変更
style プロパティは、HTML要素のインラインスタイルを表します。 多くの場合、スタイルはこの記事で前に行ったようにスタイルシートを介して要素に適用されますが、インラインスタイルを直接追加または編集する必要がある場合もあります。
JavaScriptを使用した編集スタイルを示す新しいファイルを作成します。 以下の内容を使用してください div
正方形を表示するためにいくつかのインラインスタイルが適用されています。
<!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
使用する textAlign
JavaScriptスタイルプロパティの場合。
// 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の属性に関するドキュメントを確認してください。