プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

課題【DOM操作】ーNo.01

課題内容

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

出力結果

コンソールには、

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

テストの値です

ポイント(DOM操作)

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

  • パターン1:対象のタグを指定する場合
  • パターン2:対象のクラスを指定する場合
  • パターン3:対象のIDを指定する場合

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

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

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

答え

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

初心者向けピックアップ

-->

人気記事(学ぶパンダ)