javaScript中的DOM操作
1. 获取浏览器窗口尺寸
宽度:widnow.innerwidth
高度:widnow.innerHeight
//获取浏览器可视窗口的宽度
var w = window.innerWidth
//获取浏览器可是窗口的高度
var h = window.innerHeight
console.log(w)
console.log(h)
2. 浏览器的弹出层
提示框:window.alert(‘提示信息’)
询问框:window.confirm(‘询问信息’)
输入框:window.prompt(‘输入信息’)
//提示框
var res = window.alert('这是一个提示信息')
console.log(res)
//询问框
var res = window.confirm('你好吗?')
console.log(res)
//输入框
var res = window.prompt('输入你的姓名')
console.log(res)
3.开启和关闭标签页
开启:window.open(‘地址’)
关闭:window.close()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js_DOM</title>
</head>
<body>
<button id="on">开启</button>
<button id="off">关闭</button>
</body>
<script>
//开启按钮的点击事件
on.onclick = function () {
//开启标签页
window.open('http://www.baidu.com')
}
//开启关闭按钮的点击事件
off.onclick = function () {
window.close()
}
</script>
</html>
4. 浏览器常见事件
资源加载完毕:window.onload = function(){}
可视尺寸改变:window.onresize = function(){}
滚动条位置改变:window.onscroll = function(){}
<head>
<meta charset="UTF-8">
<title>js_DOM</title>
<style>
body{
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" alt="">
</body>
<script>
//资源加载完毕:
window.onload = function(){
console.log("资源已经加载完毕")
}
//可视尺寸改变:
window.onresize = function(){
console.log("窗口尺寸发生了变化")
}
//滚动条位置改变:
window.onscroll = function(){
console.log("滚动条位置改变了")
}
</script>
5. 浏览器的历史记录操作
回退页面:window.history.back()
前进页面:window.history.forward()
回退操作相当于浏览器的左箭头,即返回到上一个页面,前进操作相当于右箭头,即跳转到下一个页面。
6. 浏览器卷去的尺寸
卷去的高度:
当有标签时,使用document.documentElement.scrollTop来获取卷去的高度。
当没有标签时,使用document.body.scrollTop来获取卷去的高度。
或者可以使用兼容写法,使用 || 运算符
//有<!DOCTYPE html>标签时
window.onscroll = function () {
console.log(document.documentElement.scrollTop)
}
//没有<!DOCTYPE html>标签时
window.onscroll = function () {
console.log(document.body.scrollTop)
}
//兼容写法
window.onscroll = function () {
var height = document.documentElement.scrollTop || document.body.scrollTop
console.log(height)
}
卷去的宽度:
当有标签时,使用document.documentElement.scrollLeft来获取卷去的高度。
当没有标签时,使用document.body.scrollLeft来获取卷去的高度。
或者可以使用兼容写法,使用 || 运算符.
//有<!DOCTYPE html>标签时
window.onscroll = function () {
console.log(document.documentElement.scrollLeft)
}
//没有<!DOCTYPE html>标签时
window.onscroll = function () {
console.log(document.body.scrollLeft)
}
//兼容写法
window.onscroll = function () {
var weight= document.documentElement.scrollLeft|| document.body.scrollLeft
console.log(weight)
}
7. 设置浏览器滚动的位置
浏览器滚动到:window.scrollTo()
参数方式一(瞬间定位):window.scrollTo(left, top)
其中,left表示浏览器卷去的宽度,top表示浏览器卷去的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
width: 3000px;
height: 3000px;
}
button{
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<button id="button">走你</button>
</body>
<script>
button.onclick = function () {
window.scrollTo(300,400)
}
</script>
</html>
参数方式二(滑动定位):
window.scrollTo({
left:xx,
top:yy,
behavior:‘smooth’
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
width: 3000px;
height: 3000px;
}
button{
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<button id="button">走你</button>
</body>
<script>
button.onclick = function () {
window.scrollTo({
left:300,
top:400,
behavior:'smooth'
})
}
</script>
</html>
总结:
1. 获取浏览器窗口尺寸:
宽度:widnow.innerwidth
高度:widnow.innerHeight
2. 浏览器弹出框:
提示框:window.alert()
询问框:window.confirm()
输入框:window.prompt()
3. 开启和关闭标签页
开启:window.open()
关闭:window.close()
4. 浏览器的历史操作
回退页面:window.history.back()
前进页面:window.history.forward()
5. 浏览器常见事件
资源加载完毕:window.onload = function(){}
可视尺寸改变:window.onresize = function(){}
滚动条位置改变:window.onscroll = function(){}
6. 浏览器卷去的尺寸
高度:document.documentElement.scrollTop 或 document.body.scrollTop
高度:document.documentElement.scrollLeft 或 document.body.scrollLeft
7. 浏览器滚动到
瞬间定位:window.scrollTo(left, top)
滑动定位:window.scrollTo({ left:xx, top:yy, behavior:‘smooth’})
文章参考视频:b站千锋前端学习营:千锋前端JavaScript全套教程_JS零基础完美入门到项目实战https://www.bilibili.com/video/BV1W54y1J7Ed?p=35&share_source=copy_web