前端之BOM和DOM
BOM （Browser Object Model）是指浏览器对象模型，它使JavaScript有能力与浏览器进行“对话”
DOM（Document Object Model)）是指文档对象模型，通过它，可以访问HTML文档的所有元素
Window 对象是客户端 JavaScript 最高层对象之一，由于Windon对象是其它大部分对象的共同祖先，在调用 Window 对象的方法和属性时，可以省略 Window 对象的引用。例如：window.documenet.write() 可以简写成：document.write()
所有浏览器都支持 window 对象。它表示浏览器窗口
window.innerHeight 浏览器窗口的内部高度
642
window innerWidth 错误案例
VM218:1 Uncaught SyntaxError: Unexpected identifier
window.innerWidth 浏览器窗口的内部宽度
770
window.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: 你看到了吗？
true
alert(123)
blog-common.min.js?v=4QhAuTQQoOm-lM3IPePkpoT4bSJvxH-elPKwr4VYOAI:1 alert: 123
true
confirm('确认删除？') 确认框
true
confirm('确认删除？')
false
prompt('输入姓名') 提示框
"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__: HTMLCollection
document.getElementsByClassName('b')[0] 数组索引取值
<div class="b" id="b1">…</div>
document.getElementsByTagName('a') 标签选择器
HTMLCollection [a]0: alength: 1__proto__: HTMLCollection
document.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')
undefined
dEle
<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.parentElement
undefined
paEle
<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__: HTMLCollection
paEle.firstChild 注：查找第一个儿子标签内容
"我是第二个div
"
paEle.firstElementChild 注：查找第一个儿子dom
<span class="c" id="c1">我是第二个div的span</span>
paEle.lastElementChild 注：查找最后一个儿子
<div class="d" id="d1">…</div>
paEle.lastChild
#text
var cEle=dEle.nextElementSibling 注：查找当前标签的下一个兄弟
undefined
cEle
<div class="d" id="d1">…</div>
cEle.previousSibling
#text
cEle.previousElementSibling 注：查找当前元素的上一个兄弟
<span class="c" id="c1">我是第二个div的span</span>
添加创建节点
var img=document.createElement('img') 创建标签
undefined
img
<img>
img.src='1.jpg' 设置标签的默认属性
"1.jpg"
img
<img src="1.jpg">
var d1Ele=document.getElementById('a1') 获得标签对象
undefined
d1Ele.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') 获取标签对象
undefined
d1Ele
<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') 创建标签
undefined
imgEle
<img>
imgEle.src='1.jpg' 设置标签的默认属性
"1.jpg"
imgEle
<img src="1.jpg">
var d1Ele=document.getElementById('a1')
undefined
d1Ele.appendChild(imgEle) 插入子标签
<img src="1.jpg">
var d1Ele=document.getElementById('b1')
undefined
d1Ele.appendChild(imgEle)
<img src="1.jpg">
var c1Ele=document.getElementById('c1')
undefined
d1Ele.insertBefore(imgEle,c1Ele) 插入指定位置的标签
<img src="1.jpg">
imgEle.setAttribute("name","val") 设置标签属性
undefined
imgEle
<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') 获取标签对象
undefined
a1Ele
<div class="a" id="a1">我是第一个div</div>
a1Ele.innerText 获取标签文本内容
"我是第一个div"
a1Ele.innerText='修改标签内容' 设置修改文本内容
"修改标签内容"
a1Ele.innerHTML 如下解释
"修改标签内容"
var b1Ele=document.getElementById('b1')
undefined
b1Ele
<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')
undefined
b1Ele
<div class="b b12 b13" id="b1">…</div>
b1Ele.classList 获取所有的 class 属性值
DOMTokenList(3) ["b", "b12", "b13", value: "b b12 b13"]
b1Ele.classList.remove('b12') 移除属性值
undefined
b1Ele
<div class="b b13" id="b1">…</div>
b1Ele.classList.add('b14') 添加属性值
undefined
b1Ele
<div class="b b13 b14" id="b1">…</div>
b1Ele.classList.contains('b') 判断值是否存在
true
b1Ele.classList.toggle('b') toggle（）,表示如果存在传的这个值，就删除，不存在就添加
false 这里存在就给删除了
b1Ele
<div class="b13 b14" id="b1">…</div>
b1Ele.classList.toggle('b') 这里不存在就添加上
true
b1Ele
<div class="b13 b14 b" id="b1">…</div>
b1Ele.style.backgroundColor="red" 设置CSS样式属性
"red"
var a1Ele=document.getElementById('a1')
undefined
a1Ele.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>