特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

JavaScript BOM详解

来源：互联网收集：自由互联发布时间：2022-04-19

目录 1.BOM简介 1.JavaScript由三部分组成 2.window对象 3.location对象 4.history对象总结 1.BOM简介 1.JavaScript由三部分组成 ECMAScript核心语法 ES DOM文档对象模型，核心对象是document,用来操作页面文

1.BOM简介

1.JavaScript由三部分组成

ECMAScript核心语法 ES
DOM文档对象模型，核心对象是document,用来操作页面文档
BOM浏览器对象模型，核心对象是window,用来操作浏览器

在这里插入图片描述

2.window对象

名称含义history有关客户访问过的URL信息location有关当前URL信息，子级DOM对象document表示浏览器窗口的HTML文档，字级DOM对象

常用方法：

方法名含义alert(text)显示一个带有提示信息和确定按钮的警告框prompt(text)显示一个带有提示信息，文本输入框，确定和取消按钮的输入框confirm(text)显示一个带有提示信息，确定和取消按钮的确认框，确认返回true,取消返回falseopen(url,name,options)打开具有指定名称的新窗口，并加载给定url所指定的文档setTimeout(fn,delay)设置一次性定时器，在指定毫秒值后执行某个函数setlnterval(fn,delay)设置周期性定时器,周期性循环执行某个函数cleatTimeout(timer)清除一次性定时器cleatlnterval(timer)清除一次性定时器scrollTo(xpos,ypos)把内容滚动到指定坐标，即设置滚动条的偏移位置scrollBy(xnum,ynum)把内容滚动指定的像素数，即设置滚动条的偏移量

open 打开指定窗口

<script>
        function f1() {
            //这里不是css样式，这个打开窗口大小是可以调整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
    </script>
</head>
<body>
    <button onclick="f1()">打开一个新窗口</button>
</body>

setTimeout(fn,delay)

  <script>
        function f1() {
            //这里不是css样式，这个打开窗口大小是可以调整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
        function f2() {
            setTimeout(f1, 2000)
        }
    </script>
</head>
<body>
    <button onclick="f2()">一次性计时器</button>
</body>

cleatTimeout(timer)

关闭一次性计时器，在未执行的时间范围内

```javascript
<script>
        function f1() {
            //这里不是css样式，这个打开窗口大小是可以调整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
    </script>
</head>
<body>
    <button onclick="f1()">打开一个新窗口</button>
</body>

setTimeout(fn,delay)

  <script>
        function f1() {
            //这里不是css样式，这个打开窗口大小是可以调整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
        var timer
        function f2() {
            timer = setTimeout(f1, 2000)
        }
        function f3(){
		clearTimerout(timer)
}
    </script>
</head>
<body>
    <button onclick="f2()">一次性计时器</button>
    <button onclick="f3()">关闭一次性计时器</button>
</body>

scrollTo(xpos,ypos)

动到指定位置

<script>
        function f1() {
            scrollTo(0, 100) //单位为px
        }
    </script>

常用事件

时间名含义onclick鼠标点击onload页面加载完成onscroll窗口滚动条滑动

注：由于window对象是BOM结构的顶层对象，所以在调用window属性和方法可以省略window

<script>
//点击窗口后执行
        window.onclick = function() {
            console.log(111)
        }
    </script>

3.location对象

常用属性

href 设置或返货地址栏中的url

常用方法reload() 重新加载当前页

    <script>
        function getUrl() {
            //获取地址栏中的url
            console.log(location.href)
                //设置地址栏中的url，实现页面的跳转
                //location = 'https://www.baidu.com'
            location.href = 'https://www.baidu.com'
            //重新加载页面
            location.reload();
        }
    </script>
</head>
<body>
    <button onclick="getUrl()">获取url</button>
</body>

4.history对象

方法名含义back()后退，加载history列表中的上一个urlforword()前进,加载history列表中的下一个urlgo(number)浏览器移动指定的页面数

  <script>
        function goBack() {
            history.back()
        }
        function goforward() {
            history.forward()
        }
        function goGo() {
            history.go(1) //前进一个
        }
    </script>
</head>
<body>
    <button onclick="goBack()">后退</button>
    <button onclick="goforward()">前进</button>
</body>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!

上一篇：js获取最近一周一个月三个月时间的简单示例
下一篇：没有了