JavaScript 学习笔记（一）JavaScript基础，JavaScript的基本DOM操作

小张小张啊

已于 2022-03-05 11:24:04 修改

阅读量351

点赞数 1

文章标签： javascript 学习前端

于 2022-03-02 10:05:21 首次发布

本文链接：https://blog.csdn.net/weixin_43969648/article/details/123209152

版权

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
评论
JavaScript 学习笔记（一）JavaScript基础，JavaScript的基本DOM操作

JavaScript 学习笔记（一）javaScript中的DOM操作1. 获取浏览器窗口尺寸宽度：widnow.innerwidth高度：widnow.innerHeight //获取浏览器可视窗口的宽度 var w = window.innerWidth //获取浏览器可是窗口的高度 var h = window.innerHeight console.log(w) console.log(h)2. 浏览器的弹出层提示框：window.a
复制链接

扫一扫