JS_10
一、DOM的认知
JS是由三部分组成：
ECMAScript：简称ES，它是欧洲计算机协会大概每年的六月中旬定制的语法规范
DOM：全称document object model 即为文档对象模型
BOM：全称browser object model 即为浏览器对象模型
1.1、节点树
概述：节点即为标签。节点之间的关系称为节点树。
DOM：文档对象模型可以理解为是整个节点树最外层‘根元素’
DOM其实就是JS语言中内置引用类型document对象，DOM对象经常用来操作节点（标签）。比如：操作节点的样式、属性、文本
<script>
//DOM:内置document对象，引用类型数据
//DOM是整个页面元素的‘根元素’
console.log(document);
console.log(typeof document);
</script>
1.2、DOM属性
概述：DOM：document object model ：在JS中是一种引用类型的数据，官方提供了很多的属性和方法进行操作标签
1.2.1、documentElement：获取到节点树的HTML标签
<script>
//documentElement属性：获取节点树的html标签
console.log(document.documentElement);
</script>
1.2.2、head：获取到head标签
<script>
//head属性：获取节点树的head标签
console.log(document.head);
</script>
1.2.3、title属性：获取到节点title标签的文本
<script>
//title属性：获取节点树title标签中的文本部分
console.log(document.title);
</script>
1.2.4、body属性：获取到节点树的body标签
<script>
//body属性：获取节点树的body标签
console.log(document.body);
</script>
1.3、DOM方法
概述：DOM对象，官方提供了很多方法来操作节点树上的标签。
1.3.1、getElementById：他是DOM对象方法，可以通过标签ID选择器在JS中去获取标签
<script>
//利用getElementById方法可以通过id选择器来获取到任意的标签，注意这个方法实质上是一个函数，参数要传对应名字的字符串形式
var element = document.getElementById("box");
var eleCur = document.getElementById("cur");
console.log(element);
console.log(eleCur);
</script>
不管节点（标签）在网页中嵌套的有多深，都可以通过这个方法获取到
补充知识：标签的数据类型是Object
1.4、操作节点属性
概述：我们可以通过通过DOM方法来获取到节点树上的任意节点（标签），经常通过点语法来操作节点的属性、文本、样式等。
<script>
var ele = document.getElementById("box");
//可以通过点语法来操作节点的属性
console.log(ele.id);
//要注意在操作class属性时要写.className才能进行相应的操作。
console.log(ele.className);
//改变id的属性（重新赋值，注意值是字符串形式的）
ele.id = "Cur1";
ele.className = "Cur2";
</script>
1.5、操作节点文本
概述：我们可以通过过DOM对象提供的方法获取对应的节点，也可以通过点语法去操作节点的文本
操作节点的文本分为两种情况：
第一种是操作表单元素文本，通过value属性进行操作
第二种是操作非表单 元素文本，需要通过innerHTML属性进行操作
<script>
//非表单元素：不是input标签即可。如div span a imag等
//非标单元素操作文本需要使用innerHTML属性进行操作
var p = document.getElementById("cur");
//获取文本
console.log(p.innerHTML);
//修改文本(多次修改后面覆盖前面)
p.innerHTML = "12345600";
//表单元素操作文本：通过value属性
var input = document.getElementById("cur1");
//获取文本
console.log(input.value);
//修改文本
input.value = "通过JS动态修改表单元素文本";
</script>
1.6、操作节点样式
概述：可以通过DOM方法获取节点，可以操作节点属性、文本和行内样式
样式：层叠样式表，样式可以美化网页、可以通过浮动、定位改变他们在网页中的位置。
样式分为三种写法：行内样式、内部样式、外链样式。
行内样式：
<div style = "width:100px;height:100px">正在学习web前端</div>
内部属性：
外链样式：
通过link标签引入外部样式，在href属性里面添加css的路径
<body>
<p id = "box" style = "width:100px ; height :100px ; color : red ; font-size:14px">
我在学习web前端
</p>
</body>
</html>
<script>
var p = document.getElementById("box");
//获取行内样式(获取到的结果是一个JSON对象)
console.log(p.style);
//获取具体的样式
console.log(p.style.height);
console.log(p.style.width);
console.log(p.style.color);
console.log(p.style["font-size"]);
//修改行内样式(右侧属性值要为字符串形式的)
p.style.width = "200px";
p.style.color = "yellow";
//修改带-的样式时把-去掉之后采用驼峰命名法来设置，例如font-size
p.style.fontSize = "20px";
</script>
二、事件绑定
概述：在网站当中，用户经常进行鼠标移上或单击某个元素，这个元素可以对用户的行为进行相应。像这种现象称之为“事件绑定”。说白了就是任何机器进行交互
注意：在JS中只有标签才可以绑定事件
element.onxxxx = function (){
}
onxxxx这些时间名字都是小写的
右侧部分是一个事件处理函数：当用户触发事件的时候才会执行一次
2.1、onclick和ondblclick
概述：可以通过onclick和ondblclick来给元素绑定单击和双击事件
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
background-color:red;
font-size: 14px;
color:cyan;
width: 400px;
height: 400px;
margin: 0 auto;
text-align: center;
line-height:400px;
}
</style>
</head>
<body>
<div id = "box">
123
</div>
</body>
</html>
<script>
var div = document.getElementById("box");
//添加双击事件绑定
div.ondblclick = function(){
//修改的是行内样式
div.style.backgroundColor = "yellow";
div.style.fontSize =" 20px";
}
</script>
从常理上来说给已给任意元素绑定单击事件，但是在工作中，一般只给非表单元素绑定单击事件
2.2、信号量思想
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
background-color:red;
color:cyan;
width: 400px;
height: 400px;
margin: 0 auto;
text-align: center;
line-height:400px;
}
</style>
</head>
<body>
<div id = "box">
123
</div>
</body>
</html>
<script>
var div = document.getElementById("box");
//先声明一个全局变量fs用于记录字体的大小
var fs = 12 ;
//添加单击事件绑定
div.onclick = function(){
//设置每单击一次使得文字字体变大一号(并且最大字号为60px)
fs++;
if(fs <= 60){
div.style.fontSize = fs + "px";
}
}
</script>
信号量：就是一个全局变量，控制程序走向的一个变量
2.2.1、轮播图
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
width: 330px;
height: 330px;
margin:100px auto;
border:1px solid black;
position: relative;
}
#lbtn{
position: absolute;
left: 0;
top:165px;
}
#rbtn{
position: absolute;
right: 0;
top:165px;
}
</style>
</head>
<body>
<div>
<button id = "lbtn"><</button>
<button id = "rbtn">></button>
<img src="./images/0.png" alt="" id = "box">
</div>
</body>
</html>
<script>
var lbtn = document.getElementById("lbtn");
var rbtn = document.getElementById("rbtn");
var img = document.getElementById("box");
var idx = 0;
rbtn.onclick = function(){
idx++;
idx = idx > 3 ? 0 : idx;
img.src = "./images/" + idx +".png";
}
lbtn.onclick = function(){
idx--;
idx = idx >= 0 ? idx : 3;
img.src = "./images/" + idx +".png";
}
</script>
2.3、onmouseenter和onmouseleave
概述：鼠标移上和鼠标移下事件（onmouseenter和onmouseleave）
<style>
*{
margin:0;
padding:0;
}
div{
width: 200px;
height: 200px;
margin: 200px auto;
}
</style>
</head>
<body>
<div>
<img src="./images/0.png" alt="" id = "box">
</div>
</body>
</html>
<script>
var img = document.getElementById("box");
box.onmouseenter = function(){
img.src = "./images/1.png";
}
box.onmouseleave = function(){
img.src = "./images/0.png";
}
</script>
鼠标移上和鼠标移除切换图片的例子
一个节点可以绑定多个事件
鼠标移上：onmouseenter onmouseover
鼠标移除：onmouseleave onmouseout
2.4、聚焦和失焦事件
onfocus和onblur
概述：聚焦和失焦事件一般和表单元素input一起使用，因为只有表单元素才有文字
<body
<p>
请输入您的手机号码：<input type="text" id = "box"> <span id = "cur"></span> </p> </body> </html> <script> var input = document.getElementById("box"); var span = document.getElementById("cur"); input.onfocus = function(){ input.style.fontWeight = "700"; } input.onblur = function(){ var txt = input.value;
//正则表达式验证字符串 if(/^1[3456789]\d{9}/.test(txt)){ span.innerHTML = "是正确的的手机号码"; }else{ span.innerHTML = "请输入正确的手机号码"; } } </script>
2.5、鼠标系列事件
常用的鼠标系列事件：
（鼠标左右键均起作用，而onmouseclick只在鼠标左键点击时才会触发）
onmousedown:鼠标按下事件
onmousemove:鼠标在元素上移动就会触发
onmouseup:鼠标抬起事件
<script>
//鼠标一次完整的点击包括按下和抬起，即onmousedown onmouseup
//鼠标按下事件：onmousedown
document.onmousedown = function(){
var R = parseInt(Math.random()*255);
var G = parseInt(Math.random()*255);
var B = parseInt(Math.random()*255);
document.body.style.background = "rgb(" + R +"," + G + "," + B + ")";
}
// //鼠标移动事件：onmousemove
document.onmousemove = function(){
var R = parseInt(Math.random()*255);
var G = parseInt(Math.random()*255);
var B = parseInt(Math.random()*255);
document.body.style.background = "rgb(" + R +"," + G + "," + B + ")";
}
//鼠标抬起事件：onmouseup
document.onmouseup = function(){
var R = parseInt(Math.random()*255);
var G = parseInt(Math.random()*255);
var B = parseInt(Math.random()*255);
document.body.style.background = "rgb(" + R +"," + G + "," + B + ")";
}
</script>
三、获取节点的其他方法
getElementById:通过节点的ID属性值获取标签
getElementsByTagName:通过标签的名字获取节点，这个方法返回的是一个数组，数组里面的元素是节点
getElementsByClassName:通过标签的class属性获取相应节点。这个方法给我们返回数组，数组里面的的元素是节点
querySelector：可以通过任意的选择器获取节点
3.1、getElementsByTagName
<body>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>
<script>
//getElemntsByTagName:通过标签的名字来获取所有节点，不管该节点嵌套多深，注意用该方法获得的节点存储在一个类数组中，只能通过遍历类数组的元素来给标签设置样式
var arr = document.getElementsByTagName("li");
//通过遍历类数组的元素（节点）来设置样式
for(var i = 0 ; i < arr.length ; i++){
arr[i].style.color = "red";
}
</script>
3.2、getElementsByClassName
<body>
<ul>
<li>123</li>
<li class = "cur">123</li>
<li>123</li>
</ul>
<p class = "cur">123456</p>
<p>654321</p>
</body>
</html>
<script>
//getElementsByClassName:通过类名来获取到满足要求的节点，存储到一个类数组中，同样的，只能给类数组的元素（即节点）进行样式设置
var arr = document.getElementsByClassName("cur");
for(var i = 0 ; i < arr.length ; i++){
arr[i].style.background = "red";
}
</script>
3.3、querySelector
<body>
<ul>
<li>123</li>
<li>123</li>
<li class = "cur">123</li>
<li id = "box">123</li>
<li>123</li>
</ul>
<p class = "cur">123456</p>
<p id = "box">123456</p>
</body>
</html>
<script>
//querySelector:通过任意选择器（id class等等）获取节点，返回值是一个节点，（如果有多个标签符合要求则会从上到下返回满足要求的第一个标签）
var ele = document.querySelector("li");
var ele1 = document.querySelector(".cur");
var ele2 = document.querySelector("#box");
ele.style.color = "red";
ele1.style.color = "cyan";
ele2.style.color = "yellow";
</script>
四、批量添加节点事件
情形：需要给很多相同的标签添加同样的事件，此时可以用到批量添加节点事件
思想：
第一步：通过getElementsByTagName("")获取节点类数组
第二步：通过for循环与IIFE来添加事件
<style>
*{
margin : 0 ;
padding: 0;
}
ul{
width:100%;
background : #eee;
overflow : hidden;
}
li{
padding: 20px;
list-style:none;
float: left ;
}
</style>
</head>
<body>
<ul>
<li>新闻</li>
<li>体育</li>
<li>教育</li>
<li>游戏</li>
<li>直播</li>
</ul>
</body>
</html>
<script>
var liArr = document.getElementsByTagName("li");
for (var i = 0 ; i < liArr.length ; i++){
//IIFE拥有自己独立的作用域，如果不采用IIFE的形式的话，每次传递的i值都是5，无法满足点击要求
+function(index){
liArr[index].onclick = function(){
liArr[index].style.color = "red";
}
}(i);
}
</script>
方法二：用this
<script>
var liArr = document.getElementsByTagName("li");
for (var i = 0 ; i < liArr.length ; i++){
liArr[i].onclick = function(){
this.style.color = "red";
}
}
</script>
淘宝二级菜单的制作
<script>
var liArr = document.getElementsByTagName("li");
var rt = document.getElementById("right");
for(var i = 0 ; i < liArr.length ; i++){
+function(index){
//鼠标进入
liArr[index].onmouseenter = function(){
//首先让所有文字恢复起始状态
// for(var j = 0 ; j < liArr.length ; j++){
// liArr[j].style.color = "black";
// }
//添加鼠标移上事件
liArr[index].style.color = "pink";
rt.style.display = "block";
rt.innerHTML = "购买的商品" + index;
}
//添加鼠标移除事件
liArr[index].onmouseleave = function(){
liArr[index].style.color = "black";
rt.style.display = "none";
}
}(i);
}
</script>
浙公网安备 33010602011771号