JavaScript 基础04-JS BOM

发表于 分类于 阅读次数：

BOM

1. 什么是BOM

Browser Object Model 浏览器对象模型

2. JavaScript 对象层次

2.1 对象种类

  • 自定义对象 Obejct
  • 内置对象 A/S/N/B/M/D/R/G
  • BOM 浏览器对象模型
  • DOM 文档对象模型

2.2 对象树 (倒树状结构)

1
2
3
4
5
6
7
8
9
                    window
                       |
history   location  document  screen   navigator
                        |
                doc       html
                           |
                    head         body
                      |           |
                mate  link      div p li  span ...

3. BOM 对象

3.1 window

  • 描述整个浏览器窗口的
  • 它是JS中 所有对象的根对象
  • 使用window的属性和方法时,可以省略window的调用
  • 自定义对象/变量/函数
  • 属性: 见手册
  • 方法:
    • setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
    • setTimeout() 在指定的毫秒数后调用函数或计算表达式。
    • clearInterval() 取消由 setInterval() 设置的 timeout。
    • clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
    • alert() 警告框
    • confirm() 确认框
    • prompt() 输入框
    • open() 打开新窗口
    • close() 关闭窗口,只能关闭自己打开过的窗口
    • print() 打印
    • srcollTo() 滚到哪去
    • srcollBy() 滚多少

3.2 history

  • 属性: length
  • 方法:
    • back()
    • forward()
    • go()

3.3 location

  • 属性:
    • href
    • protocol
    • hostname
    • host
    • pathname
    • search
    • hash
  • 方法:
    • reload()
    • assign()
    • replace()

3.4 screen

  • 属性
    • width 屏幕宽度
    • height 屏幕高度

3.5 navigator

window操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<h1>window</h1>
<hr>
<button onclick="run()">打个招呼</button>

<hr>
<button onclick="window.open()">打开一个新窗口</button>
<button onclick="window.open('http://www.163.com')">open : 163.com</button>
<button onclick="window.open('http://m.baidu.com','', 'width=300,height=600')">open(指定大小)</button>
<button onclick="window.open('http://m.toutiao.com','jianjian')">open(指定在哪个窗口打开)</button>


<button onclick="window.close()">关闭窗口</button>
<button onclick="window.print()">打印</button>

<script>
window.name = 'jianjian';


var obj = {name:"静静"}

console.log(obj);
console.log(window.obj);

var a = 110;
console.log(window.a);

function demo(){
    console.log('呆毛...');
}

window.demo();

// - alert()    警告框
// var a = alert('警告框');
// console.log(a); // undefined
// - confirm()  确认框
// var a = confirm('确认框');
// console.log(a); // true/false
// - prompt()   输入框
// var a = prompt('请输入您的银行卡密码:');
// console.log(a); // ...

// if (confirm('你喜欢球吗??')) {
//     alert('好巧,我也喜欢!');
// } else {
//     alert(prompt('为什么不喜欢???'));
// }

function run(){
    do {
        // 弹出输入框
        var name = prompt('您贵姓?');
        //  确认信息框
        var content = confirm('您输入的是: [ ' + name + ' ]\n,是否确认?');
    } while (!content);

    alert('Hi~ o(*￣▽￣*)ブ,  小'+ name+name);
}

</script>

history操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h1>history</h1>
<hr>

<button onclick="history.back()">上一步(后退)</button>
<button onclick="history.forward()">下一步(前进)</button>

<button onclick="history.go(1)">下一步</button>
<button onclick="history.go(-2)">上2步</button>

<script>
console.log(window.history);

console.log(history.length); // 当前本页面打开过的历史记录数量

</script>

location操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<h1>location</h1>
<hr>

<button onclick="location.reload()">刷新</button>

<!-- JS 跳转一个页面 -->
<button onclick="location.assign('http://acfun.cn')">assign</button>
<button onclick="location.replace('http://bilibili.com')">replace</button>
<button onclick="location.href='http://xiazaiav.com'">href</button>

<script>
// console.log(window.location);
console.log('URL: ' + location.href);

console.log('协议: ' + location.protocol);
console.log('主机名: ' + location.hostname);
console.log('主机名+端口号: ' + location.host);

console.log('路径: ' + location.pathname);
console.log('参数: ' + location.search);
console.log('锚点: ' + location.hash);

// location.href = 'http://acfun.cn';
// location.search = '?age=18';
location.hash = '#p18';



</script>

screen-navigator操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<h1>screen / navigator</h1>
<hr>


<script>
console.log(window.screen);
console.log(window.screen.availHeight);
 
console.log(window.navigator);
console.log(window.navigator.appVersion);
console.log(window.navigator.userAgent);

// 检测用户的终端设备

var browser = {
    versions: (function(){
        var u = navigator.userAgent;
        var app = navigator.appVersion; 
        return {
            trident: u.indexOf('Trident')     > -1,                                   // IE内核
            presto : u.indexOf('Presto')      > -1,                                   // Opera内核
            webKit : u.indexOf('AppleWebKit') > -1,                                   // 苹果谷歌内核
            gecko  : u.indexOf('Gecko')       > -1 && u.indexOf('KHTML') == -1,       // 火狐内核
            mobile : !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/),  // 是否为移动端
            ios    : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),                      // ios终端
            android: u.indexOf('Android')     > -1 || u.indexOf('Linux') > -1,        // android终端 或 uc浏览器
            iPhone : u.indexOf('iPhone')      > -1 || u.indexOf('Mac') > -1,          // 是否为iPhone 或 QQHD浏览器
            iPad   : u.indexOf('iPad')        > -1,                                   // 是否为iPad
            webApp : u.indexOf('Safari')      == -1                                   // 是否为web应用程序,没有头部和底部
        };
    })()
}

document.write('是否为移动端:' + browser.versions.mobile + '<br>');
document.write('是否为ios端:' + browser.versions.ios + '<br>');
document.write('是否为android终端:' + browser.versions.android + '<br>');
document.write('是否为chrome浏览器:' + browser.versions.webKit + '<br>');
document.write('是否为FireFox浏览器:' + browser.versions.gecko + '<br>');

</script>