DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。比如当用户在 HTML 元素上点击时。
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
获取(绑定)HTML元素：
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
- 这里只是几个常用的查询方式，也可以通过CSS选择器等进行查询，更多内容大家可以慢慢发掘
#通过标签名查找
document.getElementByTagName
#通过ID查找
document.getElementById
#通过class查找
document.getElementByTagName
函数绑定
通过获取到一个html节点后，通过一系列方式进行功能执行，例如改变节点属性或者文本内容等等，大多都是通过调用函数，一般有以下几种方式
#直接绑定事件
div.onclick = fn
;
#通过指明函数
funtion fn() ={
...
}
onload事件
一般我们会把页面内直接添加的js代码放在页面最后，以保证页面加载完成后能够获取到script里面调用的元素节点，如果放在body之前，可能scrpt里面需要的一些节点还没有加载完成，就会抛出not define的错误，但是我们可以通过onload函数，onload 事件会在页面或图像加载完成后立即发生。
<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded"
}
</script>
</head>
<body onload="load()">
</body>
</html>
DOM节点操作
- 创建节点——document.createElement("p");
- 删除节点——ElementNode.removeChild("p")
更多节点操作还有访问子节点(children)，访问兄弟节点，上一个、下一个节电等等，就不做赘述，原理都是一样的，只是调用的饿属性方法不同，详情可参考菜鸟或者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基础差不多就了解的差不多了，之后我们就通过案例来熟悉一下简单的js操作
- 图标切换
鼠标移动到下排的每一个图片时，上排大图样例进行改变，图片大家可以自定义，放在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. 获取需要的标签
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>
- 二维码的显示与隐藏
当鼠标移动到二维码小图时，会跳出大图，并且小图样式进行改变，移开大图所在盒子时一切还原
<!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.获取相应的标签
var e_coder = document.getElementById("e_coder");
var e_app = document.getElementById("e_app");
// 2.监听鼠标进入
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. 监听鼠标的离开
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>