課題内容
- ＜概要＞
- divタグで「初期の文字列」という文字を設定しましょう。
- このdivタグのIDに「change-id」をつけましょう。
- このdivタグの文字列を「クラス名」を指定して、
- DOM操作として取得しましょう。
- 取得した値はコンソールに表示しましょう。
- その後にこのdivタグの文字列として、
- 「書き換えた文字列です」
- と文字列を書き換えましょう。
- 文字列を書き換えた後に、もう１度、
- このdivタグの文字列をDOM操作として取得しましょう。
- 取得した値はコンソールに表示しましょう。
出力結果
コンソールには、
以下のように表示するようにしましょう。
------------------
文字列を取得
------------------
初期の文字列です
------------------
文字列を置換
------------------
値を書き換えます
値を書き換えました
------------------
文字列を取得
------------------
書き換えた文字列ですページの表示としては、
初期の表示として、
<div id="change-id">初期の文字列です</div>が設定されますが、
処理がすぐに動くので、
<div id="change-id">書き換えた文字列です</div>と文字列が変わっていれば、
うまく処理が動いています。
ポイント（DOM操作）
DOMの操作方法に関しては、
- パターン１：対象のタグを指定する場合
- パターン２：対象のクラスを指定する場合
- パターン３：対象のIDを指定する場合
の３パターンがあります。
この３パターンのそれぞれの指定方法は、
以下の記事の一部を参考にしてください。
答え
HTML
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- DOM操作 -->
<div id="change-id">初期の文字列です</div>
</body>
<script type="text/javascript" src="sample.js"></script>
</html>javaScript
// コンソールに表示
console.log('------------------');
console.log('文字列を取得');
console.log('------------------');
// DOMを取得する
let sample = document.querySelector('#change-id');
// 取得したDOMの値をコンソールに表示
console.log(sample.textContent);
// コンソールに表示
console.log('------------------');
console.log('文字列を置換');
console.log('------------------');
console.log('値を書き換えます');
// 取得したDOMの値を書き換え
sample.textContent = '書き換えた文字列です';
// コンソールに表示
console.log('値を書き換えました');
console.log('------------------');
console.log('文字列を取得');
console.log('------------------');
// 取得したDOMの値をコンソールに表示
console.log(sample.textContent);