DOM
????當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）顶考。通過 HTML DOM酱床，可訪問 JavaScript HTML 文檔的所有元素。
事件
????HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應(yīng)独悴。比如當(dāng)用戶在 HTML 元素上點擊時。
HTML 事件的例子：
- 當(dāng)用戶點擊鼠標(biāo)時
- 當(dāng)網(wǎng)頁已加載時
- 當(dāng)圖像已加載時
- 當(dāng)鼠標(biāo)移動到元素上時
- 當(dāng)輸入字段被改變時
- 當(dāng)提交 HTML 表單時
- 當(dāng)用戶觸發(fā)按鍵時
獲取(綁定)HTML元素：
????通常锣尉，通過 JavaScript刻炒，您需要操作 HTML 元素。
為了做到這件事情自沧，您必須首先找到該元素坟奥。有三種方法來做這件事：
- 通過 id 找到 HTML 元素
- 通過標(biāo)簽名找到 HTML 元素
- 通過類名找到 HTML 元素
- 這里只是幾個常用的查詢方式，也可以通過CSS選擇器等進行查詢拇厢，更多內(nèi)容大家可以慢慢發(fā)掘
#通過標(biāo)簽名查找
document.getElementByTagName
#通過ID查找
document.getElementById
#通過class查找
document.getElementByTagName
函數(shù)綁定
????通過獲取到一個html節(jié)點后筏勒，通過一系列方式進行功能執(zhí)行，例如改變節(jié)點屬性或者文本內(nèi)容等等旺嬉，大多都是通過調(diào)用函數(shù)管行，一般有以下幾種方式
#直接綁定事件
div.onclick = fn
;
#通過指明函數(shù)
funtion fn() ={
...
}
onload事件
????一般我們會把頁面內(nèi)直接添加的js代碼放在頁面最后，以保證頁面加載完成后能夠獲取到script里面調(diào)用的元素節(jié)點邪媳，如果放在body之前捐顷，可能scrpt里面需要的一些節(jié)點還沒有加載完成，就會拋出not define的錯誤雨效，但是我們可以通過onload函數(shù)迅涮，onload 事件會在頁面或圖像加載完成后立即發(fā)生。
<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded"
}
</script>
</head>
<body onload="load()">
</body>
</html>
DOM節(jié)點操作
- 創(chuàng)建節(jié)點——document.createElement("p");
- 刪除節(jié)點——ElementNode.removeChild("p")
????更多節(jié)點操作還有訪問子節(jié)點(children)徽龟，訪問兄弟節(jié)點叮姑，上一個、下一個節(jié)電等等，就不做贅述传透，原理都是一樣的耘沼，只是調(diào)用的餓屬性方法不同，詳情可參考菜鳥或者W3C-School
<div id="div1">
<p id="p1">這是一個段落朱盐。</p>
<p id="p2">這是另一個段落群嗤。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
????到這里，js基礎(chǔ)差不多就了解的差不多了兵琳，之后我們就通過案例來熟悉一下簡單的js操作
- 圖標(biāo)切換
????鼠標(biāo)移動到下排的每一個圖片時窍箍，上排大圖樣例進行改變蜈七，圖片大家可以自定義，放在images里面即可
<!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. 獲取需要的標(biāo)簽
var box = document.getElementById("box");
var allLi = box.getElementsByTagName("li");
// 2. 監(jiān)聽鼠標(biāo)的進入
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>
- 二維碼的顯示與隱藏
????當(dāng)鼠標(biāo)移動到二維碼小圖時，會跳出大圖巨朦，并且小圖樣式進行改變盏触，移開大圖所在盒子時一切還原
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#e_coder{
width: 50px;
height: 50px;
background: url("images/e_coder_normal.png") no-repeat;
position: fixed;
top: 40%;
left: 0;
cursor: pointer;
}
#e_app{
position: absolute;
left: 50px;
top: -50px;
/*隱藏*/
display: none;
}
</style>
</head>
<body>
<div id="e_coder">
<div id="e_app">
<img src="images/e_coder.jpg" alt="公眾號" width="150">
</div>
</div>
<script>
window.onload = function () {
// 1.獲取相應(yīng)的標(biāo)簽
var e_coder = document.getElementById("e_coder");
var e_app = document.getElementById("e_app");
// 2.監(jiān)聽鼠標(biāo)進入
e_coder.onmouseover = function () {
// 2.1 改變背景圖片
this.style.background = 'url("images/e_coder_selected.png") no-repeat';
// 2.2 顯示二維碼
e_app.style.display = "block";
};
// 3. 監(jiān)聽鼠標(biāo)的離開
e_coder.onmouseout = function () {
// 3.1 改變背景圖片
this.style.background = 'url("images/e_coder_normal.png") no-repeat';
// 3.2 隱藏二維碼
e_app.style.display = "none";
}
}
</script>
</body>
</html>
