@Author：Runsen
@Date：2020/5/30
作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。
在之前的文章中，DOM（Document Object Model）是用來操作 XMl 和 HTML 文檔的應用程序接口，也是前端中的基礎中的基礎。
在使用一些高效的API，優先使用document.getElementById,而document.querySelector和document.querySelectorAll在性能上和getElementsBy*API相比較慢。
DOM練習
舉例：移動圖片，圖標的切換。效果如下圖所示。
佈局
大圖用背景填充，五張小圖用標籤<li>進行填充，因此 需要設置 padding-top和widt相同。
`
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
border: 1px solid #cccccc;
width: 360px;
height: 70px;
padding-top: 360px;
margin: 100px auto;
background: url("images/01big.jpg") no-repeat;
}
ul{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/04.jpg" alt=""></li>
<li><img src="images/05.jpg" alt=""></li>
</ul>
</div>
<script>
window.onload = function () {
// 1. 獲取需要的標籤
var box = document.getElementById("box");
var allLi = box.getElementsByTagName("li");
// 2. 監聽鼠標的進入
for(var i=0; i<allLi.length; i++){
var sLi = allLi[i];
sLi.index = i+1;
sLi.onmouseover = function () {
console.log(this.index);
box.style.background = 'url("images/0'+ this.index +'big.jpg") no-repeat';
}
}
}
</script>
</body>
</html>
素材下載；https://download.csdn.net/download/weixin_44510615/12477180