Day08 BOM

weixin_51421372

已于 2022-11-25 08:48:39 修改

阅读量191

点赞数

文章标签： javascript 前端 vue.js

于 2022-11-24 19:36:23 首次发布

本文链接：https://blog.csdn.net/weixin_51421372/article/details/128024968

版权

Day08 BOM

概述:

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

BOM的共有对象及相关的结构

在这里插入图片描述

window的相关属性及方法

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

tree 节点分类

元素节点 element
属性节点 attribute
文本节点 text

nodeName 节点名

nodeType 节点类型

1 元素节点 2 属性节点 3文本节点(空格也会被识别为文本节点) 8注释节点 #comment

 <div class="box" aaa="我是a" style="background-color:red ;">
        <!-- 我是注释 -->
        我 是<div></div>
    </div>
 //1 元素节点 2 属性节点 3文本节点(空格也会被识别为文本节点) 8注释节点 #comment
        var box = document.querySelector('.box')
        console.log(box.nodeName);//DIV
        console.log(box.nodeType);//1 元素节点

        //属性节点
        console.log(box.attributes);//NamedNodeMap {0: class, 1: style, class: class, style: style, length: 2}
        console.log(box.attributes[0].nodeType);//2
        console.log(box.attributes['class'].nodeType);//2
        console.log(box.attributes[0].nodeName);//class

        //文本节点
        console.log(box.childNodes[0].nodeType);//3
        console.log(box.childNodes[0].nodeName);//#text

        //注释节点
        console.log(box.childNodes[0].nodeType);//8
        console.log(box.childNodes[0].nodeName); //#comment

方法

控制台打印方法

console.log() ‘日志打印’

conso.error() ‘错误打印’

console.info() ‘信息打印’

console.warn() ‘警告打印’

console.debug() ‘调试打印’

//window的控制台打印方法
// window.console 表示浏览器的控制台
window.console.log('日志打印') //log表示日志
console.error('错误打印') //错误打印
console.info('信息打印') //信息打印
console.warn('警告打印') //警告
console.debug('调试打印') //调试

弹窗相关方法

alert() 提示框

prompt() 输入框

confirm() 交互框

window.alert('提示窗')//提示窗
var str = prompt('输入框') //输入框 点击确认返回输入的内容 点击取消返回null
console.log(str);
//交互框 返回一个true 确定 或者false 取消
var is = confirm('你确定要删除吗?')
console.log(is);

窗口打开关闭的方法
open 打开一个新的窗口

