操作BOM对象

浏览器介绍

JavaScript和浏览器关系?
JavaScript 诞生就是为了能够让他在浏览器中运行!
BOM:浏览器对象模型

  • IE 6~11
  • Chrome
  • Safari
  • FireFox

三方

  • QQ浏览器
  • 360浏览器

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
150
window.innerWidth
1366
window.outerHeight
728
window.outerWidth
1366

Navigator

Navigator封装了浏览器的信息

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

大多数时候,我们不会使用navigator对象,因为会被人为修改!
不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1366
screen.height
768

location(重要)

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()  // 刷新网页
// 设置新的地址
location.assign('https://leetcode-cn.com/')

document

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

document.title
'百度一下,你就知道'
document.title='test'
'test'

获取具体的文档树节点

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

获取cookie

document.cookie
'BIDUPSID=F111AB30F65EB4E1E0342F372695E38B; PSTM=1627910140; BAIDUID=F111AB30F65EB4E10C9E16CB025D7321:FG=1; BD_UPN=12314753; sugstore=0; BDSFRCVID=ECkOJeC62GIgT8RD0vH3U9b14bX6x0JTH6aoFy-ptJS8tECpy_bTEG0PSx8g0Ku-MSrBogKKL2OTHmuF_2uxOjjg8UtVJeC6EG0Ptf8g0f5; H_BDCLCKID_SF=JbFtVCD-JIv-jttkMJQE2tcH-UnLqMQm22OZ0l8Ktq3zeU-90x825xvy3HraJ63ayncOopcmWIQHDpQwqJ3MylJb5-ombncdKHn4KKJxL-PWeIJo5DcY0nDYhUJiBMAHBan7W45IXKohJh7FM4tW3J0ZyxomtfQxtNRJ0DnjtnLhbRO4-TFhejQX3f; channel=baidusearch; BAIDUID_BFESS=F111AB30F65EB4E10C9E16CB025D7321:FG=1; BD_HOME=1; delPer=0; BD_CK_SAM=1; PSINO=3; baikeVisitId=40b526ee-78a7-4f9e-9354-aaa0bb0d89bd; COOKIE_SESSION=35_0_7_7_2_6_1_0_7_4_950_0_33_0_0_0_1644464677_0_1644663862%7C9%232495816_60_1644404682%7C9; H_PS_PSSID=35104_35761_35488_34584_35491_35840_35796_35323_26350_35746; H_PS_645EC=88f1NdTnQerTXKt0YsvO6g%2FztUKttZ%2F9zKjBBrjo%2FtTh7luo58J5EoSA7ao; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; __sec_t_key=1f6bfee5-5caf-4324-8cd8-f2fe4d770da1; BA_HECTOR=84a50g84a104a48k2p1h0kbu40r'

劫持cookie原理
www.taobao.com

<script src="aa.js"></script>
<!--恶意人员:获取你的cookie上传到他的服务器-->

服务器端可以设置cookie:httpOnly

history

history代表浏览器的历史记录

history.back()  // 后退
history.forward()  // 前进
上一篇:js-bom


下一篇:前端入门JavaScript-----BOM基本操作(下)