課題【DOM操作】ーNo.02
課題内容
- ＜概要＞
- divタグで「テストの値です」という文字を設定しましょう。
- このdivタグのクラス名として「test」というクラス名をつけましょう。
- この「test」というクラス名の文字列をDOM操作として取得しましょう。
- 取得した値はコンソールに表示しましょう。
出力結果
コンソールには、
以下のように表示されます。
テストの値ですポイント（DOM操作）
DOMの操作方法に関しては、
- パターン１：対象のタグを指定する場合
- パターン２：対象のクラスを指定する場合
- パターン３：対象のIDを指定する場合
の３パターンがあります。
この３パターンのそれぞれの指定方法は、
以下の記事の一部を参考にしてください。
答え
HTML
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- DOM操作 -->
<div class="test">テストの値です</div>
</body>
<script type="text/javascript" src="sample.js"></script>
</html>javaScript
// DOMを取得する
let sample = document.querySelector('.test');
// 取得したDOMの値をコンソールに表示
console.log(sample.textContent);初心者向けピックアップ
