添加一个图像切换器

这里将用新的 DOM API 为网页添加另一张图片，并用 JavaScript 使图片在点击时进行切换。

1. 首先，找到另一张你想要在你的页面上展示的图片，且尺寸与第一张图片尽可能相同。
2. 将这张图片储存在你的images目录下。
3. 将图片重命名为'firefox2.png'（去掉引号）。
4. 打开 main.js 文件，输入下面的 JavaScript 代码 ( 请删除刚才的 "hello world" 脚本)：

   let myImage = document.querySelector('img');
   
   myImage.onclick = function() {
       let mySrc = myImage.getAttribute('src');
       if(mySrc === 'images/firefox-icon.png') {
         myImage.setAttribute('src', 'images/firefox2.png');
       } else {
         myImage.setAttribute('src', 'images/firefox-icon.png');
       }
   }

5. 保存所有文件并用浏览器打开 index.html 。点击图片可以发现它能够切换了！

这里首先把 <img> 元素的引用存放在 myImage 变量里。然后将这个变量的 onclick 事件与一个匿名函数绑定。每次点击图片时：

1. 获取这张图片的 src 属性值。
2. 用一个条件句来判断 src 的值是否等于原始图像的路径:
   1. 如果是，则将 src 的值改为第二张图片的路径，并在 <img> 内加载该图片。
   2. 如果不是（意味着它已经修改过）, 则把 src 的值重新设置为原始图片的路径，即原始状态。自定义导航