課題【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);