課題【DOM操作】ーNo.08

課題内容

  • ＜概要＞
  • 　divタグで「対象の文字列」という文字を設定しましょう。
  • 　このdivタグには、idとして、「target-id」をつけましょう。
  • 　また、このdivタグには、
  • 　「target-blue」というクラスを設定して、
  • 　CSSファイルの中には、
  • 　背景を青色にするコードを書いておきましょう。
  • 　javaScriptでは、
  • 　idの「target-id」を指定してDOM操作を行い、
  • 　クラス「target-blue」を削除しましょう。
  • 　これで、背景色の青色がなくなるようにトライしましょう。
  • 　　

出力結果

コンソールには、

以下のように表示するようにしましょう。

------------------
文字列にクラスを追加
------------------
divタグからクラスを削除しました。

ページの表示としては、

初期の表示として、

<div id="target-id" class="target-blue">対象の文字列</div>

がHTMLとして準備しますが、

処理がすぐに動くので、

<div id="target-id">対象の文字列</div>

とクラス名が削除され、

実際の表示も背景色には、

何も設定されていないという状態になれば、

うまく処理が動いています。

ポイント（DOM操作）

DOMの操作方法に関しては、

  • パターン１：対象のタグを指定する場合
  • パターン２：対象のクラスを指定する場合
  • パターン３：対象のIDを指定する場合

の３パターンがあります。

この３パターンのそれぞれの指定方法は、

以下の記事の一部を参考にしてください。

【基礎を抑える_05】「DOM操作」

ポイント（DOM操作でのクラスの削除）

DOMの操作として、

クラス名を追加する方法については、

以下のページを参考にしてください。

【DOM操作】クラスを削除する

答え

HTML

<html>
  <head>
    <meta charset="UTF-8">
    <!-- CSSファイル -->
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    <!-- DOM操作 -->
    <p>対象の文字列</p>
  </body>
  <script type="text/javascript" src="sample.js"></script>
</html>

CSS

.target-blue {
  background: blue;
}

javaScript

// コンソールに表示
console.log('------------------');
console.log('文字列にクラスを削除');
console.log('------------------');

// DOMを取得する
let sample = document.querySelector('#target-id');

// 取得したDOMにクラスを削除
sample.classList.remove('target-blue');

// コンソールに表示
console.log('divタグからクラスを削除しました。');