一、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，节点操作
4.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标签
4.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>4.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类’，若不存在，就不用删除 ???????????} ???????}4.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，后面的单词首字母大写
4.5 value操作
对于input，select，textarea标签来说，可以.value获取到value值
JS之BOM、DOM
原文地址：https://www.cnblogs.com/12345huangchun/p/10171146.html