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>