課題【DOM操作】ーNo.01

課題内容

  • ＜概要＞
  • 　pタグで「テストの値です」という文字を設定しましょう。
  • 　このpタグの文字列をDOM操作として取得しましょう。
  • 　取得した値はコンソールに表示しましょう。
  • 　　

出力結果

コンソールには、

以下のように表示されます。

テストの値です

ポイント（DOM操作）

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

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

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

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

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

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

答え

HTML

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- DOM操作 -->
    <p>テストの値です</p>
  </body>
  <script type="text/javascript" src="sample.js"></script>
</html>

javaScript

// DOMを取得する
let sample = document.querySelector('p');

// 取得したDOMの値をコンソールに表示
console.log(sample.textContent);