//打开窗口的url路径（url） 对应的打开方式（target） 对应的打开窗口的相关设置 （option）
// 第二个参数
// _self表示本页打开
// _blank表示新的页
// window.open() 不传参会打开一个无标题页面
// 传参 第三个参数的相关设置
// fullscreen 是否最大化打开。仅IE有效。
// height
// width
// top
// left
// location 是否显示地址栏
// scrollbars 内容在视口中显示不下，是否允许滚动
// status 是否显示状态栏
// toolbar 是否现在工具栏
// menubar 是否显示菜单栏
// resizable 是否可以通过拖拽浏览器边框改变窗口大小
window.open('http://www.baidu.com','_blank',"width=420,height=230,resizable,scro
llbars=yes,status=1")

close 关闭当前窗口

//关闭当前窗口
window.close()

改变窗口大小的方法

resizeTo 改变为对应的宽高
resizeBy 在原本的基础上增加对应的宽高

//直接改变大小到对应的宽高 w 100 h 100
window.resizeTo(100,100)
//在原本的基础上增加对应的宽高 w 300 h 300
window.resizeBy(200,200)

改变窗口位置的方法

moveTo 设置对应的位置

moveBy 在原本的位置增加对应的距离

//设置对应的位置 X 200 Y 2O0
window.moveTo(200,200)
//在原本的位置上增加对应的距离 X 300 Y 300
window.moveBy(100,100)

改变滚动栏位置的方法

scrollTo

scrollBy

//改变滚动栏位置的方法
//回到顶部 将对应的y变为0
//将对应的滚动栏移到对应的位置
window.scrollTo(500,500)
//在原本的基础上进行位置的变化
window.scrollBy(100,100)

打印方法

window.print()
//调用打印机

查找方法

find

//查找方法
windo.find()

窗口聚焦和失焦的方法

window.blur()失焦

window.focus()聚焦

//失去焦点
window.blur()
//聚焦
window.focus()

属性

获取窗口的父窗口 parent

window.parent //获得对应的父窗口

innerheight 获取高度 innerwidth 获取宽度

console.log(window.innerheight) //获取高度
console.log(window.innerwidth) //获取宽度

Document文档对象

document对象是属于BOM的组成部分,它里面的部分操作和属性属于DOM操作.
document表示的是对应的HTML文档,他是用于操作对应的html文档.

location 地址栏对象

属性

hash 获取#后面的值☆
search 获取?后面的值☆
port 端口号
protocol 协议
host 主机
hostname 主机名
pathname 路径地址
href 对应的url地址 *
origin 对应的跨域地址

//相关的属性
// hash: "" //hash获取对应的url里面#后面的内容 (包含#)
console.log(location.hash)
// host: "127.0.0.1:5500" //主机 ip地址 端口号 （域名）
console.log(location.host);
// hostname: "127.0.0.1" //主机名 对应的ip的相关名
console.log(location.hostname);
// href:
"
http://127.0.0.1:5500/location%E5%AF%B9%E8%B1%A1%E8%AE%B2%E8%A7%A3.html"
console.log(location.href) //url地址 全部链接地址
//href也可以进行赋值 他的赋值就是将对应的url地址 那么就会跳转页面
// location.href = 'http://www.taobao.com'
// origin: "http://127.0.0.1:5500" //跨域地址设置（协议 端口号 域名 三者有一个不一样不让
访问 产生跨域）
console.log(location.origin);
// pathname: "/location%E5%AF%B9%E8%B1%A1%E8%AE%B2%E8%A7%A3.html" //路径名 就是对
应的端口号后面的内容
console.log(location.pathname)//获取到文件名后缀结束
// port: "5500"
console.log(location.port) //端口号 1-65525 （1-100的端口一般不会占用 电脑对应的程序占
用了）
//浏览器http协议 走的时候80的端口 https协议走的时候 占443端口
// protocol: "http:
//协议 通信协议 用于通信的 常见的通信相关协议 tcp（网络传输 http（不安全） https（安全））
连接 udp 快递点
console.log(location.protocol);
// search 获取?后的内容
console.log(location.search);
//一般在书写对应的地址的时候 我们一般是不会共有#和? 如果需要共有先写?后面再接#

方法

reload 重新加载

//相关的方法
// reload 重新加载 刷新
// location.reload()
//里面可以传递一个boolean类型的值 true 表示从服务器重新加载（慢） false 从本地缓存中加载（快）
location.reload(false)

assign 指定对应的地址跳转(有历史)

//指定跳转对应的地址 有历史记录
location.assign('http://www.baidu.com')

replace 替换当前的地址进行跳转(没有历史)

//替换当前的地址进行跳转
location.replace('http://www.baidu.com')

对应的href 进行赋值也可以跳转

//原理类型与a href=''
location.href='http://www.baidu.com'

location直接赋值也可以跳转

//有历史地址
location='http://qq.com'

history 历史对象☆

概述:history他里面包含了对应的历史页面,他是对于历史页面进行相关操作（页面替换，页面的跳转）

属性

length属性 (历史页面个数)

state属性 (状态储存对应的值)☆

scrollRestoration （滚动栏恢复行为 auto、 manual）

console.log(history.length);//历史页面个数
console.log(history.state);//state状态 他里面可以存储对应的数据 默认请求为null
console.log(history.scrollRestoration);//滚动的位置恢复行为 默认为auto keep-alive的底
层实现之一
// auto
// 将恢复用户已滚动到的页面上的位置。
// manual
// 未还原页上的位置。用户必须手动滚动到该位置。

方法

forward 前进

history.forward() //前进

back 回退

history.back()  //回退

go 去任意的页面

history.go(2) //去第二页 去任意历史页面 传递值一定为整数 当前页面的值为0 比0大就是前进 比0就后退

pushState(state的值（可以是任意类型的数据）名字（建议空值） url地址)

//改变当前的url地址(并不会进行跳转 不会刷新操作) state的值（可以是任意类型的数据） 名字（建议空值） url地址
history.pushState('hello','','./history讲解.html') //会产生跨域
//pushState 如果传入对应的url 他会改变对应的url地址 （并非跳转）
//pushState 会新增对应的历史页面
//pushState 会给对应的state进行赋值

replaceState

history.replaceState('您好','','./history讲解.html')
//replaceState 不会新增新的历史页面 把当前历史页面进行替换
//replaceState 也会改变对应的url地址 也不会进行跳转（刷新）
//replaceState 也会改变对应的state的值
console.log(history.length);
console.log(history.state);

pushState或者是replaceState 如果传入对应的url 他会改变对应的url地址（并非跳转不会刷新）
pushState或者replaceState 会给对应的state进行赋值
pushState 会新增对应新的历史页面 replaceState 不会新增（他会替换当前历史页面）

Screen 屏幕对象

属性

width 屏幕的宽度
height 屏幕高度
availHeight 可占用的最大屏幕高度
availWidth 可占用的最大屏幕宽度
availLeft 可占用的空间离桌面的左边距离
availTop 可占用的空间离桌面的上边距离

console.log(screen.width);//获取屏幕宽度
console.log(screen.height);//获取屏幕的高度
console.log(screen.availHeight);//可占用的最大高度
console.log(screen.availWidth);//可占用的最大宽度
console.log(screen.availLeft);//表示当前可占用空间离左边的距离
console.log(screen.availTop);//表示当前可占用空间离上面的距离

Navigator 导航对象

概述：他主要是用于获取用户浏览器及系统相关的设置以及内容

属性
userAgent 表示当前用户的系统信息以及对应的浏览器信息

console.log(Navigator.userAgent);

路由（扩展）

路由的核心就是分发，将对应的内容分发对应的路由地址。

前端路由（渲染）

根据对应的路由地址来渲染不同页面

前端路由的分类

页面路由（会进行页面的跳转页面会刷新）

	location.href = 'http://www.baidu.com'
location.assign('http://www.baidu.com')
location.replace('http://www.baidu.com')

hash路由（根据对应的hash值来渲染对应的页面不会进行页面的刷新操作）

//hash值得改变
window.onhashchange = function(){
console.log('hash值变化了');
document.write(location.hash)
}

history路由（根据对应的地址的变化而渲染对应的页面不会进行页面的刷新操作）
1.需要对应得pushState调用或者replaceState调用
2.在改变了对应得state值以后调用对应得forward方法或者是back方法或者是go方法

//其实他得内核还是根据对应得地址得变化 而渲染不一样的内容
window.onpopstate = function(){
console.log('路由触发了');
}

SPA 单页应用程序（只有一个页面）里面常用的路由是hash以及history路由

扩展补充内容
在对应的单页应用程序中我们常用vue和react等框架来进行开发，这就导致了我们对应的vue和react中
对应的路由模式常用hash模式及history模式（默认设置的路由模式都是hash模式）
后端路由（业务）
根据对应的路由地址来处理不同的业务（访问不同的接口）

weixin_51421372

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