一、DOM对象-查找元素
# 1.直接查找 # 获取标签对象的方式: document.getElementById('#id') #根据ID获取一个标签（获取的是单独的对象） document.getElementsByClass('.class') # 获取的是列表 列表中套对象 document.getElementsByName # 根据name属性获取标签集合 document.getElementsByClassName # 根据class属性获取标签集合 document.getElementsByTagName # 根据标签名获取标签集合（获取的是列表 列表中套对象）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">hellozekai</div> <div class="c1">helloc1</div> <div class="c1">helloc2</div> <input type="checkbox" name="hobby" id="myhobby" >足球 </body> </html> # 根据标签获取标签集合 >var obj=document.getElementsByTagName("div"); >obj # 结果： [div#i1, div.c1, div.c1, i1: div#i1] # 根据id获取标签 >var s = document.getElementById("myhobby"); >s # 结果 <input type="checkbox" name="hobby" id="myhobby">
案例：表格的全选、反选和取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="selectAll()"> <input type="button" value="取消" onclick="cancelAll()"> <input type="button" value="反选" onclick="reverseAll()"> <!--简易写法：table>thead>tr>th然后按table键就会自动补齐格式--> <table border="1px"> <thead> <tr> <th>id</th> <th>ip</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>192.168.11.21</td> <td> <input type="checkbox" class="mycheck"> </td> </tr> <tr> <td>2</td> <td>192.168.11.22</td> <td> <input type="checkbox" class="mycheck"> </td> </tr> <tr> <td>3</td> <td>192.168.11.23</td> <td> <input type="checkbox" class="mycheck"> </td> </tr> </tbody> </table> </body> <script> function selectAll(){ // 1. 获取所有的复选框 列表形式返回 var arr = document.getElementsByClassName('mycheck'); // 2. 循环列表, 获取对象 for (var i=0; i<arr.length; i++){ // console.log(chks[i]); // 3. 设置对象的checked属性 arr[i].checked = true; } } function cancelAll(){ // 1. 获取所有的复选框 列表形式返回 var arr = document.getElementsByClassName('mycheck'); // 2. 循环列表, 获取对象 for (var i=0; i<arr.length; i++){ // console.log(chks[i]); // 3. 设置对象的checked属性 arr[i].checked = false; } } function reverseAll(){ // 1. 获取所有的复选框 列表形式返回 var arr = document.getElementsByClassName('mycheck'); // 2. 循环列表, 获取对象 for (var i=0; i<arr.length; i++){ if(arr[i].checked){ arr[i].checked = false; }else{ arr[i].checked = true; } } } </script> </html>
二、DOM对象-操作属性
1.操作内容：
# 操作内容 innerText 文本 innerHTML HTML内容 value 值 # 操作属性 attributes 获取所有标签属性 setAttribute(key,value) 设置标签属性 getAttribute(key) 获取指定标签属性 removeAttribute(key) 删除属性
<div id="i1" clasid = 'sss'>这个是内容</div> <input type="text" value="dbshabdsabda" id="i2"> <input type="button" value="发送" id="btn"> # 操作标签对象的内容 # 查看 >var obj = document.getElementById("i1"); >obj <div id="i1" clasid = 'sss'>这个是内容</div> # 获取内容 >obj.innerText 这个是内容 # 设置内容 >obj.innerText="xxxx" xxxx >obj.innerHTML= '<a href="www.baidu.com">设置的内容</a>'; <a href="www.baidu.com">设置的内容</a> # innerHTML可以看到设置的内容变成了可以跳转的链接 # 也可以设置value的值 >var obj2 = document.getElementById("i2"); >obj2.value = "ccccc" >obj2.value ccccc
# 属性操作 <div id="i1" clasid = 'sss'>这个是内容</div> <input type="button" value="发送" id="btn"> obj = document.getElementById("i1") # 获取属性 >obj.attributes {0: id, 1: clasid, id: id, clasid: clasid, length: 2} # 获取单个属性值 >obj.getAttribute('id') i1 # 设置增加属性值 >obj.setAttribute('k2','v2') >obj <div id="i1" clasid = 'sss' k2="v2">这个是内容</div> # 删除属性值 >obj.removeAttribute('k2') >obj <div id="i1" clasid = 'sss'>这个是内容</div> # 设置按钮不能点击 >obj = document.getElementById('btn') >obj2.setAttribute('disabled','true'); >obj # 可以看到发送按钮变为灰色 <input type="button" value="发送" id="btn" disabled="true">
时间函数
// 在特定的时间内, 执行函数 // setInterval() ### crontab // setInterval("test()", 1000); # 每隔1s执行一次 // setTimout() ## 只执行一次结束 ## at //setTimeout("test()", 1000);
案例：验证码倒计时
# 验证码倒计时 # 分析：点击按钮后，按钮显示倒计时并变为灰色；记时结束后又变回来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证码倒计时</title> </head> <body> <input type="button" value="发送验证码" id="btn" onclick="sendMsg()"> </body> <script> var total_time = 10; //倒计时总是 var press = document.getElementById("btn"); function sendMsg() { press.setAttribute('disabled','true'); press.value = "还剩下" + total_time + "秒"; setInterval("lesstime()",1000); } function lesstime() { if (total_time == 1){ press.removeAttribute("disabled"); press.value = "发送验证码"; } else { total_time -= 1; press.value = "还剩下" + total_time + "秒"; } } </script> </html>
2.样式操作
1.指定类操作
className 获取所有类名
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
案例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: blue; } .c2{ border: 1px solid red; } </style> </head> <body> <div class="c1" >dsabdsnajd;sna</div> </body> </html> # 大颗粒度的设置: style: .c2{ xxxx } js: d1.classList.add('c2') : 添加样式 d1.classList d1.classList.remove('c2'): 删除样式 # 细颗粒度的设置: 对象.style.css的属性 = 值: # 两种情况: # 1. css: color: red; DOM: obj.style.color = 'red' # 2. css: font-size: 20px; background-position-y DOM: obj.style.fontSize = "20px"
案例2：模态框练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .shadow{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: black; opacity: 0.3; } .content{ position: absolute; top:200px; left: 500px; 300px; height: 200px; background-color: white; } .hide{ display: none; } </style> </head> <body> <input type="button" value="添加" onclick="getModal()"> <!--遮罩层--> <div class="shadow hide"></div> <!--模态框--> <div class="content hide"> <form action=""> 用户名:<input type="text" ><br> <input type="button" value="提交"> <input type="button" value="取消" onclick="cancelModal();"> </form> </div> </body> <script> function getModal() { document.getElementsByClassName('shadow')[0].classList.remove('hide'); document.getElementsByClassName('content')[0].classList.remove('hide'); } function cancelModal(){ document.getElementsByClassName('shadow')[0].classList.add('hide'); document.getElementsByClassName('content')[0].classList.add('hide'); } </script> </html>
三、事件
1. 常见的事件：焦点
获得焦点事件——–onfocus
失去焦点事件——–onblur
内容改变事件——–onchange
载入页面———–onload
单击事件———–onclick
鼠标移入事件——–onmouseover
鼠标移出事件——–onmouseout
案例：onchange 多级菜单联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="province" id="province" onchange="ld();"> <option value="-1">请选择</option> <option value="0">北京</option> <option value="1">山西</option> </select> <select name="city" id="city"> </select> </body> <script> var citys = [ ["海淀","东城","西城","朝阳"], ["太原","大同","运城","晋中"] ]; function ld(){ var provinces = document.getElementById("province"); var opts; if(provinces.value == -1){ opts = ''; document.getElementById("city").innerHTML = opts; return; } var areas = citys[provinces.value]; for(var i = 0; i < areas.length; i++){ opts += "<option value='" + i + "'>" + areas[i] + "</option>"; } document.getElementById("city").innerHTML = opts; } </script> </html>
2.事件的绑定方式
# a.html属性的方式绑定 <a href='www.baidu.com' onclick="t1();"> 百度 </a> 作为WEB开发人员,这是最早碰到的一种事件绑定方式，这种绑定方式非常古老 优点：兼容性最强 缺点也很明显: 1:需要在DOM渲染时分析绑定语句,影响DOM渲染速度(IE下尤其) 2:形式上没达到”结构与行为”相分离的原则
# b.对象属性方式 var bd = document.getElementById('bd'); bd.onclick = function(){ console.log(this.id); } # 这种绑定是把一个DOM对象onclick属性赋值为一个函数，那此时函数内部的this指向的是该DOM对象，即这个a对象 # 缺点:该方式只能为一种事件，绑定一个回调函数 即：.onclick = fn1, .onclick=fn2; 最终的效果是.onclick=fn2 执行
# c.addEventListener方式(了解)
var i0 = document.getElementById('i1');
i0.addEventListener('click', function(){console.log('a');})
i0.addEventListener('click', function(){console.log('b');})
格式：addEventListener(‘事件’,绑定的函数, true/false);
1.如果添加了多个事件处理函数，则按添加时的先后顺序来执行
2.事件处理函数中的this指代的是DOM对象本身(w3c标准)
3.第一个事件参数，一律把事件名称的“on”去掉
优点: 能为同一种事件,如onclick,绑定多个函数函数中的this指向该DOM对象,操作方便
缺点:IE8及以下版本不支持此方法
3.windows常见方法
window常见方法:
alert('1234') # 浏览器弹出消息
confirm('是否确定删除?'); #浏览器跳出弹窗询问
open(): 打开一个网页
location.href = "资源" ### 跳转到某一个网页
location.reload(): 刷新当前页面