从零开始学习前端JAVASCRIPT — 5、JavaScript基础BOM

1：BOM（Browser Object Model）概念

window对象是BOM中所有对象的核心。

2：window属性（较少用）

self：self代表自己，相当于window。　

window.self; //指向自身窗口

　　parent：返回父窗口。

window.parent //指向父元素的窗口

top：返回顶层窗口，和parent作用一样。

window.top
console.log(window.parent == window.top);

　　opener：窗口开启者。

console.log(window.opener);

3：window方法

1.window.open(url, name, feature, replace);

window.open('opener.html', 'open');//打开opener.html的页面，窗口的标题open

url：一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

name：一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。

这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。

feature：自行扩展。replace：自行扩展。

谷歌默认会把系统自动打开的新网页阻止掉，但不阻止通过事件打开新的网页。

2.close：关闭浏览器。（window.close()//关闭浏览器窗口）

但都支持通过别的网页打开的新的网页关闭。

3.alert(显示的文本)：弹出窗。（window.alert()//浏览器窗口弹框）

4.confirm(对话框提示的文字)：该方法有返回值，点击确定返回true，点击取消返回false。

console.log(window.confirm('今天下雪了吗？')); //点击确认输出true；点击取消输出false

5.prompt(提示信息)：输入框。点击确定返回字符串，点击取消返回null。

console.log(window.prompt('请问1+1等于几？'));
//弹出窗口有书写区域，返回值为输入的信息，若不填写为null

4：history对象

该对象包含浏览器窗口访问过的url。

1.属性

length 返回浏览器历史记录的数量

2.方法(使用以下方法返回网页history的记录不增不减)

back() 后退，加载前一个url。

forward() 前进。

go(number) 如果参数是正数，那么就是前进相应的数目，如果是负数那么反之，如果是0那么就是刷新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file1</title>
</head>
<body>
    <a href="file2.html">file2</a>
    <a href="file3.html">file3</a>
    <a href="file4.html">file4</a>
    <button id="back">回退到上一个页面</button>
    <button id="forward">前进到下一个页面</button>
    <button id="go">进两步</button>
    <script>
        console.log(history.length);
        var oBack = document.getElementById('back')
        oBack.onclick = function () {
            history.back()
        }

        var oForward = document.getElementById('forward')
        oForward.onclick = function () {
            history.forward()
        }

        var oGO = document.getElementById('go')
        oGO.onclick = function () {
            history.go(2)
        }
    </script>
</body>
</html>

页面一的代码