JavaScript»web»querySelectorAll タグ別に取得して値を変更する

ファイル名: js-web/quest_03010.html

次の手順で実行してみましょう。

  1. 1. 下のソースコードを写す。
  2. 2. 実行ボタンを押す。

実行画面

TANAKA

SATOU

SUZUKI

ソースコード

<p>TANAKA</p>
<p>SATOU</p>
<p>SUZUKI</p>
<input type="button" value="実行" onclick="run()">
<script>
	function run() {
		const matches = document.querySelectorAll("p");
		const text_array = Array.prototype.slice.call(matches);
		text_array.forEach(function(text, i) {
			console.log(text.innerHTML);
			text_array[i].innerHTML = `<h1>${text.innerHTML}</h1>`;
		})
	}
</script>

解説

準備中