前端开发之JS之BOM与DOM

一、BOM操作

　　1、简述：Browser Object Model，即用JS代码控制浏览器的相关操作。

　　2、window对象(窗口对象)的操作：

window.innerHeight;  // 查看当前窗口高度
// ===> 850
window.innerWidth;  // 查看当前窗口宽度
// ===> 1440
window.open('https://www.baidu.com/','','height=400px,width=400px,top=400px,left=400px');
// 新建窗口打开一个页面，第一参数是url，第二个参数写空，第三个参数设置新建窗口的大小和位置
// 新建的窗口是当前窗口的子窗口，父子窗口之间可以通过window.opener()通信
window.close();  // 关闭当前窗口

　　3、window子对象的操作：调用时可以不写前缀window，为了意义明确，推荐写全。

　　4、window.navigator对象(浏览器对象)的操作：

window.navigator.appName;  // 查看当前浏览器名称
// ===> "Netscape"
window.navigator.appVersion;  // 查看当前浏览器版本
// ===> "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36"
window.navigator.userAgent;  // 标识当前是否是浏览器访问，一般用于反爬虫
// ===> "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36"
window.navigator.platform;  // 查看当前所处平台
// ===> "Win32"

　　5、window.history对象(回访对象)的操作：

window.history.back();  // 回退到上一页
window.history.forward();  // 前进到下一页

　　6、window.location对象(坐标对象)的操作：

window.location.href;  // 获取当前页面的url
// ===> "http://localhost:63342/week12-day01/03%20%E5%8D%9A%E5%AE%A2%E6%95%B4%E7%90%86/00.html?_ijt=4pa7c1ico8k5b7n99glgif7svc"
window.location.href = 'http://www.baidu.com/';  // 跳转到指定页面
window.location.reload();  // 刷新当前页面

　　7、设置弹出框：

　　　　①警告框：有提示信息与确认按钮。

    <script>
        alert('欢迎来到本页面')
    </script>

　　　　②确认框：有提示信息与确认/取消按钮。

    <script>
        confirm('是否确认如此操作？')
    </script>

　　　　③互动框：有提示信息与可输入框还有确认/取消按钮。

    <script>
        prompt('请输入您的编号：')
    </script>

    <script>
        prompt('请输入您的编号：', '可以设置默认值')
    </script>

　　8、设置计时器

前端开发之JS之BOM与DOM

猜你喜欢