day55 js进阶
目录
引子
- BOM
- 浏览器对象模型（Browser Object Model）
- js代码操作浏览器
- DOM
- 文档对象模型（Document Object Model）
- js代码操作html标签
一、BOM操作
1 window对象
// window对象指的是浏览器窗口
window.innerHeight // 当前浏览器窗口的高度
window.innerWidth // 当前浏览器窗口的宽度
window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px')
// height和width是浏览器的高度和宽度，top和left是新窗口出来的位置
// 扩展父子页面通信 window.opener()
window.close()
2 window子对象
window.navigator.appName // 浏览器名称
>>> Netscape
window.navigator.appVersion // 浏览器版本
>>> "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
window.navigator.userAgent // 检验当前访问是否是一个浏览器（需要掌握）
>>> "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
// 当我们用代码去访问浏览器的时候是不会有userAgent的，所以最简单的反爬措施就是检验请求发起者的userAgent，在代码中加入userAgent配置就能破解这种反爬
window.navigator.platform // 当前硬件平台
>>> "Win32"
// 以上window子对象都可以省略window
3 history对象
window.history.back() 回退到上一页
window.history.forward() 前进到下一页
// 对应的就是你浏览器左上方的两个的箭头
4 location对象（掌握）
window.location.href // 获取当前页面的url
window.location.href = url // 跳转到指定的url
window.location.reload() // 刷新页面 浏览器左上方的小圆圈
5 弹出框
// 警告框
alert('你这个憨憨！')
// 弹出一个框，显示文字‘你这个憨憨！’ 有一个确定按钮
confirm('别瞎搞！')
// 弹出一个框，显示文字‘你这个憨憨！’ 有一个确定按钮，有一个取消按钮
// 按下确定会给页面返回true，按取消返回false
prompt('给你玩')
// 弹出一个框，显示文字‘你这个憨憨！’，下面有一个input框 有一个确定按钮，有一个取消按钮
// 按下确定会给页面返回输入的内容，按取消返回null
6 计时器相关
// 单次定时器
<script>
function fun1(){
alert('hz is dsb')
}
let t = setTimeout(func1,3000) // 以毫秒为单位，单次定时器
clearTimeout(t) // 取消定时任务，定时是异步，所以会直接取消
</script>
// 循环定时器
<script>
function func2(){
alter('hz is dsb')
}
function show(){
let t = setInterval(func2,3000) // 设定循环定时器，只要按掉就会重新计时
function inner(){
clearIntercal(t) // 清除定时器
}
setTimeout(inner,9000) // 9秒后触发清除定时器
}
show()
</script>
二、DOM操作
DOM树：页面里所有标签都可以称之为节点
js可以通过dom动态的创建HTML
- 能改变页面中所有的html元素
- 能改变页面中所有的html属性
- 能改变页面中所有的css样式
- 能对页面中的事件作出反应
ps：DOM操作需要用document起手
1 查找标签
1.1 直接查找（必须掌握）
// id查找
document.getElementById('d1') // 查找id为d1的标签
>>> <div id="d1">…</div> /// 返回的是id是d1的div标签
// 类查找
document.getElementsByClassName('c1') //查找所有继承了c1类的标签（可能是多个，所以放在一个数组里）
>>> HTMLCollection [p.c1] // 存放着很多个标签的数组
// 标签查找
document.getElementsByTagName('div') // 查找所有div标签（可能是多个，所以放在一个数组里）
>>>HTMLCollection(3)[div, div#d1, div, d1: div#d1]
当使用变量名指代标签对象的时候，一般书写成：
xxxEle
divEle
aEle
pEle
1.2 简介查找（熟悉）
let pEle = document.getElementsByClassName('c1')[0]
# 取父标签，可以多重取,返回的是父标签，html没有父标签返回的是空
pEle.parentElement
pEle.parentElement.parentElement
# 取子标签集合，所有的子标签放在一个数组内
pEle.children
# 同级别下一个
divEle.nextElementSibling
# 同级别上一个
divEle.previousElementSibling
2 节点操作
动态的创建标签，给标签添加属性，将标签添加到文本中
let imgEle = document.createElement('img') # 创建标签
imgEle.src = '1.png' # 给标签设置默认属性，自定义属性不能这样创建
imgEle.setAttribute('src','1.png')
imgEle.setAttribute('username','hz') # 用这种方式
let divEle = document.getElementById('d1') # 获取一个具体的标签对象
divEle.appendChild(imgEle) # 把img标签添加到div内部的最后
创建a标签，设置属性，设置文本，添加到指定标签上
let aEle = document.createElement('a') # 创建a标签
aEle.href = 'https://www.mzitu.com/'
aEle.innerText = '点我点我点我！' # 给标签设置文本内容
let divEle = document.getElementById('d1')
let pEle = document.getElementById('d2')
divEle.insertBefore(aEle,pEle) # 添加标签内容指定位置添加
# 在div内部，p标签之前
补充
"""
额外补充
appendChild()
removeChild()
replaceChild()
setAttribute() 设置属性
getAttribute() 获取属性
removeAttribute() 移除属性
"""
# innerText 和innerHTML的区别
divEle.innerText # 获取标签内部所有的文本
# 所以在设置的时候也只能设置文本，不会识别内部的标签语法
"id = d1 div2
div>p
div>span"
divEle.innerHTML # 获取标签内部的所有标签加文本
# 设置的时候会识别标签语法
" id = d1 div2
<p id="d2" class="c1">div>p</p>
<span>div>span</span>
"
divEle.innerText = '<h1>heiheihei</h1>' # 不识别html标签
divEle.innerHTML = '<h1>hahahaha</h1>' # 识别html标签
3 获取值操作
# 获取用户数据标签内部的数据
let seEle = document.getElementById('d2')
seEle.value # 获取的是标签内部的value值
"111"
let inputEle = document.getElementById('d1')
inputEle.value # 获取的是框里输入的值
"123"
# 文件获取
fileEle.value # 获取的只是文件的路径
"C:\fakepath\a.txt"
fileEle.files
FileList {0: File, length: 1} # 获取的是一个数组
fileEle.files[0] # 获取的是文件数据
File {name: "a.txt", lastModified: 1587783848425, lastModifiedDate: Sat Apr 25 2020 11:04:08 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 637, …}
4 class、css操作
let divEle = document.getElementById('d1')
divEle.classList # 获取标签的所有类属性，放在一个数组内
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]
# 可以通过数组的方法对内部的属性进行增删改
divEle.classList.remove('bg_red') # 移除某个类属性
divEle.classList.add('bg_red') # 添加类属性
divEle.classList.contains('c1') # 验证是否包含某个类属性
true
divEle.classList.contains('c2')
false
divEle.classList.toggle('bg_red') # 有则删除无则添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
# DOM操作设置标签样式
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.style.fontSize = '28px'
三、事件
<button onclick="func1()">点我</button>
<button id="d1">点我</button>
# 绑定事件的两种方法
<script>
// 第一种绑定事件的方式，在标签中 onclick属性调用写好的函数
function func1() {
alert(111)
}
// 第二种，找到指定标签设定它的onclick属性去调用特定函数
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
alert(222)
}
</script>
"""
script标签既可以放在head内 也可以放在body内
但是通常情况下都是放在body内的最底部
# 等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
// 第一种绑定事件的方式
function func1() {
alert(111)
}
// 第二种
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
alert(222)
}
}
