一、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
<!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:30px'); 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: 30px; } </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: 20px; 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='30px'; </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>
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>
onselect：
<input type="text"> <script> var ele=document.getElementsByTagName("input")[0]; ele.onselect=function(){ alert(123); } </script>
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>
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>
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>
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: 30px; } .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>
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>
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>