我们前面学习的语法都是 JS 基础的语法，我们这一章叫做 DOM 操作。是不是很厉害，说了一个你不会的术语。
什么是 DOM ，其实就是 Document Object Model 英文单词的缩写，翻译成中文意思就是 文档对象模型。
文档 Document ：文档其实就是我们写的那个网页。
对象 Object ：在 JS 世界中，把页面的中一个个的标签都变成一个个的对象，查找标签的过程就是找对象的过程。
模型 Model：意识借助实体虚拟表达目的的物件（百度百科查的，原本以为自己懂的，一查就不懂了，算了不管了）。
其实我们用通俗的语言解释就是，DOM 就是 JS 提供给我们用来操作网页标签的一系列功能，懂了吗。
说白了DOM 就相当于 JS 的一个小弟，这个小弟专门用来操作网页的，所以 DOM 操作也是 JS 的操作。
概念了解完了，那我们再看一下学完这章之后能实现的炫酷效果。
中间的图片在鼠标移入的时候居然能动起来了，WoW！！！
是不是很激动好想学，那我们开始吧。
首先我们需要先把之前的焦点图结构修改一下：
原本的 HTML 结构：
<div class="carousel">
<img src="images/carousel.jpg" alt="">
</div>
修改后的 HTML 结构：
<div class="carousel">
<ul class="carousel-image">
<!-- 焦点图的两张图片 -->
<li class="img01"><a href="#"><img src="images/carousel.jpg" alt=""></a></li>
<li class="img02"><a href="#"><img src="images/20161021170458_5809da3aaa0da.jpg" alt=""></a>
</li>
</ul>
<ol class="carousel-icon">
<!-- 焦点图的两个小图标 -->
<li class="icon01"></li>
<li class="icon02"></li>
</ol>
</div>
我们再把焦点图的 CSS 样式写一下：
.carousel {
position: relative;
width: 880px;
height: 200px;
overflow: hidden;
}
.carousel-image li {
position: absolute;
/* CSS 过渡 */
transition: all 0.4s;
}
.carousel-icon {
position: absolute;
right: 30px;
bottom: 10px;
}
.carousel-icon li {
width: 19px;
height: 17px;
margin: 0 5px;
float: left;
cursor: pointer;
/* CSS 过渡 */
transition: all 0.4s;
}
.carousel-icon .icon01 {
background: url(../images/newicon_20160225.png) no-repeat -67px -265px;
}
.carousel-icon .icon01:hover {
background: url(../images/newicon_20160225.png) no-repeat -68px -283px;
}
.carousel-icon .icon02 {
background: url(../images/newicon_20160225.png) no-repeat -44px -265px;
}
.carousel-icon .icon02:hover {
background: url(../images/newicon_20160225.png) no-repeat -44px -283px;
}
以上工作做完后，就可以看到下图的静态布局了，但是鼠标移入小图标的时候，大图片还是不能切换。
切换大图片的工作，就要有请我们的 JS 隆重登场啦。
首先们先理一下效果实现的思路：
- 在页面中查找到第一个叉叉形状的小图标对应的标签。
- 当鼠标移入第一个小图标的时候，找到第一张图片把它显示出来，找到第二张图片把它隐藏了。
- 在页面中继续查找到第二个三角形的小图标对应的标签。
- 当鼠标移入第二个小图标的时候，找到第二张图片把它显示出来，找到第一张图片把它隐藏了。
在梳理的思路中，我们发现有个步骤出现了好几次，就是要查找页面的标签，也就是找到页面中的小图标和大图片。
前面介绍过，在 JS 世界中，标签就是对象，找标签都叫做找对象。
那我们接下来学习 JS 的 DOM 操作中如何查找标签(对象)吧。
在文档中通过选择器查找标签。
document.querySelector('选择器')
如果要查找到小图标，第一个小图标身上有一个类名叫 icon01 ，所以我们要查找第一个小图标的时候可以用以下代码查找。
参考代码如下：
document.querySelector('.icon01')
注意别调到坑里了，选择器部分是 .icon01 注意不要漏掉了前面的小点 .
担心大家不懂，解释一下单词：
| 单词 | 中文翻译 | 音标 |
|---|---|---|
| document | 文档 | 英 /ˈdɒkjumənt/ |
| query | 查询，查找 | 英 /ˈkwɪəri/ |
| Selector | 选择器 | 英 /sɪˈlektə(r)/ |
此处是网友感激给的小心心。
找到对应第一个小图标后，我们通过 JS 代码给小图标添加一个鼠标移入后弹窗的效果。
如何添加一个当鼠标移到小图标上方时触发的事件呢？
参考代码升级为：
document.querySelector('.icon01').addEventListener('mouseover', function () {
alert('鼠标移入了小图标，这是一个弹窗，是不是很溜。');
});
又担心大家不会，再解释一下单词：
| 单词 | 中文翻译 | 音标 |
|---|---|---|
| add | 添加 | 英 /æd/ |
| Event | 事件 | 英 /ɪˈvent/ |
| Listener | 监听器 | 英 /ˈlɪsənə(r)/ |
| mouse | 鼠标 | 英 /maʊs/ |
| over | 从……上方 | 英 /ˈəʊvə(r)/ |
| function | 函数 | 英 /ˈfʌŋkʃn/ |
| alert | 弹窗 | 英 /əˈlɜːt/ |
我们再加点料，把鼠标移入弹窗的效果变成鼠标移入切换第一张图片。
那具体怎么实现的切换呢，我们现在再把思路理一下。
- 当鼠标移入第一个小图标的时候：
- 找到第一张大图片把它显示出来
- 找到第二张大图片把它隐藏了
参考代码修改为：
document.querySelector('.icon01').addEventListener('mouseover', function () {
document.querySelector('.img01').style.opacity = 1; // 第一张图不透明度变 1，显示出来
document.querySelector('.img02').style.opacity = 0; // 第二张图不透明度变 0，被隐藏了
});
又出现新单词，翻译继续一下
| 单词 | 中文翻译 | 音标 |
|---|---|---|
| style | 样式 | 英 /staɪl/ |
| opacity | 不透明度 | 英 /əʊˈpæsəti/ |
如果要移入第二个小图标的时候，能切换第二张图，参考代码如下：
// 这次是鼠标移入第二个小图标的效果
document.querySelector('.icon02').addEventListener('mouseover', function () {
document.querySelector('.img02').style.opacity = 1; // 第二张图不透明度变 1，显示出来
document.querySelector('.img01').style.opacity = 0; // 第一张图不透明度变 0，被隐藏了
});
到这篇文件为止，DOM 实现焦点图切换的效果就学到这里啦，同时记得文章还有配套的视频哦，到时候会一并在文章页上体现出来，如果各位小伙伴还有其他的需要，想学习其它的前端知识，可以留言，我们会为大家增加新的文章，祝愿各位小伙伴在前端的道路上一切顺利哦！！
