執行事件的步驟
1.獲取事件源
var div = document.querySelector('div');
2.註冊事件（綁定事件）
div.onclick
3.添加事件處理程序（採取函數賦值形式）
div.onclick = function (){
console.log('checked');
}
Javascript的DOM操作可以改變網頁內容、結構和樣式，可以利用DOM操作元素來改變元素裏面的內容、屬性等。
1.改變元素內容
element.innerText：從起始位置到終止位置的內容，但它去除html標籤，同時空格和換行也會去掉。
element.innerHTML：起始位置到終止位置的全部內容，包括html標籤，同時保留空格和換行。
innerText和innerHTML區別
innerText不識別html標籤，非標準，去除空格和換行
innerHTML識別html標籤，符合W3C標準，保留空格和換行的
var div = document.querySelector('div');
div.innerText = '<strong>今天是</strong>: 2020';
div.innerHTML = '<strong>今天是</strong>: 2020';
這兩個屬性可讀寫，可以獲取元素裏面的內容
2.常用元素的屬性操作
innerText、innerHTML改變元素內容
src、href
id、alt、title
<body>
<button id="wyx">魏雨璇</button>
<button id="wxy">王新宇</button><br>
<img src="images/wyx.jpg" alt="" title = "wyx">
<script>
//修改元素屬性src
//1.獲取元素
var wyx = document.getElementById('wyx');
var wxy = document.getElementById('wxy');
var img = document.querySelector('img');
//2.註冊事件 處理程序
wxy.onclick = function (){
img.src = 'images/wxy.jpg';
img.title = 'wxy'
}
wyx.onclick = function (){
img.src = 'images/wyx.jpg';
img.title = 'wyx';
}
</script>
</body>
3.表單元素的屬性操作
4.樣式屬性操作
關閉淘寶二維碼案例
<div class="box">
淘寶二維碼
<img src = "images/tao.png" alt="">
<i class="close-btn">x</i>
</div>
<script>
//1.獲取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
//2. 註冊事件程序處理
btn.onclick = function(){
box.style.display = 'none';
}
</script>
盒子只是隱藏，沒有刪掉