BOM （Browser Object Model）是指浏览器对象模型，它使JavaScript有能力与浏览器进行“对话”
DOM（Document Object Model)）是指文档对象模型，通过它，可以访问HTML文档的所有元素
Window 对象是客户端 JavaScript 最高层对象之一，由于Windon对象是其它大部分对象的共同祖先，在调用 Window 对象的方法和属性时，可以省略 Window 对象的引用。例如：window.documenet.write() 可以简写成：document.write()
所有浏览器都支持 window 对象。它表示浏览器窗口
window.innerHeight 浏览器窗口的内部高度642window innerWidth 错误案例VM218:1 Uncaught SyntaxError: Unexpected identifierwindow.innerWidth 浏览器窗口的内部宽度770window.open() 打开一个新窗口Window?{postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window,?…}window.close() 关闭当前窗口window的子对象
navigator 对象（了解即可） 对象包含了浏览器相关信息
navigator.appName 浏览器的名字"Netscape" navigator.appVersion 浏览器版本"5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3704.400 QQBrowser/10.4.3587.400"navigator.userAgent 浏览客户端信息，以后用在爬虫，重要"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3704.400 QQBrowser/10.4.3587.400"navigator.platform 浏览器运行所在的操作系统"Win32"history 对象 对象包含了浏览器历史
history.forward() 网页前进一页history.back() 网页后退一页location 对象 对象用于获得当前页面的地址（URL)，并把浏览器重定向到新的页面
location.href 获取当前页面地址location.href="https://www.baidu.com" 跳转到指定页面location.reload() 刷新当前页面 reload(刷新)弹出框
可以在 js 中创建三种消息框：警告框，确认框，提示框
alert('你看到了吗？') 警告框blog-common.min.js?v=4QhAuTQQoOm-lM3IPePkpoT4bSJvxH-elPKwr4VYOAI:1 alert: 你看到了吗？truealert(123)blog-common.min.js?v=4QhAuTQQoOm-lM3IPePkpoT4bSJvxH-elPKwr4VYOAI:1 alert: 123trueconfirm('确认删除？') 确认框trueconfirm('确认删除？')falseprompt('输入姓名') 提示框"ssss"定时器
setTimeout()
clearTimeout()
setInterval()
clearInterval()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><script> function f(){ alert('我是能弹的') } // var t = setTimeout(f,3000) 以毫秒为单位，用来及时多久后执行哪个命令 // setTimeout(f, 3000) // clearTimeout(t) 清除定时器命令 // var t = setInterval(f,2000) 反复执行计时命令 // clearInterval(t) 清除反复执行定时命令 function f1(){ var t =setInterval(f,2000) function inner(){ clearInterval(t) } setTimeout(inner,6000) } f1()</script></head><body></body></html>DOM
DOM：是一套对文档的内容进行抽象和概念化的方法
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model)
HTML DOM 模型被构造为对象的树
DOM 标准规定HTML文档中的每一成分都是一个节点（node):
文档节点（document对象）：代表整个文档
元素节点（element对象）：代表一个元素（标签）
文本节点（text对象）：代表元素（标签）中的文本
属性节点（attribute对象）：代表一个属性，元素（标签）才有属性
注释是注释节点（comment对象）
直接查找
document.getElementById('a1') id选择器<div class=?"a" id=?"a1">?我是第一个div?</div>?document.getElementsByClassName('b') 类选择器HTMLCollection?[div#b1.b, b1: div#b1.b]0: div#b1.blength: 1b1: div#b1.b__proto__: HTMLCollectiondocument.getElementsByClassName('b')[0] 数组索引取值<div class=?"b" id=?"b1">?…?</div>?document.getElementsByTagName('a') 标签选择器HTMLCollection?[a]0: alength: 1__proto__: HTMLCollectiondocument.getElementsByTagName('a')[0] 数组索引取值<a href>?a标签?</a>?间接查找
DOM 操作HTML代码，以下各类方法基本是基于这个HTML代码基础
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div class="a" id="a1">我是第一个div</div><div class="b" id="b1">我是第二个div <span class="c" id="c1">我是第二个div的span</span> <div class="d" id="d1">我是第二个div的div <a href="">a标签</a> </div></div><div class="e" id="e1">我是第三个div</div><input type="text" value="123"></body></html>var dEle=document.getElementById('c1')undefineddEle<span class=?"c" id=?"c1">?我是第二个div的span?</span>?dEle.parentElement 注：查找父级dom<div class=?"b" id=?"b1">?"我是第二个div "<span class=?"c" id=?"c1">?我是第二个div的span?</span>?<div class=?"d" id=?"d1">?…?</div>?</div>?var paEle=dEle.parentElementundefinedpaEle<div class=?"b" id=?"b1">?…?</div>?paEle.children 注：查找儿子dom不包括孙子HTMLCollection(2)?[span#c1.c, div#d1.d, c1: span#c1.c, d1: div#d1.d]0: span#c1.c1: div#d1.dlength: 2c1: span#c1.cd1: div#d1.d__proto__: HTMLCollectionpaEle.firstChild 注：查找第一个儿子标签内容"我是第二个div "paEle.firstElementChild 注：查找第一个儿子dom<span class=?"c" id=?"c1">?我是第二个div的span?</span>?paEle.lastElementChild 注：查找最后一个儿子<div class=?"d" id=?"d1">?…?</div>?paEle.lastChild#textvar cEle=dEle.nextElementSibling 注：查找当前标签的下一个兄弟undefinedcEle<div class=?"d" id=?"d1">?…?</div>?cEle.previousSibling#textcEle.previousElementSibling 注：查找当前元素的上一个兄弟<span class=?"c" id=?"c1">?我是第二个div的span?</span>?添加创建节点
var img=document.createElement('img') 创建标签undefinedimg<img>?img.src='1.jpg' 设置标签的默认属性"1.jpg"img<img src=?"1.jpg">?var d1Ele=document.getElementById('a1') 获得标签对象undefinedd1Ele.appendChild(img) 插入标签<img src=?"1.jpg">?时间显示器
onclick 当用户点击某个对象时调用的事件句柄
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" id="a1"><input type="button" value="开始" id="start"><input type="button" value="暂停" id="stop"><script> var t; var a1Ele=document.getElementById('a1'); var stopEle=document.getElementById('stop'); var startEle=document.getElementById('start') function showtime(){ var date_obj=new Date(); var now_time=date_obj.toLocaleString(); a1Ele.value=now_time; } startEle.onclick=function(){ if(!t){ t=setInterval(showtime,1000) } } stopEle.onclick=function(){ clearInterval(t) t='' }</script></body></html>搜索框
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" id="a1" value="请输入" onfocus="foo()" onblur="fool()"> <script> var a1Ele=document.getElementById('a1') function foo(){ var val=a1Ele.value if(val=='请输入'){ a1Ele.value='' } } function fool(){ var val=a1Ele.value if(val==''){ a1Ele.value='请输入' } } </script></body></html>var d1Ele=document.getElementById('b1') 获取标签对象undefinedd1Ele<div class=?"b" id=?"b1">?"我是第二个div "<span class=?"c" id=?"c1">?我是第二个div的span?</span>?<div class=?"d" id=?"d1">?…?</div>?</div>?var imgEle=document.createElement('img') 创建标签undefinedimgEle<img>?imgEle.src='1.jpg' 设置标签的默认属性"1.jpg"imgEle<img src=?"1.jpg">?var d1Ele=document.getElementById('a1')undefinedd1Ele.appendChild(imgEle) 插入子标签<img src=?"1.jpg">?var d1Ele=document.getElementById('b1')undefinedd1Ele.appendChild(imgEle)<img src=?"1.jpg">?var c1Ele=document.getElementById('c1')undefinedd1Ele.insertBefore(imgEle,c1Ele) 插入指定位置的标签<img src=?"1.jpg">?imgEle.setAttribute("name","val") 设置标签属性undefinedimgEle<img src=?"1.jpg" name=?"val">?d1Ele<div class=?"b" id=?"b1">?"我是第二个div "<img src=?"1.jpg" name=?"val">?<span class=?"c" id=?"c1">?我是第二个div的span?</span>?<div class=?"d" id=?"d1">?…?</div>?</div>?d1Ele.removeChild(imgEle) 移除子标签<img src=?"1.jpg" name=?"val">?d1Ele.replaceChild(imgEle,c1Ele) 替换标签，第一个参数是新标签，第二个参数是要被替换的标签<span class=?"c" id=?"c1">?我是第二个div的span?</span>?d1Ele<div class=?"b" id=?"b1">?"我是第二个div "<img src=?"1.jpg" name=?"val">?<div class=?"d" id=?"d1">?…?</div>?</div>?var a1Ele=document.getElementById('a1') 获取标签对象undefineda1Ele<div class=?"a" id=?"a1">?我是第一个div?</div>?a1Ele.innerText 获取标签文本内容"我是第一个div"a1Ele.innerText='修改标签内容' 设置修改文本内容"修改标签内容"a1Ele.innerHTML 如下解释"修改标签内容"var b1Ele=document.getElementById('b1')undefinedb1Ele<div class=?"b" id=?"b1">?"我是第二个div "<span class=?"c" id=?"c1">?我是第二个div的span?</span>?<div class=?"d" id=?"d1">?…?</div>?</div>?b1Ele.innerText 获取标签文本内容"我是第二个div 我是第二个div的span我是第二个div的div a标签"b1Ele.innerHTML 获取当前标签底下的所有内容，"我是第二个div <span class="c" id="c1">我是第二个div的span</span> <div class="d" id="d1">我是第二个div的div <a href="">a标签</a> </div>"a1Ele.innerText='<h1>111</h1>' 相当于对标签赋值，修改内容"<h1>111</h1>"a1Ele.innerHTML='<h1>111</h1>' 设置标签内容，并执行样式"<h1>111</h1>"注：innerText 只对 文本内容 进行操作处理， innerHTML，不仅可操作文本内容，还操作当前标签下所有的 HTML 代码var b1Ele=document.getElementById('b1')undefinedb1Ele<div class=?"b b12 b13" id=?"b1">?…?</div>?b1Ele.classList 获取所有的 class 属性值DOMTokenList(3)?["b", "b12", "b13", value: "b b12 b13"]b1Ele.classList.remove('b12') 移除属性值undefinedb1Ele<div class=?"b b13" id=?"b1">?…?</div>?b1Ele.classList.add('b14') 添加属性值undefinedb1Ele<div class=?"b b13 b14" id=?"b1">?…?</div>?b1Ele.classList.contains('b') 判断值是否存在trueb1Ele.classList.toggle('b') toggle（）,表示如果存在传的这个值，就删除，不存在就添加false 这里存在就给删除了b1Ele<div class=?"b13 b14" id=?"b1">?…?</div>?b1Ele.classList.toggle('b') 这里不存在就添加上trueb1Ele<div class=?"b13 b14 b" id=?"b1">?…?</div>?b1Ele.style.backgroundColor="red" 设置CSS样式属性"red"var a1Ele=document.getElementById('a1')undefineda1Ele.style.backgroundColor='green'"green"使用 JQ
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--写 JQ 代码一定要引入 jquery.js 文件--> <script src="jquery.js"></script></head><body></body></html>toggle
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #a1{ height: 400px; width: 400px; } .red{ background: red; } .green{ background: green } </style></head><body><div id="a1" class="red green"></div></body></html>
