本文參考https://www.w3school.com.cn/js/js_htmldom_document.asp進行學習
1.js可以改變HTML的內容
<!DOCTYPE html>
<html>
<body>
<h1>第一天學習JavaScript</h1>
<h2><p id="demo">第一天學習什麼_id</p></h2>
<button type="button" οnclick="document.getElementById('demo').innerHTML = '學習 getElementById'">單擊</button>
</body>
</html>
2.js可以改變 HTML 屬性
<!DOCTYPE html>
<html>
<body>
<h1>第一天學習JavaScript</h1>
<button οnclick="document.getElementById('myImage').src='https://www.w3school.com.cn/i/eg_bulbon.gif'">開燈</button>
<img id="myImage" border="0" src="https://www.w3school.com.cn/i/eg_bulbon.gif" style="text-align:center;">
<button οnclick="document.getElementById('myImage').src='https://www.w3school.com.cn/i/eg_bulboff.gif'">關燈</button>
</body>
</html>
3.js能夠改變 HTML 樣式 (CSS)隱藏/顯示 HTML 元素
<!DOCTYPE html>
<html>
<body>
<h1>第一天學習JavaScript</h1>
<h2><p id="demo">第一天學習什麼_id</p></h2>
<p id="demo1">第一天學習什麼？</p>
<button type="button" οnclick="document.getElementById('demo').style.fontSize = '30px'">單擊demo</button>
<button type="button" οnclick="document.getElementById('demo1').style.display='none'">單擊demo隱藏 </button>
<button type="button" οnclick="document.getElementById('demo1').style.display='block'">單擊demo顯示 </button>
</body>
</html>