前端基础——JavaScript中的DOM基础与DOM事件
DOM查找方法
document.getElementById
语法:document.getElementById(“id”)
功能:返回对拥有指定ID的第一个对象的引用
返回值:DOM对象
说明:id为DOM元素上id属性的值
<div id="box" class="box"> 元素 </div> <script type="text/javascript"> // 获取id为box的这个元素 var box = document.getElementById("box"); console.log(box); </script>
document.getElementsByTagName
语法:document.getElementsByTagName(“tag”)
功能:返回一个对所有tag标签引用的集合
返回值:数组
说明:tag为要获取的标签名称
<ul id="list1"> <li>前端开发</li> <li>服务器端开发</li> <li>UI设计</li> </ul> <ol> <li>JavaScript原生</li> <li>JavaScript框架</li> </ol> <script type="text/javascript"> // 获取页面中所有的li var lis = document.getElementsByTagName("li"); console.log(lis); // 获取id为list1下的所有li var lis2 = document.getElementById("list1").getElementsByTagName("li"); console.log(lis2); </script>
设置元素样式 JS可以动态给元素设置样式
ele.style.styleName=styleValue
语法:ele.style.styleName=styleValue
功能:设置ele元素的css样式
说明:
ele为要设置样式的DOM对象
styleName为要设置的样式名称,不能使用“-”连接形式,比如:font-size,要用fontSize的驼峰形式。
styleValue为设置的样式值
<div id="box" class="box"> 元素 </div> <ul id="list"> <li>前端开发</li> <li>服务器端开发</li> <li>UI设计</li> <li>python发开</li> <li>java开发</li> </ul> <ol> <li>JavaScript原生</li> <li>JavaScript框架</li> </ol> <script type="text/javascript"> // 设置id为box的这个元素文字颜色 var box = document.getElementById("box"); box.style.color = "#f00"; box.style.fontWeight = "700"; // 当属性是减号连接的复合形式是,必须要转换为驼峰形式 var lis = document.getElementById("list").getElementsByTagName("li"); // 数组是不能直接设置DOM样式属性的,所以要遍历数组 for (var i=0; i<lis.length;i++){ lis[i].style.color = "#00f"; if (i==0){ lis[i].style.backgroundColor = "#ccc"; }else if(i==1){ lis[i].style.backgroundColor = "#666"; }else if(i==2){ lis[i].style.backgroundColor = "#999"; }else{ lis[i].style.backgroundColor = "#333"; } } </script>
innerHTML
语法:ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML
语法:ele.innerHTML = “html”
功能:设置ele元素开始和结束标签之间的HTML内容为html
<div id="box" class="box"> 元素 </div> <ul id="list"> <li><em>前端开发</em></li> <li><strong>服务器端开发</strong></li> <li>UI设计</li> </ul> <script type="text/javascript"> var lis = document.getElementById("list").getElementsByTagName("li"); // 数组是不能直接设置DOM样式属性的,所以要遍历数组 for (var i=0; i<lis.length;i++){ console.log(lis[i].innerHTML); // lis[i].innerHTML = lis[i].innerHTML+"程序"; lis[i].innerHTML += "程序"; // 是上面注释掉代码的简写 } </script>
className
语法:ele.className
功能:返回ele元素的class属性
语法:ele.className = “cls”
功能:设置ele的class属性为cls
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .on{ border-bottom: 1px solid #0f0; } .current{ background: #ccc; color: #f00; } </style> </head> <body> <div id="box" class="box"> 元素 </div> <ul id="list"> <li><em>前端开发</em></li> <li class="on"><strong>服务器端开发</strong></li> <li>UI设计</li> </ul> <script type="text/javascript"> var lis = document.getElementById("list").getElementsByTagName("li"); // 数组是不能直接设置DOM样式属性的,所以要遍历数组 for (var i=0; i<lis.length;i++){ console.log(lis[i].innerHTML); // lis[i].innerHTML = lis[i].innerHTML+"程序"; lis[i].innerHTML += "程序"; // 是上面注释掉代码的简写 // className 是重新设置设置类,替换元素本身的class lis[1].className = "current"; // 动态添加class,替换元素本身class,这里用current替换on } // className获取元素类,如果有两个以上的class属性值,那么获取这个元素的className属性时, // 会将它的class属性值都打印出来 console.log(document.getElementById("box").className); </script>
getAttribute
语法:ele.getAttribute(“attribute”)
功能:获取ele元素的attribute属性
说明:
1.ele是要操作的DOM对象
2.Attribute是要获取的html属性(如:id、type)
<p id="text" class="text" align="center" date-type="title">文本</p> <script type="text/javascript"> var p = document.getElementById("text"); // 获取标签属性语法:DOM对象.属性,如:p.id 这种方式对标签自带的属性有效 // 比如 <input type="" name="" id="" value="" /> 中type name id value 都是自带(标准)属性 // 但是 class就不行,它会返回一个undefined,它是用className去获取。 // 但是想获得其他的非标准属性,这时候要用到Attribute console.log(p.id); // 得到 text console.log(p.align); // 得到 center console.log(p.getAttribute("date-type")); // 这时候可以得到 title console.log(p.getAttribute("class")); // 等价于 p.className 会得到text
设置属性
setAttribute
语法:ele.setAttribute(“attribute”,value)
功能:在ele元素上设置属性
说明:
1、ele是要操作的DOM对象
2、attribute为要设置的属性名称
3、value为要设置的attribute属性的值
① setAttribute方法必须有两个参数
② 如value是字符串,需要加引号
③ setAttribute有兼容问题
<p id="text" class="text" align="center" date-type="title">文本</p> <input type="text" id="user" value="user" /> <script type="text/javascript"> var p = document.getElementById("text"); // 给p设置一个date-color属性 p.setAttribute("date-color","#f00"); // input设置一个isRead属性 user.setAttribute("isRead","false"); // 删除属性 p.removeAttribute("align"); </script>
删除属性
removeAttribute
语法:ele.removeAttribute(“attribute”)
功能:删除ele上的attribute属性
说明:
1、ele是要操作的DOM对象
2、Attribute是要删除的属性名称
p.removeAttribute("align");
什么是事件
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
HTML事件
直接在HTML元素标签内添加事件,执行脚本。
语法:<tag 事件=“执行脚本”></tag>
功能:在HTML元素上绑定事件。
说明:执行脚本可以是一个函数的调用。
<style type="text/css"> .btn{ width: 140px; height: 30px; line-height: 30px; background: #00f; color: #fff; font-size: 14px; text-align: center; border-radius: 5px;/*圆角*/ cursor: pointer; /*光标形状*/ margin-top: 30px; } </style> </head> <body> <!--alert括号中的文字用单引号,为了与外面的双引号区别开--> <input type="button" id="" value="弹 出" onclick="alert('我是按钮')" /> <!--鼠标滑过按钮时调用mouseoverFn的函数--> <div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div> <script type="text/javascript"> function mouseoverFn(btn){ // this将DOM文件传过来,用一个参数btn接收 // 当鼠标滑过,改变按钮背景颜色 // document.getElementById("btn").style.backgroundColor="#f00"; // console.log(btn); 检查this是否指向正确 btn.style.background = "#f00"; } function mouseoutFn(btn){ btn.style.background = "#00f"; } </script> <!--还可以传两个参数--> <div id="btn" class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#00f')">开始</div> <script type="text/javascript"> function mouseoverFn(btn,bgColor){ // this将DOM文件传过来,用一个参数btn接收 // 当鼠标滑过,改变按钮背景颜色 // document.getElementById("btn").style.backgroundColor="#f00"; // console.log(btn); 检查this是否指向正确 btn.style.background = bgColor; } function mouseoutFn(btn,bgColor){ btn.style.background = bgColor; } </script> </body>
注意:不建议使用HTML事件的原因:
1.多元素绑定相同事件是,效率低
2.不建议在HTML元素中写JavaScript代码
DOM0级事件
1.通过DOM获取HTML元素
2.(获取HTML元素).事件=执行脚本
这个事件不像HTML事件,是写在HTML上面的,所以要用DOM获取
语法:ele.事件=执行脚本
功能:在DOM对象上绑定事件
说明:执行脚本可以是一个匿名函数,也可以是一个函数的调用。
<style type="text/css"> .lock{ width: 140px; height: 30px; line-height: 30px; background: #00f; color: #fff; font-size: 14px; text-align: center; border-radius: 5px;/*圆角*/ cursor: pointer; /*光标形状*/ margin-top: 30px; }.unlock{ width: 140px; height: 30px; line-height: 30px; background: #666; color: #ccc; font-size: 14px; text-align: center; border-radius: 5px;/*圆角*/ cursor: pointer; /*光标形状*/ margin-top: 30px; } </style> </head> <body> <div id="btn" class="lock">锁定</div> <script> // 获取按钮 var btn = document.getElementById("btn"); // 下面用的都是匿名函数,现在设置函数名 function clickBtn(){ alert("这是个按钮"); } btn.onclick = clickBtn; // 这里的函数名后面,一定不能加括号 // 给按钮绑定事件,this是对该DOM元素的引用,不管是HTML元素还是DOM0级事件,this的指向是不变的 //btn.onclick = function(){ // this.className = "unlock"; // this.innerHTML = "解锁"; // 判断如果按钮是锁定,则显示为解锁,变为灰色,否则显示为锁定,变为蓝色 // 第一种方法用className判断 /*if(this.className=="lock"){ this.className = "unlock"; this.innerHTML = "解锁"; }else{ this.className = "lock"; this.innerHTML = "锁定"; } // 第二种方法用innerHTML判断 if(this.innerHTML=="锁定"){ this.className = "unlock"; this.innerHTML = "解锁"; }else{ this.className = "lock"; this.innerHTML = "锁定"; }*/ //} </script> </body>
关于this指向
在事件触发的函数中,this是对该DOM对象的引用。换句话说,this就是将dom元素传递给函数,就不会再用document.getElementById去费劲的获取了。
代码:参考 HTML事件 下方代码
鼠标事件
onload:页面加载时触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <script type="text/javascript"> // 页面加载时执行(指页面上的文本图像、CSS、二进制等 // 所有的元素都加载完毕后执行onload里的脚本) // unload 页面卸载 window.onload = function () { // 脚本在要操作的元素之上用window.onload // 获取box var box = document.getElementById("box"); var clicked = function () { alert("被点击"); } box.onclick = clicked; //此处不要加括号去调用函数 } </script> </head> <body> <div id="box">点击</div> </body> </html>
onclick:鼠标点击时触发
onmouseover:鼠标滑过时触发
onmouseout:鼠标离开时触发
onfoucs:获得焦点时触发
onblur:失去焦点时触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .box{padding: 50px;} .left,.tip{float: left;} .left{margin-right: 10px;} .tip{display: none; font-size: 14px;} /*先隐藏文字提示*/ </style> <script type="text/javascript"> // onfocus 获得焦点时触发 // 只用于input标签 type= text 和 pass 以及textare上,像单选,复选的用不了 // onblur 失去焦点时触发 window.onload = function(){ // 获取文本框和提示框 var phone = document.getElementById("phone"), tip = document.getElementById("tip"); // 给文本框绑定激活事件 phone.onfocus = function(){ // 让tip显示出来 tip.style.display = "block"; } // 给文本框绑定失去焦点的事件 phone.onblur = function(){ // 获取文本框的值。value用于获取表单元素的值 var phone_val = this.value; // 判断手机号码是否是11为数字 // 如果输入正确显示对号图标,如果错误显示错号图标 if (phone_val.length==11 && isNaN(phone_val)==false) { tip.innerHTML = "<img src='img/right.png' />"; } else{ tip.innerHTML = "<img src='img/wrong.png' />"; } } } </script> </head> <body> <div class="box"> <div class="left"> <input type="text" id="phone" placeholder="请输入手机号码" /> </div> <div class="tip" id="tip"> 请输入有效的手机号码 </div> </div> </body> </html>
onchange:域的内容改变时发生
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> // 页面加载 window.onload = init; // 初始化函数 function init(){ // 获取下拉菜单 var menu = document.getElementById("menu"); // 给菜单绑定onchange事件,一般作用于select,单选(radio),复选(checkbox) menu.onchange = function(){ // 获取当前选中的值 // var bgcolor = this.value; // menu.options 提取出全部的option,返回一个数组 // [menu.selectedIndex] 被选中数组的索引 var bgcolor = menu.options[menu.selectedIndex].value; //console.log(bgcolor); // 判断如果bgcolor为空,脚本将不执行 //if (bgcolor=="") return; // 设置body的背景色 // 判断如果bgcolor为空,则显示白色,否则显示选择后的颜色 if (bgcolor=="") { document.body.style.background = "#ffffff"; } else{ document.body.style.background = bgcolor; } } } </script> </head> <body> <div class="box"> 请选择你喜欢的背景颜色: <select id="menu" name=""> <option value="">请选择</option> <option value="#f00">红色</option> <option value="#0f0">绿色</option> <option value="#00f">蓝色</option> <option value="#ff0">黄色</option> <option value="#ccc">灰色</option> </select> </div> </body> </html>
onsubmit:表单中的确认按钮被点击时发生,onsubmit事件不是加在按钮上的,而是表单上的。
onmousedown:鼠标按钮在元素上按下时触发
onmousemove:在鼠标指针移动时发生
onmouseup:在元素上松开鼠标按钮时触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; background: #f00; } </style> </head> <body> <div class="box" id="box"> 拖动 </div> <script type="text/javascript"> var box = document.getElementById("box"); // 绑定按下事件 box.onmousedown = function(){ console.log("我被按下了"); } // 绑定移动事件 box.onmousemove = function(){ console.log("我被移动了"); } // 绑定松开事件 box.onmouseup = function(){ console.log("我被松开了") } // 绑定点击事件 box.onclick = function(){ console.log("我被点击了") } </script> </body> </html>
onresize:当调整浏览器窗口的大小时触发
onscroll:拖动滚动条滚动时触发
// 浏览器窗口尺寸发生改变 window.onresize = function(){ console.log("尺寸被改变了"); } // 拖动滚动条 window.onscroll = function(){ console.log("拖动滚动条"); }
键盘事件与keyCode属性
onkeydown :在用户按下一个键盘按键时发生
onkeypress:在键盘按键被按下并释放一个键时发生
onkeyup:在键盘按键被松开时发生
keyCode:返回onkeypress、onkeydown 或 onkeyup 事件触发的键的值的字符代码,或键的代码。就是可以知道被按下的是哪个键。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .text span{font-weight:bold;color:#f00;} em{font-style:normal;} b{font-weight:normal;} </style> </head> <body> <div> <p class="text"> <b id="showcount">您还可以输入</b> <span id="totalbox"><em id="count">30</em>/30</span> </p> <div class="input"> <textarea name="" id="text" cols="70" rows="4"></textarea> </div> </div> <script> // 获取文本框及其他元素 var text=document.getElementById("text"); var total=30; var count=document.getElementById("count"); var showcount=document.getElementById("showcount"); var totalbox=document.getElementById("totalbox"); // 绑定键盘事件 document.onkeyup=function(){ // 获取文本框值的长度 var len=text.value.length; // 计算可输入的剩余字符 var allow=total-len; var overflow=len-total; // 如果allow小于0 if(allow<0){ showcount.innerHTML="您已超出"+overflow; totalbox.innerHTML=''; }else{ showcount.innerHTML='您还可以输入'; totalbox.innerHTML='<em id="count">'+allow+'</em>/30'; } } </script> </body> </html>