day08~BOM

最新推荐文章于 2024-09-29 11:25:09 发布

东日是个卷毛

最新推荐文章于 2024-09-29 11:25:09 发布

阅读量108

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Clytza/article/details/129045698

版权

概述

BOM (全称bowser object model) 浏览器对象模型，他是用于操作浏览器相关的内容。BOM是一个缺乏规范的东西，为了保证他的规范性产生了一系列的共用对象来解决这个问题。沿用至今，但是这些共有对象也存在对应的兼容问题，直到w3c的介入（ie 10以后）。他的兼容问题得到了保证。

BOM的对象组成

Document（文档对象）
Location（地址栏对象）
History（历史对象）
Frames（子窗口对象）
Navigator（导航对象）
Screen（屏幕对象）
Window（窗口对象）

window的相关属性和方法

概述：window属于浏览器的global对象（顶层对象）。所有的全局函数及全局变量都是属于window的。（window可以被省略）

属性（常用属性）

parent 获取窗口的父窗口
innerHeight 获取高度
innerWidth 获取宽度

方法

控制台打印方法

console.log ()：日志打印
console.error ()：错误打印
console.info ()：信息打印
console.warn ()：警告打印
console.debug ()：调试打印
console.group () ：分组打印
console.table () ：表格打印

//window的控制台打印方法
// window.console 表示浏览器的控制台
window.console.log('日志打印') //log表示日志  window可以省略
console.error('错误打印') //错误打印
console.info('信息打印') //信息打印
console.warn('警告打印') //警告
console.debug('调试打印') //调试
console.group('分组打印') //分组打印
console.table('表格打印') //表格打印

弹窗相关方法

alert 提示框，没有返回值
prompt 输入框，有返回值，返回值为输入的内容（string类型）
confirm 交互框，有返回值，返回 boolean 类型

alert ( '提示框' )

console.log(prompt('输入框'));//输入框 点击确认返回输入的内容 点击取消返回null

console.log(confirm('你确定要删除吗?'));//交互框 返回一个true 确定 或者false 取消

窗口打开关闭的方法

open 打开一个新的窗口

document.getElementById('openBtn').onclick = function(){
    //打开的url路径地址 打开的方式(a标签的target一致) 打开时的配置(使用=号赋值 使用,号隔开)
    window.open('http://www.baidu.com','_blank','width=100,height=200,left=200,top=200')
}

close 关闭当前窗口

document.getElementById('closeBtn').onclick = function(){
    //打开的url路径地址 打开的方式(a标签的target一致) 打开时的配置(使用=号赋值 使用,号隔开)
    window.close()
}

改变窗口位置

moveTo：给定实际坐标
moveBy：给定变化的距离

改变窗口大小

resizeTo：给定实际大小
resizeBy：在当前下发生变化

改变滚动栏的位置

scrollTo
scrollBy

document.getElementById('scrollToBtn').onclick = function(){
    window.scrollTo(300,300) //滚动栏x轴到达30 y轴到达30
    console.log(window.scrollX,window.scrollY)
}
document.getElementById('scrollByBtn').onclick = function(){
    window.scrollBy(300,300) //滚动栏x轴到达30 y轴到达30
    console.log(window.scrollX,window.scrollY)
}

print打印（打印机功能调用）： window.print()

fetch 发送一个异步请求：window.fetch()

find查找：window.find()

foucs 获取焦点（窗口）：window.foucs()

blur 失去焦点：window.blur()

练习

<html>    

    <button id="openBtn">打开窗口</button>
    <button id="closeBtn">关闭窗口</button>

</html>
    
<script>
        // window对象
        // 打开窗口
        document.getElementById('openBtn').onclick = function() {
            window.open('https://www.baidu.com', '_blank', 'top=100,left=500')
        }

        // 关闭窗口
        document.getElementById('closeBtn').onclick = function() {
            window.close()
        }
    
</script>

Document 文档对象

