JavaScript-8-操作BOM对象

JavaScript -> 操作BOM对象

1. 浏览器

• BOM：Browser Object Model，浏览器对象模型
• JavaScript 与 浏览器 的关系？
  • JavaScript的诞生就是为了能够在浏览器中运行
• 主流浏览器（内核）
  • IE6 ~ 11
  • Chrome
  • Safari
  • FireFox

2. 浏览器对象

2.1 window对象

• window对象可以表示浏览器窗口
• window对象有innerWidth和innerHeight、outerWidth和outerHeight属性，可以分别获取浏览器窗口的内部宽度和高度、外部宽度和高度

window.innerWidth
770
window.innerHeight
222
window.outerWidth
785
window.outerHeight
832

2.2 navigator对象

• navigator对象表示浏览器的信息
• 常用的属性包括：navigator.appName：浏览器名称；navigator.appVersion：浏览器版本；navigator.language：浏览器设置的语言；navigator.platform：操作系统类型；navigator.userAgent：浏览器设定的User-Agent字符串 等。

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36 Edg/88.0.705.56"
navigator.language
"zh-CN"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36 Edg/88.0.705.56"
navigator.platform
"Win32"

• 注意：navigator对象的信息很容易被人为修改，因此大多时候不会使用它

2.3 screen对象

• screen对象代表全屏幕的信息
• 常用的属性有screen.width：屏幕宽度；screen.height：屏幕高度；screen.colorDepth：返回颜色位数。

screen.width
1536 //px
screen.height
864
screen.colorDepth
24

2.4 location对象

• location对象表示当前页面的URL信息

location.href
"https://www.baidu.com/s?ie=UTF-8&wd=baidu"

location.protocol
"https:"
location.host
"www.baidu.com"
location.hostname
"www.baidu.com"
location.port
""
location.pathname
"/s"
location.search
"?ie=UTF-8&wd=baidu"
location.hash
""

• 重新加载当前页面/刷新网页

location.reload()

• 加载一个新的页面

location.assign('https://blog.csdn.net/baidu_38126306')

2.5 document对象

• document对象表示当前页面，HTML是以DOM树的形式表示的，

document.title
"百度一下，你就知道"
document.title='hello,wangjiao'
"hello,wangjiao"

• 用document对象提供的getElementById()可以按ID获得一个DOM树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var elementById = document.getElementById('app');
</script>    

• 用document对象提供的getElementByTagName()可以按Tag名称获得一组DOM树的节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var s, i;
    s = '';
    let elementsByTagName = document.getElementsByTagName('dd');
    for (i = 0; i < elementsByTagName.length; i++) {
        s = s + elementsByTagName[i].innerHTML + ',';
    }
    console.log(s);
</script>

JavaSE,JavaEE,

• document对象还有cookie属性，可以获取当前页面Cookie

document.cookie
"BIDUPSID=35E9638025516EF5D8915D18B52EC43E; PSTM=1598162360; BAIDUID=35E9638025516EF5D2DB728ED79CDDB9:FG=1; BD_UPN=12314753; Hm_lvt_aec699bb6442ba076c8981c6dc490771=1611671390; COOKIE_SESSION=18_2_4_2_8_11_0_0_2_3_68_2_520899_15245095_8_1_1611671332_1611671325_1611671324%7C7%2313508962_3_1611671324%7C2; BD_HOME=1; H_PS_PSSID=33423_33357_33272_31253_33585_26350; delPer=0; BD_CK_SAM=1; PSINO=2; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_645EC=a584Jd8p3Z2CYU%2BBaN7nUi%2FZIFWIwXFt9FFG8l2oiGKHw2qd%2F%2FLGLxVuDsk; BA_HECTOR=0l2001ah8h05ag8kip1g1o0jb0r"

• 劫持cookie原理：JavaScript可以读取到页面的Cookie，用户的登录信息通常保存在Cookie中，这存在安全隐患，因为在HTML页面中引入第三方的JavaScript代码是允许的。如果引入的第三方JavaScript中存在恶意代码，则www.foo.com网站将直接可以获取到www.taobao.com网站的用户登录信息。

  //当前页面：www.taobao.com
  <script src="http://www.foo.com/xx.js"></script>
  

• 为了解决这种document.cookie存在的安全隐患，服务器端在设置Cookie时，应使用httpOnly

2.6 history对象

• history对象保存了浏览器的历史纪录
• history对象的back()或forward()，相当于点击了浏览器的“后退”或“前进”
• 不建议使用