目次
本章は前回の記事の続きであり、内容（※WebサイトのコンテンツとスタイリングのJavaScript操作（1））を理解していることを前提に進めます。前回の記事を最後まで読み終えてから学習を進めましょう。
属性の操作
DOMの操作はHTMLのテキストの書き換えだけではなく、既存の要素の属性を変更することで、テキストの色を変えたり、要素の表示や非表示を指定することができます。以下では属性の操作を行うメソッドの一部例を紹介いたします。
getAttribute()
概要：要素の指定された属性の値を返します。getAttribute()メソッドの引数には値を取得したい属性名を指定し、もし属性名が見つからない場合は空文字か、nullが返されます。
以下はgetAttribute()メソッドを使って、コンソールに属性値を出力する記述例と表示結果です。
■記述例（HTML）
<body>
<div id="apple">りんご</div>
<div id="orange" style="color:red;">みかん</div>
<div id="banana">バナナ</div>
<script>
let element = document.getElementById("orange");
console.log(element.getAttribute("style"));
</script>
</body>
上記では、id名が「orange」の要素に対して、getAttribute()メソッドを使用して「style」属性を取得すると、コンソールには属性値の「color:red」が出力されます。
setAttribute()
概要：指定された属性の値を要素に設定します。属性が既に存在する場合は値が更新され、そうでない場合は新しく属性名と属性値が追加されます。setAttribute()メソッドの指定方法では、第一引数には「属性名」、第二引数には「属性値」を記述します。
以下はid名に「orange」をもつ要素にhidden属性を追加する記述例と表示結果です。
■記述例（HTML）
<body>
<div id="apple">りんご</div>
<div id="orange" style="color:red;">みかん</div>
<div id="banana">バナナ</div>
<script>
let element = document.getElementById("orange");
element.setAttribute("hidden","");
</script>
</body>
上記では、id名「orange」が指定されている要素に対し、setAttribute()メソッドでhidden属性を指定しています。具体的に説明すると、setAttribute()メソッドの第一引数には属性名に「hidden」、第二引数に「””（空）」を指定しており、今回使用しているhidden属性は値が空の場合でも、属性名のみを記述した際と同じ動作が行われるため、「みかん」は非表示となります。
※hidden属性は、HTML要素をブラウザに表示させないためのものです。表示させたくないHTML要素にhiddenと記述するだけで、その要素は非表示となります。
removeAttribute()
概要：指定された名前の属性を要素から削除するメソッドで、引数には削除したい属性名を指定します。
以下はid名に「orange」をもつ要素のhidden属性を削除する記述例と表示結果です。
■記述例（HTML）
<body>
<div id="apple" >りんご</div>
<div id="orange" style="color:red;" hidden>みかん</div> <!-- hidden属性を指定 -->
<div id="banana">バナナ</div>
<script>
let element = document.getElementById("orange");
element.removeAttribute("hidden");
</script>
</body>
これまでは、hidden属性を利用して要素の表示の切り替えを行ってきましたが、DOMの操作では、CSSプロパティを変更して、見た目や表示の切り替えを行うこともできます。
以下はDOMの操作からCSSプロパティを変更して、要素を非表示にする1例と表示結果です。
■記述例（HTML）
<head>
<meta charset="UTF-8"/>
<title>JavaScriptによるHTMLの操作</title>
<!-- //CSSのdisplayプロパティをnoneに指定する -->
<style>
#orange {
display: none;
}
</style>
</head>
<body>
<div id="apple">りんご</div>
<div id="orange" style="color:red;">みかん</div>
<div id="banana">バナナ</div>
<!-- //以下のコメントを解除 -->
<!-- <script>
let element = document.getElementById("orange");
element.style.display = "block"; //CSSのdisplayプロパティをblockに変更する
</script> -->
</body>
上記例では、CSSのdisplayプロパティを使用して要素の表示切替を実施しています。記述例をコピーしてブラウザで表示した場合、左の画像のように「りんご」「バナナ」のみ表示がされているかと思います。では次に、上記コードの<script></script>箇所のコメントアウトを外してみてください。右画像のように「みかん」が表示されるようになるかと思います。
今回の例ではただ要素の表示を切り替えるだけでしたが、CSSプロパティで要素を非表示にした場合は、選択するプロパティの種類によって表示のされ方や挙動が異なる為、ただ要素を非表示にするだけでも場面や用途に応じたプロパティを選択することができます。
本試験では、上記例のようなCSSを変更して要素の表示切替をするプロパティは出題されないかなと思いますが、これらはWebサイト制作において表示設定を簡単に変更できるため非常に便利です。気になる方は他にも様々なプロパティが用意されていますので、是非調べてみて下さいね！
クラスの操作
前項ではJavaScriptを用いてCSSプロパティの変更を行いましたが、変更したい対象の要素が多くある場合、それら全てをJavaScriptで指定し変更することは大変な作業です。このような場合、クラス毎にCSSを作成し、作成したクラス名要素に追加したり削除することで、効率的にスタイルを変更できるようになります。このようなクラスの操作には「classList」プロパティを指定します。
classList
概要：特定の要素のクラス属性のリストを取得します。返されるリスト自体は読み取り専用ですが、classListプロパティの後ろに各メソッドを定義することで、クラスの追加や削除を行うことができます。
以下では、classListプロパティから利用できるメソッドの一部例を紹介します。
add()
概要：指定したクラス名を追加することができます。引数には指定するクラス名をシングルクォーテーション（またはダブルクォーテーション）で囲んで指定します。
以下はadd()メソッドを使って、「背景色を青」のスタイルが設定されているクラス名を付与する記述例と表示結果です。
■記述例（HTML）
<head>
<meta charset="UTF-8"/>
<title>JavaScriptによるHTMLの操作</title>
<style>
.c-red {
color: red;
}
.bg-blue {
background-color:blue;
}
</style>
</head>
<body>
<div class="c-red">add()メソッド</div>
<script>
let element = document.querySelector(".c-red");
element.classList.add("bg-blue"); //クラス名を追加する
</script>
</body>
remove()
概要：指定したクラス名を削除することができます。クラス名の指定では、add()メソッドと同様に、シングルクォーテーション（またはダブルクォーテーション）で囲んでクラス名を指定します。
以下はremove()メソッドを使って、クラス名を削除する記述例と表示結果です。
■記述例（HTML）
<body>
<div class="c-red bg-blue">remove()メソッド</div>
<script>
let element = document.querySelector(".c-red");
element.classList.remove("bg-blue"); //クラス名を削除する
</script>
</body>
toggle()
概要：指定したクラス名が存在する場合は削除し、クラス名が存在しない場合は追加します。
以下はtoggle()メソッドを使って、特定のクラス名を付け外しを行う記述例と表示結果です。
■記述例（HTML）※bg-blueが無い場合
<body>
<div class="c-red">toggle()メソッド</div>
<script>
let element = document.querySelector(".c-red");
element.classList.toggle("bg-blue"); //bg-blueが追加される
</script>
</body>
■記述例（HTML）※bg-blueがある場合
<body>
<div class="c-red bg-blue">toggle()メソッド</div>
<script>
let element = document.querySelector(".c-red");
element.classList.toggle("bg-blue"); //bg-blueが削除される
</script>
</body>
イベントハンドラー
これまでに説明したDOMの操作例はすべて、ページの読み込み時に実行されるものでしたが、マウスの操作やクリックなどのユーザーの行動（イベント）に応じてDOMを操作することも可能です。このようなイベントに反応して特定の操作を行うには、「イベントハンドラー」という機能を使用します。
イベントハンドラーとは、特定のHTML要素でイベントが発生すると自動的に実行されるJavaScript関数のことで、イベントハンドラーを指定するには、HTMLのイベント属性を使用します。以下は代表的なイベント属性の種類を紹介します。
onclick
概要：要素をクリックしたときに発生させたい処理を設定します。onclick属性とJavaScriptを一緒に使用することで、より複雑な処理を設定することができます。
以下はボタンをクリックする度に、ボタンの背景色が交互に変わるように設定した記述例と表示結果です。
■記述例（HTML）
<head>
<meta charset="UTF-8"/>
<title>JavaScriptによるHTMLの操作</title>
<style>
button {
background-color: blue;
color: white;
}
.switch {
background-color: red;
color: white;
}
</style>
</head>
<body>
<button onclick="document.getElementsByTagName('button')[0].classList.toggle('switch')">
onclick
</button>
</body>
onmouseover
概要：要素の上にマウスカーソルが重なったときに発生させたい処理を設定します。
以下は要素にマウスカーソルが重なった時にswtichクラスが追加され、要素の背景色が「赤色」になる記述例と表示結果です。
■記述例（HTML）
<body>
<div onmouseover="document.getElementsByTagName('div')[0].classList.add('switch')">
onmouseover
</div>
</body>
onmouseout
概要：要素からマウスカーソルが離れたときに発生させる処理を設定します。
以下は要素からマウスカーソルが離れた時にswitchクラスを削除する記述例と表示結果です。
■記述例（HTML）
<body>
<div class="switch" onmouseout="document.getElementsByTagName('div')[0].classList.remove('switch')">
onmouseout
</div>
</body>
本記事では、DOM操作に関する様々なメソッドやプロパティ、イベントハンドラーについて紹介しました。これまでの学習で、HTML、CSS、JavaScriptを使って動的なWebサイトを実装するスキルが身についている筈なので、是非ご自身で作成することをおススメします！
それでは、今回はここまで〜。