document是文档对象，他指代的是html整个文档。包含用于操作对应的html文档的相关内容。他是整个DOM里面最大的对象，他是属于BOM的。

body 获取body
forms 获取所有的表单
head 获取head

Location 地址栏对象的属性和方法

https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9664507230212976443%22%7D&n_type=-1&p_from=-1

https: // 协议
mbd.baidu.com //域名（解析ip+端口号）
浏览器访问根据协议的不同指定不同的端口号 80端口http 443端口https
/newspage/data/landingsuper 路径地址
?context=%7B%22nid%22%3A%22news_9664507230212976443%22%7D&n_type=-1
&p_from=-1 传递参数（get请求）

属性：

location.hash ：获取location中的hash，也就是#后面的内容
location.host ：获取主机
location.hostname ：获取主机名
location.href ：获取url路径
location.origin ：获取跨域地址
location.port ：获取端口号
location.search ：获取？后面的内容，内容写法为key=valu&key=value

        // 获取location中的hash，也就是#后面的内容
        console.log(location.hash);

        // 获取主机
        console.log(location.host);

        // 获取主机名
        console.log(location.hostname);

        // 获取url路径
        console.log(location.href);

        // 获取跨域地址
        console.log(location.origin);

        // 获取端口号
        console.log(location.port);

        // 获取？后面的内容 ，内容写法为key=valu&key=value
        console.log(location.search);


        // 获取协议
        // http（不安全 明文 80）；https（安全 加密 443 ）
        // openssl：对称加密 非对称加密 hash加密等
        console.log(location.protocol);

方法：

assign 跳转页面（会产生历史页面）
replace 替换页面（没有历史页面）
reload 重新加载（相当于刷新）

<html>
    <button id="assignBtn">跳转页面</button>
    <button id="replaceBtn">替换url页面</button>
    <button id="reloadBtn">加载页面</button>
</html>



<script>
        // assign  跳转页面（会产生历史页面）
        document.getElementById('assignBtn').onclick = function() {
                location.assign('http://www.baidu.com')
        }
        // replace 替换页面（没有历史页面）
        document.getElementById('replaceBtn').onclick = function() {
                location.replace('http://www.baidu.com')

        }
        // reload 重新加载（相当于刷新）
        document.getElementById('reloadBtn').onclick = function() {
            location.reload()
            location.reload(true)
        }
</script>

history 历史对象的属性和方法

属性

history.length ：页面的个数
history.state ：值默认null
history.scrollRestoration ：滚动恢复属性

        // history属性
        console.log(history);
        // 页面的个数
        console.log(history.length);
        // 值 默认null
        console.log(history.state);
        // 滚动恢复属性
        console.log(history.scrollRestoration);

方法

forward 前进
back 后退
go 去任意页面
pushState 会新增历史页面，不会进行跳转
repaleceState 不会新增历史页面，会把当前页面进行替换，不会进行跳转

<html>

    <a href="http://www.baidu.com">去百度</a>
    <button id="forward">前进</button>
    <button id="back">后退</button>
    <button id="go">跳转</button>
    <button id="pushstate">pushstate</button>
    <button id="replacestate">replacestate</button>    
  
</html>

<script>

        //forward 前进
        document.getElementById('forward').onclick = function() {
                history.forward()
        }
        // back 后退
        document.getElementById('back').onclick = function() {
                history.back()
        }
        // 去任意页面
        document.getElementById('go').onclick = function() {
                // go()里面一个参数，-1是后退，1是前进，0是当页
                history.go()
        }
        // pushState  会新增历史页面，不会进行跳转
        document.getElementById('pushstate').onclick = function() {
                history.pushState('hello', "", './BOM的相关方法.html')
                console.log(history.state); //hello
                console.log(history.length);
        }
        //repaleceState 不会新增历史页面，会把当前页面进行替换，不会进行跳转
        document.getElementById('replacestate').onclick = function() {
            history.replaceState('你好', "", './BOM的相关方法.html')
            console.log(history.state); //你好
            console.log(history.length);
        }


</script>