一、BOM操作
BOM（Browser Object Model）：浏览器对象模型，也就是JS代码操作浏览器
1. window对象
window对象指代的就是浏览器窗口
''' 1.浏览器窗口的高度 '''
window.innerHeight # output:1022
''' 2.浏览器窗口的宽度 '''
window.innerWidth # output:1516
''' 3.打开新的网页 '''
window.open(URL,'','属性')
# URL:打开新的网页的网址
# "":空即可
# "属性"：如 height = 400px,width = 400px
''' 4.扩展父子页面通信 '''
''' 5.关闭当前页面 '''
window.close()
2. window子对象
''' 1.获取当前浏览器的名字 '''
window.navigator.appName # output："Netscape"
''' 2.获取当前浏览器的版本 '''
window.navigator.appVersion
# output:"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
''' 3.判断是否是一个浏览器 '''
window.navigator.userAgent
# output:"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
'''
扩展：反爬措施
1.最简单常用的一个就是校验当前请求的发起者是否是一个浏览器
userAgent
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
2.如何破解该措施
在原有的代码上添加userAgent配置即可
'''
''' 4.获取平台 '''
window.navigator.platform # output:"Win32"
# 注意：如果是window的平台，那么window可以省略不写
3. history对象
''' 回退到上一页 '''
window.history.back()
''' 前进到下一页 '''
window.history.forward()
# 注意：对应的就是浏览器左上方的两个箭头
4. location对象
''' 1.获取当前页面的url '''
window.location.href
''' 2.跳转到指定的url '''
window.location.href = url
''' 3.属性页面 '''
window.location.reload()
# 浏览器左上方的小圆圈
5. 弹出框
''' 1.警告框 '''
alert() # 在括号内输入想要输入的文本
''' 2.确认框 '''
confirm() # 在括号内输入想要输入的文本
''' 3.提示框 '''
prompt() # 在括号内输入想要输入的文本
6. 计时器
- 过一段时间之后触发（一次）
- 每隔一段时间触发一次（循环）
''' 开启计时器 '''
setTimeout(function，3000) # 以毫秒为单位，3秒之后自动执行function函数
''' 清除计时器 '''
clearTimeout(x) # 这里x指代计时器
二、DOM操作
DOM（Document Object Model）：文档对象模型，也就是JS代码操作标签。
"""
DOM的概念：所有的标签都可以称之为是节点
JavaScript 可以通过DOM创建动态的 HTML：
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
DOM操作操作的是标签 而一个html页面上的标签有很多
1.先学如何查找标签
2.再学DOM操作标签
DOM操作需要用关键字document起手
```
1. 查找标签
''' 1.id查找 '''
document.getElementById()
''' 2.类查找 '''
document.getElementsByClassName()
''' 3.标签查找 '''
document.getElementsByTagName()
2. 间接查询
''' 1.父节点标签元素 '''
parentElement
''' 2.所有子标签 '''
children
''' 3.第一个子标签元素 '''
firstElementChild
''' 4.最后一个子标签元素 '''
lastElementChild
''' 5.下一个兄弟标签元素 '''
nextElementSibling
''' 6.上一个兄弟标签元素 '''
previousElementSibling
3. 节点操作
''' 1.创建节点 '''
document.createElement(标签名)
''' 2.添加节点 '''
document.appendChild(newnode) # 追加一个子节点（作为最后的子节点）
document.insertBefore(newnode,某个节点) # 把增加的节点放到某个节点的前边
''' 3.删除节点 '''
document.removeChild() # 获得要删除的元素，通过父元素调动该方法删除
''' 4.替换节点 '''
document.replceChild(newnode,某个节点)
''' 5.属性节点 '''
# 获取文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
# 设置文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText = "1"
divEle.innerHTML = "<p>2</p>"
4. 获取值操作
''' 获取值 '''
elementNode.value
# 使用于input、select、textarea
5. class、css操作
''' 1.class操作 '''
className # 获取所有样式类名（字符串）
classList.remove(cls) # 删除指定类
classList.add(cls) # 添加类
classList.contains(cls) # 存在返回true，否则返回false
classList.toggle(cls) # 存在就删除，否则添加
''' 2.css操作 '''
obj.style.backgroundColor = "red"
JS操作CSS属性的规律
- 对于没有中横线的CSS属性一般直接使用style.属性名即可。
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
- 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
三、事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。