1、浏览器介绍

B/S:浏览器/操作器

BOM:浏览器对象模型

  • IE 6~11
  • Chrome (windows)
  • Safari ( IOS)
  • FireFox (Linux)

第三方浏览器

  • QQ浏览器
  • 360浏览器

2、window (重要)

Window 代表 浏览器窗口

//如果真的需要获取浏览器分辨率 建议使用screen
//inner内部
window.innerHeight
692
window.innerWidth
1920
//out外部
window.outerHeight
1064
window.outerWidth
1904
//可以去调整浏览器窗口试试。。。

3、Navigator(不建议使用)

Navigator,封装了浏览器的信息

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

大多数时候,我们不会去使用navigator对象,因为会被人为修改!

Navigator!=navigator

Navigator是方法 navigator是对象

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

4、screen

代表屏幕尺寸

screen.height
1080 px
screen.width
1920 px

5、location(重要!!)

host: "www.bilibili.com"  //主机
href: "https://www.bilibili.com/video/BV1JJ41177di?p=19" // 指向的位置
protocol: "https:"  //协议
reload: ƒ reload()  //刷新网页
location.assign('https://www.baidu.com/') //跳转网页

6、document (内容:DOM)

document  代表当前的页面,HTML  DOM文档树
document.title
"百度一下,你就知道"
document.title = '你不知道'
"你不知道"

获取具体的文档树节点(从这开始你就会认识到选择器的重要性了)

<dl id="app">
    <dt>java</dt>
    <dd>陈捷</dd>
    <dd>李泽群</dd>
</dl>
    <div id="reset">
        <span id="an1">链接1</span>
        <span class="an2">链接2</span>
        <span class="an3">链接3</span>
        <span class="an4">链接4</span>
        <span class="an5">链接5</span>
    </div>
<script >
    'use strict'
    var d = document.getElementById('reset');
    var dd = document.getElementById('app');
    var d1 = document.getElementById('an1');
    var d2 = document.getElementsByClassName('an2');
    var d3 = document.getElementsByClassName('an3');
    var d4 = document.getElementsByClassName('an4');
</script>
cookie

cookie是客户端的本地信息(这些信息会发送到服务器)
获取cookie

document.cookie
"_uuid=CB863AE0-CED0-1B6F-C139-101EB45B90CC15976infoc; buvid3=D5E36E45-D8CD-446C-8C43-DDB7E8D72C98143072infoc;
 CURRENT_FNVAL=80; Hm_lvt_8a6e55dbd2870f0f5bc9194cddf32a02=1605326025; blackside_state=1; 
rpdid=|(k|k)u)JuJJ0J'uY|lJk~Rk); DedeUserID=306462698; DedeUserID__ckMd5=89a7c442ed51c2f8;     
bili_jct=25a128270370790321121fa0a0ff1990; bp_t_offset_306462698=458233844681301611; 
bp_video_offset_306462698=458229687148742469; finger=158939783; sid=izhcvea2; PVID=3"

劫持cookie原理
https://www.tmall.com/ 天猫
https://www.taobao.com/ 淘宝

当你同时打开天猫和淘宝的网页,在淘宝登录,刷新天猫网站你会发现你的天猫也登录了,这就是为什么很多人劫持cookie,因为他和获取的你账户,去做一些你不知道的事情。

<script src="aa.js"></script>
<!--恶意人员:获取你的cookie上传到他的服务器-->
解决方法:服务器端可以设置cookie:httpOnly    //让cookie只读
history(不建议使用)

history : 代表浏览器的历史纪录(浏览器前进后退就是这样实现的)

history.back() //后退
history.forward() //前进

最后修改:2021 年 10 月 15 日
如果觉得我的文章对你有用,请随意赞赏