在介绍获取标签之前，我们先来简单介绍一下JavaScript吧！
JavaScript一门基于对象和事件驱动的解释性脚本语言。
名词解释：
基于对象：JavaScript 是一种基于对象的语言，这意味着它能运用自己已经创建的对象，因此，许多功能可以来自脚本环境中对象的方法与脚本的相互作用。
事件驱动：JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行。
解释性
解释性：可以直接识别，读一行执行一行
编译性：高级语言，c c++ ,先编译计算机能识别的，再执行（速度快）
特性：基于对象，事件驱动，解释性，跨平台
组成：Dom---文档对象模型，Bom---浏览器对象模型
接下来，介绍一下JS的引入方式。
第一种 行间引入 将js的语法直接写在开始标签上
<button onclick="alert('学JS的第一天')">提交</button> 第二种 内部引入
js代码放在script标签中 script标签可以放在任意位置 代码的执行顺序是从上往下执行
<script>
//浏览器弹窗
alert("学JS的第一天")
</script> 第三种 外部引入
在外部创建js文件 通过script标签的src属性引入文件 src="js文件路径"。( 不要在这里面再写其他的js代码。
<script src="./01.js">
// alert("学JS的第一天")
</script>JavaScript的调试语句
js调试:在实际开发过程中用于检测代码的功能的一种方式
1、alert()
语法: alert(提示信息)
作用: 在页面中弹出警告框，用于提示
缺点: 阻塞性的弹窗 一次只能输出一个
<script>
alert("嗨喽");
</script>2、 console.log()
语法：console.log(输出信息)
作用：在控制台打印信息 多个输出之间用逗号隔开
<script>
let a=10
console.log("a")//10
</script>3、打断点
在sources找到当前运行的文件---在打断点的代码行号上点击。
获取标签
通过id获取标签(元素)
语法:document.getElementByid("id名")
作用:通过id名获取标签，可以获取到具体的某一个
var box = document.getElementById("box")
console.log(box)
通过类名获取标签(元素)
语法：document.getElementsByClassName("类名")
作用：获取整个文档下对应的类名标签
获取集合中某一个具体的标签：集合[下标/序号]
var box = document.getElementsByClassName("box");
console.log(box);//HTMLCollection(6)
console.log(box[0]);//获取集合中的第一个盒子父元素.getElementsByClassName("类名")
作用:获取该父元素下对应的类名标签
var father = document.getElementsByClassName("wrap")[0];
var child = father.getElementsByClassName("box")[0];
console.log(child)通过标签名获取标签(元素)
语法： document.getElementsByTagName("标签名")
作用：获取整个文档下对应的标签名 获取到的是一个集合
var DivList = document.getElementsByTagName("div");
console.log(DivList);//HTMLCollection(10)
console.log(DivList[9]);父元素.getElementsByTagName("标签名")
获取该父元素下对应的标签
var father = document.getElementById("wrap");
var child = father.getElementsByTagName("div");
console.log(child);//HTMLCollection(3)常用的鼠标事件
语法：标签.事件类型 = function(){
执行某个动作之后 要执行的逻辑代码
}
上代码：
<body>
<div id="box"></div>
<script>
// 需求：点击盒子之后 弹窗内容 马上吃饭 alert("马上吃饭")
// 标签.事件类型 = fucntion(){ 要执行的代码}
// 1.获取标签
var oDiv = document.getElementById("box");
//2.绑定事件----onclick 点击事件
oDiv.onclick = function () {
//3.要执行的代码
// alert("马上吃饭")
console.log("单击")
}
// //3.双击事件
oDiv.ondblclick = function(){
alert("双击");
}
// 4.鼠标移入
oDiv.onmouseover = function(){
console.log("移入");
}
// 5.鼠标移出
oDiv.onmouseout = function(){
console.log("移出")
}
// 6.鼠标移动
oDiv.onmousemove = function(){
console.log("移动")
}
// 7.鼠标按下
oDiv.onmousedown = function(){
console.log("按下")
}
// 8.鼠标抬起
oDiv.onmouseup = function(){
console.log("抬起")
}
// 9.右键显示菜单
oDiv.oncontextmenu = function(){
console.log("显示右击菜单")
}
// 10.鼠标移入
oDiv.onmouseenter = function(){
console.log("移入123")
}
// 11.鼠标移出
oDiv.onmouseleave = function(){
console.log("移出123")
}
</script>
</body>好啦！今天的内容到此为止了，如果各位小伙伴喜欢的话，收藏加关注吧！！！