前書き

このhttps://www.digitalocean.com/community/tutorial_series/understanding-the-dom-document-object-model[series]の前のチュートリアルでは、「https://www.digitalocean.com/community/tutorials/方法の変更方法(DOMの変更方法)、組み込みメソッドを使用してDOM(Document Object Model)の要素を作成、挿入、置換、削除する方法を説明しました。 。 DOMの操作に習熟することで、JavaScriptのインタラクティブ機能を活用し、Web要素を変更できるようになります。

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

要素の選択のレビュー

最近まで、https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery [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`を使用すると、どちらの方法でもその要素にアクセスできます。

<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>

+ demo-class`が適用されたすべての要素を取得するには + querySelector()+ を使用し、ループして変更を適用するには + 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つです。 要素を変更する多くの例では、これらのメソッドとプロパティを複数の要素に適用するプロセスを説明しません。

この記事のプロパティとメソッドは、クリック、ホバーなどに応答するために、多くの場合https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener[event listeners]に添付されます。トリガー。

属性の変更

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

最も一般的なHTML属性には、 + img +`タグの `+ src +`属性、 `+ a +`タグの `+ href ++ class ++ id +、および `+ style `があります。 。 HTML属性の完全なリストについては、Mozilla Developer Networkでhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes [属性リスト]をご覧ください。 HTML標準の一部ではないカスタム要素には、「 data- +」が先頭に追加されます。

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

Method Description Example

hasAttribute()

Returns a true or false boolean

element.hasAttribute('href');

getAttribute()

Returns the value of a specified attribute or null

element.getAttribute('href');

setAttribute()

Adds or updates value of a specified attribute

element.setAttribute('href', 'index.html');

removeAttribute()

Removes an attribute from an element

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ブラウザーにロードし、組み込みのhttps://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console [開発者コンソール]を開くと、次のように表示されます。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/attributes-shark.png [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');

image:https://assets.digitalocean.com/articles/eng_javascript/dom/attributes-octopus.png [classes.htmlの2番目のレンダリング]

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

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

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

`+ hasAttribute()`および ` getAttribute()`メソッドは、通常https://www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-javascript[conditionalステートメント]、および ` setAttribute()`および ` removeAttribute()+`メソッドは、DOMを直接変更するために使用されます。

クラスの変更

class属性はhttps://developer.mozilla.org/en-US/docs/Web/CSS/に対応しますClass_selectors [CSSクラスセレクター]。 これは、特別なタイプのJavaScript関数であるhttps://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript[ES6クラス]と混同しないでください。

CSSクラスは、ページごとに1つしか存在できないIDとは異なり、スタイルを複数の要素に適用するために使用されます。 JavaScriptでは、https://developer.mozilla.org/en-US/docs/Web/API/Element/className [+ className +]およびhttps://developer.mozilla.org/en-US/があります。 docs / Web / API / Element / classList [+ classList +]プロパティを使用して、クラス属性を操作します。

Method/Property Description Example

className

Gets or sets class value

element.className;

classList.add()

Adds one or more class values

element.classList.add('active');

classList.toggle()

Toggles a class on or off

element.classList.toggle('active');

classList.contains()

Checks if class value exists

element.classList.contains('active');

classList.replace()

Replace an existing class value with a new class value

element.classList.replace('old', 'new');

classList.remove()

Remove a class value

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ブラウザーで開くと、次のようなレンダリングが表示されます。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/attributes-classes-1.png [classs.htmlの最初のレンダリング]

+ class Name`プロパティは、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 +`に割り当てました。 次の出力が表示されます。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/attributes-classes-2.png [classes.htmlの2番目のレンダリング]

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

クラスを変更するもう1つの方法は、https://developer.mozilla.org/en-US/docs/Web/API/Element/classList [+ 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ページは次のようになります。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/attributes-classes-3.png [classes.htmlの最終レンダリング]

`+ 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`は次のようになります。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/attributes-style-1.png [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 +`の最終レンダリングには円が表示されます。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/attributes-style-2.png [styles.htmlの最終レンダリング]

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

結論

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

このチュートリアルでは、プレーンJavaScriptを使用してDOMのHTML要素の属性にアクセス、変更、削除する方法を学びました。 また、要素のCSSクラスを追加、削除、切り替え、置換する方法、およびインラインCSSスタイルを編集する方法も学びました。 さらに読むには、Mozilla Developer Networkのhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes[attributes]にあるドキュメントをご覧ください。