JavaScriptでHTML の操作

JavaScriptはHTMLの構造であるDOM(Documet Object Model)を操作する。JavaScriptはHTMLで表示されている内容を変更できる。

JavaScript表記方法②HTML、HEAD内に以下を表記

＜script src=”./javascript.js” ></script>

DOM構築後にJavaScriptを実行する方法JavaScriptでHTML を操作する場合には、DOMが生成された後動くようにする必要がある。

方法１
<script src=”./javascript.js” defer></script>

方法２
JavaScriptのファイル内に以下を記載する。
document.addEventListener(‘DOMContent.Loaded’, function(){
//ここに、HTML 要素を操作する処理を記載する。
})；

body の背景色をredに変更

//body要素を取得して、block変数に入れる
const block = document.querySelector(‘body’);
block.style.background =’red’;

id=”main”が設定されているdivタグのmargine-topを変更

const divMain = document.querySelector(‘div#main’);
divMain.style.margineTop = ‘5em’;

document.querySlectorの使用方法

document.cuerySelector(‘span#crrect-answer’).style.color=’red’;
document.cuerySelector(“div#crrect-answer”).style.diplay=’block’;