JavaScript 学习笔记(一)JavaScript基础,JavaScript的基本DOM操作

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值