JS-BOM

操作BOM(重点)

  1. 浏览器介绍

JavaScript的诞生就是为了能够让他在浏览器中运行的

BOM:浏览器对象模型

  • IE

  • Chrome

  • Safari

  • FireFox

这些是浏览器的内核,而QQ浏览器、360浏览器这些第三方浏览器是使用了这些内核

  1. window(重要)

window代表浏览器窗口

window.alert('好耶');
undefined
window.innerHeight;
328
window.innerWidth;
1536
window.outerHeight;
824
window.outerWidth;
1536
  1. Navigator(不建议使用)

Navigator是网景公司研发的第一代浏览器,他封装了浏览器的信息

navigator.appName;
"Netscape"
navigator.appVersion;
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 Edg/90.0.818.66"
navigator.userAgent;
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 Edg/90.0.818.66"
navigator.platform;
"Win32"

多数时候都不会去使用navigator对象,因为这个属性会被认为修改。

不建议使用这些属性来判断和编写代码

  1. screen(使用较多)

代表屏幕的尺寸

screen.height;
864
screen.width;
1536
  1. location(重要)

location代表了当前页面的URL信息

host: "localhost:63342"//主机
href: "http://localhost:63342/JS/javaScript/5.%E5%AF%B9%E8%B1%A1%E8%AF%A6%E8%A7%A3/index.html?_ijt=rvlrm3pnhd7jqepvr0ql48cpe"//当前指向的位置
protocol: "http:"//协议
reload: ƒ reload()//重新加载,就是刷新
location.assign('https://baidu.com/')//设置新地址
  1. document

document代表当前页面,DOM文档树

document.title;
"百度一下,你就知道"
document.title='哔哩哔哩';
"哔哩哔哩"

可以用来获取问具体的文档树节点

<dl id="app">
   <dt>Java</dt>
   <dd>JavaSE</dd>
   <dd>JavaEE</dd>
</dl>
let dl=document.getElementById('app');

获取cookie

document.cookie
"_uuid=D185055D-64DF-B73C-5E2F-B2576B07053F93307infoc; buvid3=8982B0C3-5253-4F15-A5AF-E62ACA4B304E138397infoc; DedeUserID=24072505; DedeUserID__ckMd5=100c49a8636fae01; CURRENT_FNVAL=80; rpdid=|(um~kuR)J)k0J'uY|JRkRYJJ; LIVE_BUVID=AUTO2216035338255081; CURRENT_QUALITY=116; fingerprint3=852f6a6ad16dc35445777f46fa271948; fingerprint=2694cf5dbe0b62685b54ed7968af58a4; buivd_fp=8982B0C3-5253-4F15-A5AF-E62ACA4B304E138397infoc; buvid_fp_plain=8982B0C3-5253-4F15-A5AF-E62ACA4B304E138397infoc; fingerprint_s=cd1464f797f9b824d37f945290d82d5b; buvid_fp=8982B0C3-5253-4F15-A5AF-E62ACA4B304E138397infoc; bili_jct=1bda783b6380fc4d8dc956ad5f1b9dc3; sid=i8vbij7q; blackside_state=1; bp_t_offset_24072505=527270066670760895; bp_video_offset_24072505=528514417476093603; PVID=18"
//获取的是客户端的本地信息

但是使用这种方法并不安全,会被恶意劫持,在服务器端口可以设置cookie,使用httpOnly

  1. history(不推荐使用)

history就是代表浏览器的历史

history.back()//返回
history.forward()//前进

 

上一篇:Myabtis动态SQL,你真的会了吗?


下一篇:BOM简介