今回の授業では、JavaScriptを用いてHTML要素の属性やスタイルを簡単に操作する方法を解説します。
DOM要素の属性とスタイル操作を習得することで、ウェブページの見た目や動作を自由自在にカスタマイズする能力が身につきます。
これらのスキルを身につけることで、ウェブ開発力が飛躍的に向上させられます。
DOM要素の属性
DOM要素の属性とは、HTMLタグの中にある、例えば id や class のようなものです。
HTML要素の中には、さまざまな属性があります。
例えば、id、class、src、alt、styleなどがその一部です。
これらの属性は、要素の特性を表現し、要素の振る舞いや見た目を制御するために使用されるものです。
DOM要素の属性を操作する方法
JavaScriptでDOM要素の属性を操作する方法は、以下の2つがあります。
- getAttribute: 属性の値を取得する
- setAttribute: 属性に新しい値を設定する
例えば、以下のようなHTMLがある場合を考えてみましょう。
<a id="sampleLink" href="https://example.com">サンプルリンク</a>このリンクの href 属性を取得したい場合、以下のように書きます。
// "sampleLink"というidを持つ要素を選択し、変数linkに代入
const link = document.getElementById("sampleLink");
// link要素のhref属性の値を取得し、変数hrefに代入
const href = link.getAttribute("href");
// hrefの値をコンソールに出力（"https://example.com"が出力される）
console.log(href); // "https://example.com" が出力されますそして、リンクの href 属性を変更したい場合は、以下のように書きます。
// link要素のhref属性に新しい値 "https://new.example.com" を設定
link.setAttribute("href", "https://new.example.com");link.setAttribute
link.setAttributeは、linkという変数に代入されたDOM要素の属性を設定するためのメソッドです。
setAttributeメソッドには2つの引数が必要で、
第1引数には設定する属性名（この例では”href”）を、
第2引数には設定する属性値（この例では”https://new.example.com”）を指定します。
// "sampleLink"というidを持つ要素を選択し、変数linkに代入
const link = document.getElementById("sampleLink");
// link要素のhref属性に新しい値 "https://new.example.com" を設定
link.setAttribute("href", "https://new.example.com");この例では、sampleLinkというidを持つ要素のhref属性を”https://new.example.com”に変更しています。
Attribute（アトリビュート）とは、属性を意味します。
DOM要素のスタイルを操作する方法
DOM要素のスタイルとは、要素の見た目や位置などを決定するCSSスタイルのことです。
JavaScriptでDOM要素のスタイルを操作するには、style プロパティを使用します。
例えば、次のようなHTMLがあるとします。
<p id="sampleText">これはサンプルの文章です。</p>この段落の文字色を赤に変更したい場合、以下のように書きます。
// "sampleText"というidを持つ要素を選択し、変数textに代入
const text = document.getElementById("sampleText");
// text要素の文字色を赤に変更
text.style.color = "red";text.style.color
text.style.colorは、textという変数に代入されたDOM要素のスタイル属性の中のcolorプロパティを操作しています。この例では、文字色を赤に変更しています。
// "sampleText"というidを持つ要素を選択し、変数textに代入
const text = document.getElementById("sampleText");
// text要素の文字色を赤に変更
text.style.color = "red";まとめ
今回の記事では、DOM要素の属性とスタイルの操作方法について学びました。
属性操作には、getAttributeとsetAttributeメソッドを使用し、例えば<a>タグのhref属性を取得・変更できます。
スタイル操作では、styleプロパティを用いて、要素のCSSスタイルを変更できます。
例として、段落の文字色を変更する方法を解説しました。
これらの操作方法を覚えることで、ウェブページの動的な操作が可能になり、よりインタラクティブなコンテンツを作成できます。
今後もJavaScriptを活用して、ウェブページのさまざまな要素を操作し、見た目や振る舞いをカスタマイズしていきましょう。