一、前言
参考：博客园-JsonJi，https://www.cnblogs.com/Dominic-Ji/p/9121560.html。
上一节的学习中，我们学习到了JavaScript的基础语法，但这跟浏览器、web页面貌似没什么关联！其实JavaScript分三部分内容：
- 上一节的JavaScript语法基础
- BOM
- DOM
二、BOM
BOM，Browser Object Model，即浏览器对象模型，实现JavaScript操作浏览器！下面开始学习如何使用JavaScript操作浏览器：
2.1、window及其子对象
Window，窗口，指的是浏览器的窗口。window对象是JavaScript对象的祖师爷，在调用window对象的方式和属性时，可以简化掉window的书写，比如：window.document简写成document，这就有点类似Python的class默认继承object。
来看看window都有哪些神通：
2.1.1、常用方法
window.innerHeight // 获取当前浏览器窗口高度
150
window.innerWidth // 当前窗口宽度
1536
window.open('https://blog.sanxi.info','',[50,300]) // 以指定大小打开指定地址，第1个参数是目标地址，2留空，3是大小与位置。
window.close() // 关闭当前窗口
2.1.2、navigator对象
navigator，领航员，用于获取浏览器相关信息！
// 获取当前浏览器名称
navigator.appName
"Netscape"
// 获取浏览器项目名称
navigator.appCodeName
"Mozilla"
// 获取浏览器厂商和版本详细信息
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36"
// 获取浏览器所在的操作系统平台
navigator.platform
"Win32"
// 获取浏览器详细信息
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36"
在上面的演示中，appVersion和userAgent的结果非常相似，但其实还是有一定区别的！userAgent，表示当前是否是一个浏览器，常被用于防爬虫的最简单手段，即检验来访者是通过代码访问还是真实的浏览器访问。
之所以说是最简单的手段，因为对付此手段仅需在代码中加上user-agent配置即可，后续课程再详细介绍。
2.1.3、history对象
用于浏览历史的对象，比如用户在当前页面的浏览记录；但它是无法获取真实的URL，只能简单地前进或后退一页。
- history.back()，退后一页。
- history.forward()，前进一页。
2.1.4、location对象(重要)
// 获取当前页面URL
location.href
"file:///E:/Note/Python%E5%AD%A6%E4%B9%A0/Untitled-1.html"
// 跳转至指定网址
location.href = 'https://blog.sanxi.info'
// 重载当前页面
location.reload()
2.1.5、弹出框
后面会介绍配合函数、事件等完成非常有意思的动作！
警告框
alter常用于确保用户得到某些重要信息，当弹出警告框后，用户必须点击确定才能继续操作。
alert('hello,world!')alert
确认框
当弹出确认框后，用户必须点击确定或者取消才能继续操作；confirm有两个按钮，点击确认则返回true，取消返回false；比如说访问网站提示是否允许收集cookie。
confirm('请确认您的信息是否有误')
true
提示框
prompt，能拿到用户在弹出的框里所输内容
prompt('chrystal')
"beautiful"
2.1.6、计时器相关
单次触发
setTimeout即定时执行函数任务。伪语法结构如下：
var t=setTimeout("JS语句",毫秒)
setTimeout方法会返回一个值，如果需要取消任务，则用其来指定
括号内第一个参数为JavaScript语句，通常为函数；第二个参数为定时的时间，单位为毫秒。
代码演示
function timer(){alert('这是一次性定时任务')}
setTimeout(timer,2000)
2
取消单次定时
取消定时任务需要用到cleartimeout
let time = function timer(){alert('这是一次性定时任务')};
setTimeout(timer,2000)
clearTimeout(time) // 上面的定时任务还没到触发就会被这条语句所取消
循环触发
每隔一段时间循环触发；可以通过函数嵌套，指定弹窗次数
let timer2 = setInterval(function timer2(){alert('呼死你')},3000);
clearInterval(timer2) // 取消循环定时任务
三、DOM
3.1、DOM简介
DOM，document object model，即文档对象模型。当web页面被加载时，浏览器会创建该页面的DOM。DOM模型通常被构造为对象的树，下面是一张引用自博客园json的图片，原博客地址：https://www.cnblogs.com/Dominic-Ji/p/9121560.html
所有标签都可以称之为节点，具体可自行搜索查阅，因为我们是Python全栈开发，并不要求对前端有深刻的了解。
DOM功能很强大，它可以改变页面的所有HTML元素和属性、CSS样式、对所有事件作出反应！DOM操作的是标签，而一个HTML页面上的标签有很多，所以我们需要先学如何查找标签，再学DOM操作标签。
DOM操作需要用关键字document，地位相当于bom的window！
3.2、查找标签
按照JavaScript的规范，当你用变量名指代标签对象的时候，一般推荐书写成XXXEl，比如divEle。
3.2.1、直接查找
id查找
document.getElementById('d1') // 括号内填标签的id值即可
类查找
document.getElementsByClassName('.c1') // 括号内填标签的class值即可
标签查找
document.getElementsByTagName('div') // 括号内填标签名即可获取标签的合集
HTMLCollection(3) [div, div.cover, div.modal]
3.2.2、间接查找
间接查找，顾名思义，要通过媒介才能进行查找，在这里是要先为变量名赋予标签对象再进行查找的意思。
let inputEle = document.getElementById('d2');
parentElement
找所有祖辈
pEle.parentElement
children
找所有后代
pEle.children
HTMLCollection(2) [p#d4, p, d4: p#d4]
firstchildren
找大儿子
pEle.firstElementChild
<p id="d4"></p>
lastchildren
找小儿子
pEle.lastElementChild
<p></p>
nextElementSibling
找弟弟
pEle.nextElementSibling
<p></p>
3.3、DOM节点操作
通过DOM操作，可以动态地创建img标签，并且给标签加属性，最后将标签添加到文本中。节点即是标签。
3.3.1、创建节点
let imgEle = document.createElement('img');
3.3.2、为节点加属性
let pEle = document.getElementById('d4');"https://blog.sanxi.info/upload/2021/01/0-_7_-c98f8c96538e473bbdc517247ec8a8bd.png"
imgEle.name = '回龙山云海'; // 第一种添加属性方式
"回龙山云海"
imgEle.setAttribute('name','cloud') // 第二种
undefined
imgEle
<img src="https://blog.sanxi.info/upload/2021/01/0-_7_-c98f8c96538e473bbdc517247ec8a8bd.png" name="cloud">
3.3.3、添加节点
插入标签内尾部
let divEle = document.getElementById('d3'); // 将img标签插入div的尾部
undefined
divEle.appendChild(imgEle);
<img src="https://blog.sanxi.info/upload/2021/01/0-_7_-c98f8c96538e473bbdc517247ec8a8bd.png" name="cloud">
插入指定标签的前面
let pEle = document.getElementById('d4'); // 把img标签插入div内的p标签前面
undefined
divEle.insertBefore(imgEle,pEle);
<img src="https://blog.sanxi.info/upload/2021/01/0-_7_-c98f8c96538e473bbdc517247ec8a8bd.png">
3.3.4、删除节点
通过父标签调用remove方法来移除子节点标签
divEle.removeChild(imgEle);
<img src="https://blog.sanxi.info/upload/2021/01/0-_7_-c98f8c96538e473bbdc517247ec8a8bd.png">
3.3.5、替换节点标签
替换掉父标签内指定的节点标签
divEle.replaceChild(imgEle,pEle);
<p id="d4"></p>
3.3.6、属性节点操作
获取节点文本
let divEle = document.getElementById('d3');
undefined
divEle.innerText // 获取标签内部所有文本内容
"我是div"
divEle.innerHTML // 获取标签内部的所有文本、标签信息
"我是div
<p id="d4"></p>
<p></p>
"
设置节点文本
divEle.innerText = '改下文本'
"改下文本"
divEle.innerText
"改下文本"
divEle.innerHTML = '<p>老色批了</p>' // 因为HTML能识别标签信息，所以会替换标签
"<p>老色批了</p>"
divEle.innerHTML
"<p>老色批了</p>"
divEle
<div id="d3"><p>老色批了</p></div>
获取/设置属性
divEle.setAttribute('name','sanxi'); // 设置标签属性值
undefined
divEle.getAttribute('name'); // 获取标签属性值
"sanxi"
divEle.removeAttribute('name'); // 移除属性
undefined
divEle.getAttribute('name');
null
3.3.7、获取值操作
适用于input、select、textarea标签。
// input标签
let inputEle = document.getElementById('d5');
undefined
inputEle.value // 获取用户所输入数据
"sanxi666"
// select标签
let selectEle = document.getElementById('d6');
undefined
selectEle.value
"chrystal"
// textarea
let textEle = document.getElementById('d7');
undefined
textEle.value
"这个很懒，什么都没留下。"
3.4、class操作
class增删查改
let classEle = document.getElementById('d3');
classEle.classList.add('name'); // 为标签添加类属性
classEle.className // 查看标签所有类属性
"name"
classEle.classList.remove('name'); // 移除指定类属性
undefined
classEle.classList.contains('name'); // 判断是否存在指定类属性
false
classEle.classList.toggle('name'); // 存在指定类属性则删除，不存在则添加
true
classEle.classList.toggle('name');
false
style操作
let divEle = document.getElementById('d3');
undefined
divEle.style.height = '100px';
"100px"
divEle.style.width = '100px';
"100px"
3.5、事件
事件即满足某个事先设定的条件，则自动触发预设的动作，这就是事件，跟zabbix的trigger还是很类似的。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
3.5.1、绑定事件的两种方式
script标签既可以放在head内，也可以放在body内，通常都是放在body内的最底部，这样可以等待页面加载完毕后再执行代码。
方式一
函数中的this为实参，指代触发事件的标签；函数定义过程的ts为形参
<div id="d3" onclick="changeColor(this);">点我更改颜色</div>
<script>
function changeColor(ts) {
ts.style.backgroundColor='blue'
}
</script>
方式二
<script>
let divEle = document.getElementById('d3');
divEle.onclick=function upgrade() {
alert('是兄弟就来砍我')
}
</script>
3.6、事件案例
开关灯案例
<style>
.c1 { // 画圆
border: 0px;
height: 100px;
width: 100px;
border-radius: 50%;
}
.bg_green{ // 圆圈背景色
background-color: green;
}
.bg_red {
background-color: red;
}
</style>
<body>
<div id="d1" class="c1 bg_red bg_green"></div>
<button id="b1">变色</button>
<script>
let divEle = document.getElementById('d1')
let btnEle = document.getElementById('b1')
btnEle.onclick=function () { // 鼠标点击按钮时触发动作去更改标签的背景色
divEle.classList.toggle('bg_red')
}
</script>
</body>
input框获取焦点失去焦点案例
<body>
<input type="text" id="i1" value="由字母数字组成">
<script>
let inputEle = document.getElementById('i1')
inputEle.onfocus=function(){inputEle.value=''} // 获取焦点后执行函数代码
inputEle.onblur=function(){inputEle.value='不要走，决战到天亮'} // 失去焦点后执行函数代码
</script>
</body>
模拟选择省市
文本域变化事件，即change事件
<script>
let provinceEle = document.getElementById('s1')
let cityEle = document.getElementById('s2')
data = {
'广东':['广州','深圳','佛山'],
'湖南':['长沙','郴州','株洲'],
'福建':['福州','泉州','厦门']
}
// 给下拉框循环添加option
for (let key in data) {
let optionEle = document.createElement('option')
optionEle.innerText = key
optionEle.value = key
provinceEle.appendChild(optionEle)
}
provinceEle.onchange = function () {
// 获取用户选择的省份
let province = provinceEle.value
console.log(province)
// 获取用户选择的城市
let citylist = data[province]
// 清除select中所有option，否则城市会混乱在一起
cityEle.innerHTML=''
// 循环取值，将省份对应的市渲染到第二个select框中
for (let index = 0; index < citylist.length; index++) {
// 创建option标签
let city = citylist[index]
// 创建option标签
let optionEle = document.createElement('option')
// 设置文本
optionEle.innerText=city
// 设置value
optionEle.value=city
// 将创建好的option添加到第二个select中
cityEle.appendChild(optionEle)
}
}
</script>