JS之BOM、DOM
一、BOM对象
1，window对象
所有浏览器都支持window对象，从概念上讲：一个HTML文档对应一个window对象，从功能上讲：控制浏览器窗口的，从使用上讲：window对象不需要创建对象，直接使用即可
2，window对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
3，方法的使用
3.1弹窗方法，警告窗alert、确认窗confirm、输入窗prompt
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function waring() { alert('小心点') } function certain() { var status=confirm('确定跳转？'); if (status){ location.href='http://www.baidu.com'; } } function shuru() { var content=prompt('请输入'); console.log(content) } </script> </head> <body> <button onclick="waring()">警告窗</button> <button onclick="certain()">确认窗</button> <button onclick="shuru()">输入窗</button> </body> </html>
3.2 setinterval：间隔指定的毫秒数不停的执行指定的代码、clearInterval：停止方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function gettime() { let now=new Date().toLocaleString(); let ss=document.getElementById('content'); ss.value=now; } var id; function settime() { if (id==undefined){ gettime(); id=setInterval(gettime,1000); #每1000毫秒（即1秒）后执行 } } function over() { clearInterval(id); id=undefined } </script> </head> <body> <input type="text" id="content"> <button onclick="settime()">start</button> <button onclick="over()">end</button> </body> </html>
3.3 settimeout（）：在指定的毫秒数后执行代码，cleartimeout（）：停止
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick="set()">执行</button> <button onclick="cle()">停止</button> <p id="p1">欢迎光临</p> <script> var id; function set(){ id=setTimeout(function () { document.getElementById('p1').innerHTML='谢谢' },3000) } function cle() { clearTimeout(id) } </script> </body> </html>
二、DOM对象
HTML document object model（文档对象模型）
1，DOM树，展示文档中各个对象的关系，用于导航
2，节点关系
3，节点查找方法
3.1 直接查找
document.getElementById(); #通过id查找，得到是一个准确标签
document.getElementsByClassName(); #通过类查找，不管同一类有几个标签，得到都是由同一类标签组成的数组
document.getElementsByTagName(); #通过标签名查找，不管同一种标签有几个，得到的都是由同一种标签组成的数组
document.getElementsByName(); #通过name属性查找，返回的是同一name值的标签组成的数组
注意：涉及寻找元素，注意<script>的位置，写在被查找标签后面
3.2 导航查找
'''
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
'''
注意：是没法直接找到所有的兄弟标签
4，节点操作
创建节点
var tag=document.createElement（标签名）
var father=document.Element.....
添加节点
追加一个子节点
father.appendchild(tag) 在father标签里加一个tag标签
在某个节点前面加一个节点
var ele=document.getElement.....
father.insertbefore(tag,ele) 在father标签里的ele节点前加上tag节点
删除节点
var ele=document.getElement.....
father.removechild(ele) 删除father标签里的ele节点
替换节点
var ele=document.getElement.....
father.replace(tag,ele) 把father标签里的ele节点换成tag新节点
注意：所有的添加、删除、替换节点都是基于父级标签来操作的。创建几个节点，就最多可以添加几个节点。比如创建一个节点，最多添加几个节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c2"> <button class="c1">添加节点</button> <p>这是一个寂寞的天，下着有些伤心的雨</p> <button class="c3">删除节点</button><br> <button class="c4">替换节点</button> </div> <script> var ele =document.getElementsByClassName('c1')[0]; var ele1=document.getElementsByClassName('c2')[0]; ele.onclick=function () { var tag=document.createElement('a'); tag.setAttribute('href','#'); tag.innerHTML='点我'; ele1.appendChild(tag); var tag1=document.createElement('p'); tag1.innerHTML='我哭了'; var ele3=document.getElementsByTagName('p')[0]; ele1.insertBefore(tag1,ele3); }; var ele2=document.getElementsByClassName('c3')[0]; var ele3=document.getElementsByTagName('p')[0]; ele2.onclick=function () { ele1.removeChild(ele3) }; var ele4=document.getElementsByClassName('c4')[0]; ele4.onclick=function () { var tag1=document.createElement('p'); tag1.innerHTML='下雨管你吊事，干活去'; tag1.setAttribute('style','font-size:14px'); ele1.replaceChild(tag1,ele3); } </script> </body> </html>节点操作例子
5，节点属性操作
5.1 文本操作：innerHTML，innerText
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1"><a href="#">欢迎来电</a></div> <script> var t1=document.getElementsByClassName('c1')[0].innerHTML; var t2=document.getElementsByClassName('c1')[0].innerText; console.log(t1); console.log(t2); </script> </body> </html>
innerHTML拿到的是对应标签里包含的所有内容，包括标签，比如上面的例子拿到‘<a href="#">欢迎来电</a>’
innerText拿到的只是内容，没有标签，比如上面的例子就只拿到‘欢迎来电’，而没有a标签
5.2 属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: yellow; } .c2{ color: white; } .c3{ font-size: 14px; } </style> </head> <body> <div id="d1">你好啊</div> <button onclick="set1()">加背景</button> <button onclick="set2()">加背景，字体颜色，字体大小</button> <button onclick="rem1()">去掉class属性</button> <button onclick="get1()">拿到class属性</button> <script> var ele=document.getElementById('d1'); function set1(){ ele.setAttribute('class','c1') #给标签设置属性，第一个参数为属性名，第二参数为属性值 } function set2() { ele.setAttribute('class','c1 c2 c3') } function rem1() { ele.removeAttribute('class') #把标签的某个属性给删除，参数为属性名 } function get1() { var va=ele.getAttribute('class'); #拿到标签的某个属性值，参数为属性名 console.log(va) } </script> </body> </html>
5.3 class属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: grey; color: yellow; font-size: 14px; margin-bottom: 5px; } ul{ list-style: none; } .hh{ display: none; } </style> </head> <body> <div class="c1">菜单一</div> <ul class="hh"> <li>111</li> <li>111</li> <li>111</li> </ul> <div class="c1">菜单二</div> <ul class="hh"> <li>222</li> <li>222</li> <li>222</li> </ul> <div class="c1">菜单三</div> <ul class="hh"> <li>333</li> <li>333</li> <li>333</li> </ul> <script> var eles=document.getElementsByClassName('c1'); for ( var i=0;i<eles.length;i++){ eles[i].onclick=function () { for (var j=0;j<eles.length;j++){ if (eles[j]!=this){ eles[j].nextElementSibling.classList.add('hh') #在标签的class属性列表里加‘hh类’。若已经存在，就不用添加 } } this.nextElementSibling.classList.remove('hh') #把标签的class属性列表里删除‘hh类’，若不存在，就不用删除 } }
5.4 改变css样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="p1">这是一个寂寞的天，下着有些伤心的雨</p> </body> <script> document.getElementById('p1').style.color='red'; document.getElementById('p1').style.fontSize='14px'; </script> </html>
注意：对于中间用—连接的属性，在这里中间的—给去掉。比如font—size写成fontSize，后面的单词首字母大写
5.5 value操作
对于input，select，textarea标签来说，可以.value获取到value值
6，事件
6.1 事件分类
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
6.2 绑定事件方法
方法一：
<div id="div" onclick="foo(this)">点我呀</div> <script> function foo(self){ // 形参不能是this; console.log("点你大爷!"); console.log(self); } </script>
方法二：
<p id="abc">试一试!</p> <script> var ele=document.getElementById("abc"); ele.onclick=function(){ console.log("ok"); console.log(this); // this直接用 }; </script>
6.3 事件介绍
onload：给body元素加onload，意味着页面内容被加载完成然后做某事，应用场景：有些动作需要在页面加载完成后立即执行，就可以用这属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* window.onload=function(){ var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; }; */ function fun() { var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; } </script> </head> <body onload="fun()"> <p id="ppp">hello p</p> </body> </html>View Code
onsubmit：当表单提交触发，该属性只能给form元素使用。在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ //阻止表单提交方式1(). //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行. var ele=document.getElementById("form"); ele.onsubmit=function(event) { // alert("验证失败 表单不会提交!"); // return false; // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。 alert("验证失败 表单不会提交!"); event.preventDefault(); } }; </script> </head> <body> <form id="form"> <input type="text"/> <input type="submit" value="点我!" /> </form> </body> </html>View Code
onselect：
<input type="text"> <script> var ele=document.getElementsByTagName("input")[0]; ele.onselect=function(){ alert(123); } </script>View Code
onchange：
<select name="" id=""> <option value="">111</option> <option value="">222</option> <option value="">333</option> </select> <script> var ele=document.getElementsByTagName("select")[0]; ele.onchange=function(){ alert(123); } </script>View Code
onkeydown：
<input type="text" id="t1"/> <script type="text/javascript"> var ele=document.getElementById("t1"); ele.onkeydown=function(e){ e=e||window.event; var keynum=e.keyCode; var keychar=String.fromCharCode(keynum); alert(keynum+'----->'+keychar); }; </script>View Code
7，实例
7.1 二级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <select name="pro" id="i1"> <option value="0">请选择省份</option> <option value="1">四川省</option> <option value="2">广东省</option> <option value="3">河南省</option> </select> <select name="citys" id="i2"> <option value="0">请选择城市</option> </select> </div> <script> var related={'1':['成都','绵阳','南充','泸州','宜宾'],'2':['广州','深圳','珠海','中山','汕头'],'3':['焦作','郑州','洛阳','新乡','驻马店']}; var ele=document.getElementById('i1'); ele.onchange=function () { var list1=related[this.value]; var father=document.getElementById('i2'); father.length=1; for (var i=0;i<list1.length;i++){ var new1=document.createElement('option'); new1.innerText=list1[i]; father.appendChild(new1); } } </script> </body> </html>View Code
7.2 导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ background-color: darkgray; width: 100%; } .c1{ width: 500px; margin: 0 auto; color: blue; font-size: 14px; } .c3{ width: 1100px; margin: 0 auto; margin-top: 50px; } img{ width: 200px; } .hidde{ display: none; } </style> </head> <body> <div id="d1" onmouseover="xiaoshi()"> <div class="c1"> <span class="c2" id="s1">电脑</span> <span class="c2" id="s2">手机</span> <span class="c2" id="s3">家电</span> <span class="c2" id="s4">照相机</span> </div> </div> <div class="c3"> <div class="cc s1 hidde"> <img src="11.jpg" alt="" > <img src="12.jpg" alt="" > <img src="13.jpg" alt="" > <img src="14.jpg" alt="" > <img src="15.jpg" alt="" ></div> <div class="cc s2 hidde"> <img src="21.jpg" alt="" > <img src="22.jpg" alt="" > <img src="23.jpg" alt="" > <img src="24.jpg" alt="" > <img src="25.jpg" alt="" ></div> <div class="cc s3 hidde"> <img src="31.jpg" alt="" > <img src="32.jpg" alt="" > <img src="33.jpg" alt="" > <img src="34.jpg" alt="" > <img src="35.jpg" alt="" ></div> <div class="cc s4 hidde"> <img src="41.jpg" alt="" > <img src="42.jpg" alt="" > <img src="43.jpg" alt="" > <img src="44.jpg" alt="" > <img src="45.jpg" alt="" ></div> </div> <script> var lists=document.getElementsByClassName('c2'); for (var i=0;i<lists.length;i++){ lists[i].onmouseover=function () { var eles=document.getElementsByClassName('cc'); for (var j=0;j<eles.length;j++){ eles[j].classList.add('hidde'); } this.setAttribute('style','background-color:white'); var ele=document.getElementsByClassName(this.id)[0]; ele.classList.remove('hidde'); }; lists[i].onmouseleave=function () { // var ele=document.getElementsByClassName(this.id)[0]; this.removeAttribute('style'); // ele.classList.add('hidde'); } } // function xiaoshi() { // var ss=document.getElementsByClassName('cc'); // for (var j=0;j<ss.length;j++){ // ss[j].classList.add('hidde'); // } // } </script> </body> </html>View Code
7.3三级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <select name="pro" id="i1"> <option value="0">请选择省份</option> <option value="1">四川省</option> <option value="2">广东省</option> <option value="3">河南省</option> </select> <select name="citys" id="i2"> <option value="0">请选择城市</option> </select> <select name="qu" id="i3"> <option value="0">请选择区</option> </select> </div> <script> var related={'1':['成都','绵阳','南充','泸州','宜宾'],'2':['广州','深圳','珠海','中山','汕头'],'3':['焦作','郑州','洛阳','新乡','驻马店']}; var relate1={'11':['金牛区','锦江区'],'12':['校区','大区'],'13':['阆中','禁区'],'14':['纳溪区','江阳区'],'15':['翠屏区','蓝池区'], '21':['广1','广2'],'22':['深1','深2'],'23':['珠1','珠2'],'24':['中1','中2'],'25':['汕1','汕2'], '31':['焦1','焦2'],'32':['郑1','郑2'],'33':['洛1','洛2'],'34':['新1','新2'],'35':['驻1','驻2']}; var ele=document.getElementById('i1'); ele.onchange=function () { var list1=related[this.value]; var father=document.getElementById('i2'); var father1 = document.getElementById('i3'); father1.length=1; father.length=1; for (var i=0;i<list1.length;i++){ var new1=document.createElement('option'); new1.innerText=list1[i]; var n=i+1+this.value*10; new1.setAttribute('value',n); father.appendChild(new1); } }; var ele1=document.getElementById('i2'); ele1.onchange=function () { var list2 = relate1[this.value]; var father1 = document.getElementById('i3'); father1.length = 1; for (var m=0; m<list2.length; m++) { var new2 = document.createElement('option'); new2.innerText = list2[m]; var n1 =m +1+this.value *10; new2.setAttribute('value', n1); father1.appendChild(new2); } } </script> </body> </html>View Code
7.4模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c2{ width: 100%; height:1000px; background-color: grey; position: absolute; left:0; top:0; opacity: 0.4; } .c3{ width: 300px; height: 300px; background-color: white; position: fixed; top:300px; left:900px; } .hide{ display: none; } </style> </head> <body> <button class="c1" onclick="set()">entry</button> <div class="c2 hide"></div> <div class="c3 hide"> <button onclick="relea()">关闭</button><br> 这是一个寂寞的天，下着有些伤心的雨 这是一个寂寞的天，下着有些伤心的雨 这是一个寂寞的天，下着有些伤心的雨 这是一个寂寞的天，下着有些伤心的雨 这是一个寂寞的天，下着有些伤心的雨 这是一个寂寞的天，下着有些伤心的雨 </div> <script> function set() { var eles=document.getElementsByTagName('div'); for (var i=0;i<eles.length;i++){ eles[i].classList.remove('hide') } } function relea() { var eles = document.getElementsByTagName('div'); for (var i = 0; i < eles.length; i++) { eles[i].classList.add('hide') } } </script> </body> </html>View Code
更多精彩
