JS 入门之 BOM

（HTML DOM 的）document 对象也是 window 对象属性。
在浏览器中，window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象（通过 var 声明的所有全局变量和函数都会成为 window 对象的属性和方法）。

窗口尺寸（属性）

outerHeight 属性和 outerWidth 属性

outerHeight 属性返回浏览器窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。

outerWidth 属性返回浏览器窗口的外部宽度，包括所有界面元素（如工具栏/滚动条）。

outerHeight 属性和 outerWidth 属性是只读的。

innerHeight 属性和innerWidth 属性

innerHeight 属性返回窗口内容区域的高度。

innerWidth 属性返回窗口内容区域的宽度。

innerHeight 属性和 innerWidth 属性是只读的。

窗口方法

window.open() —— 打开新窗口
window.close() —— 关闭当前窗口

window.open()

open() 方法会打开新的浏览器窗口或新选项卡，具体取决于浏览器设置和参数值。

语法：

window.open(url, name, features, replace)

/*
    url
        可选。要打开的页面的 URL。
        如果未指定 URL，则会打开一个新的空白窗口或选项卡。

    name
        可选。target 属性或窗口的名称。
        支持以下值：
            _blank：URL 被加载到新窗口或选项卡中。默认。
            _parent：URL 被加载到父框架中。
            _self：URL 替换当前页面。
            _top：URL 替换任何可能加载的框架集。
            name：窗口的名称（不指定窗口的标题）。

    features
        可选。以逗号分隔的项目列表（无空格）。
            支持以下值：
                height=pixels —— 窗口的高度。最小值为100。
                width=pixels —— 窗口的宽度。最小值为100。
                ... ...

    replace
        已弃用。
        Chrome 在使用 replace 参数时会抛出异常。

实例：

window.open("https://www.baidu.com/","_self");

window.close()

close() 方法关闭窗口。

Document 对象（HTML DOM）

HTML DOM Element scrollTop 属性

scrollTop 属性设置或返回元素内容垂直滚动的像素数。

语法：

/* 返回 scrollTop 属性 */
element.scrollTop
/*
    返回值类型：数字，表示元素内容垂直滚动的像素数
*/

/* 设置 scrollTop 属性 */
element.scrollTop = pixels
/*
    pixels：元素内容垂直滚动的像素数
            如果该数字为负数，则该数字设置为 0
            如果元素无法滚动，则该数字设置为 0
            如果该数大于允许的最大值，则将该数设置为最大值
*/

HTML DOM Element scrollLeft 属性

scrollLeft 属性设置或返回元素内容水平滚动的像素数。

语法：

/* 返回 scrollLeft 属性 */
element.scrollLeft
/*
    返回值类型：数字，表示元素内容水平滚动的像素数
*/

/* 设置 scrollLeft 属性 */
element.scrollLeft = pixels
/*
    pixels：元素内容水平滚动的像素数
            如果该数字为负数，则该数字设置为 0
            如果元素无法滚动，则该数字设置为 0
            如果该数大于允许的最大值，则将该数设置为最大值
*/

HTML DOM Element offsetWidth 属性

offsetWidth 属性返回元素的可视宽度（以像素为单位），包括内边距、边框和滚动条，但不包括外边距。

offsetWidth 属性是只读的。

HTML DOM Element offsetHeight 属性

offsetHeight 属性返回元素的可视高度（以像素为单位），包括内边距、边框和滚动条，但不包括外边距。

offsetHeight 属性是只读的。

HTML DOM Element clientWidth 属性

clientWidth 属性返回元素的可视宽度（以像素计），包括内边距，但不包括边框、滚动条或外边距。

clientWidth 属性是只读的。

HTML DOM Element clientHeight 属性

clientHeight 属性返回元素的可视高度（以像素计），包括内边距，但不包括边框、滚动条或外边距。

clientHeight 属性是只读的。

Screen 对象

window.screen 对象包含用户屏幕的信息。

window.screen 对象可以不带 window 前缀。

属性：

screen.width —— 返回以像素计的访问者屏幕的宽度
screen.height —— 返回以像素计的访问者屏幕的高度
screen.availWidth —— 返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征
screen.availHeight —— 返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征
screen.colorDepth —— 返回用于显示一种颜色的比特数
screen.pixelDepth —— 返回屏幕的像素深度

Location 对象

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

window.location 对象可以不带 window 前缀。

属性：

location.href —— 返回当前页面的 href（URL）
location.hostname —— 返回 web 主机的域名（返回当前页面的因特网主机的名称）
location.pathname —— 返回当前页面的路径或文件名
location.protocol —— 返回页面的 web 协议（http: 或 https:）
location.port —— 返回当前页面的互联网主机端口的编号

方法：

location.assign() —— 加载新文档

History 对象

window.history 对象包含浏览器历史。

window.history 对象可以不带 window 前缀。

为了保护用户的隐私，JavaScript 访问此对象存在限制。

方法：

history.back()
history.forward()

history.back()

history.back() 方法加载历史列表中前一个 URL。

这等同于在浏览器中点击后退按钮。

history.forward()

history.forward() 方法加载历史列表中下一个 URL。

这等同于在浏览器中点击前进按钮。

Navigator 对象

window.navigator 对象包含有关访问者的信息。

window.navigator 对象可以不带 window 前缀。

属性：

navigator.cookieEnabled —— 如果 cookie 已启用，返回 true；否则返回false
navigator.appName —— 返回浏览器的应用程序名称
navigator.appCodeName —— 返回浏览器的应用程序代码名称
navigator.product —— 返回浏览器引擎的产品名称
navigator.appVersion —— 返回有关浏览器的版本信息
navigator.userAgent —— 返回由浏览器发送到服务器的用户代理报头（user-agent header）
navigator.platform —— 返回浏览器平台（操作系统）
navigator.language —— 返回浏览器语言
navigator.onLine —— 假如浏览器在线，则返回 true

方法：

navigator.javaEnabled() —— 如果 Java 已启用，则返回true

弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。

警告框

如果要确保信息传递给用户，通常会使用警告框。

当警告框弹出时，用户将需要单击“确定”来继续。

语法：

window.alert("sometext");

// window.alert() 方法可以不带 window 前缀
alert("sometext");

确认框

如果您希望用户验证或接受某个东西，则通常使用确认框。

当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。

如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。

语法：

window.confirm("sometext");

// window.confirm() 方法可以不带 window 前缀
confirm("sometext");

提示框

如果您希望用户在进入页面前输入值，通常会使用提示框。

当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续执行。

如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

该框返回的输入值的数据类型是字符串。

用户没有输入任何内容直接点击确定将会返回空字符串（''）。

语法：

window.prompt("sometext","defaultText");

// window.prompt() 方法可以不带 window 前缀
prompt("sometext","defaultText");

弹出框折行

如需在弹出框中显示折行，请在反斜杠后面加一个字符 n。

计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScript 中使用计时事件是很容易的，两个关键方法是：

setInterval() —— 间隔指定的毫秒数不停地执行指定的代码
setTimeout() —— 在指定的毫秒数后执行指定代码

setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码。

语法：

window.setInterval(function,milliseconds);

// window.setInterval() 方法可以不带 window 前缀
setInterval(function,milliseconds);

第一个参数是要执行的函数。

第二个参数是每个执行之间的时间间隔的长度（以毫秒计）。

注：

1秒是1000毫秒。

clearInterval() 方法

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

语法：

window.clearInterval(timerVariable);

// window.clearInterval() 方法可以不带 window 前缀
clearInterval(timerVariable);

clearInterval() 方法使用从 setInterval() 返回的变量：

myVar = setInterval(function,milliseconds);
cleatInterval(myVar);

setTimeout() 方法

setTimeout() 在指定的毫秒数后执行指定代码。

语法：

window.setTimeout(function,milliseconds);

// window.setTimeout() 方法可以不带 window 前缀
setTimeout(function,milliseconds);

第一个参数是要执行的函数。

第二个参数指示执行之前的毫秒数。

clearTimeout() 方法

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

语法：

window.clearTimeout(timeoutVariable);

// window.clearTimeout() 方法可以不带 window 前缀
clearTimeout(timeoutVariable);

clearTimeout() 使用从 setTimeout() 返回的变量：

myVar = setTimeout(function,milliseconds);
clearTimeout(myVar);

Cookies

Cookie 让您在网页中存储用户信息。

什么是 Cookie

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

当用户访问网页时，他的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他的名字。

Cookie 保存在名称值对中，如：

username = Bill Gates

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

通过 JavaScript 创建 cookie

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

您还可以添加有效日期（UTC时间）。默认情况下，在浏览器关闭时会删除 cookie。

document.cookie = "username=Bill Gates; expires=Thu, 18 Dec 2043 12:00:00 GMT";

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

通过 JavaScript 读取 cookie

通过 JavaScript，可以这样读取 cookie：

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

通过 JavaScript 改变 cookie

通过使用 JavaScript，你可以像创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧 cookie 被覆盖。

通过 JavaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值。

直接把 expires 参数设置为过去的日期即可。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

您应该定义 cookie 路径以确保删除正确的 cookie。

如果你不指定路径，一些浏览器不会让你删除 cookie。

document.cookie 属性看起来像一个正常的文本字符串。但它不是。

即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。

如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：

cookie1=value; cookie2=value; cookie3=value;

如果你想找到一个指定 cookie 的值，你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。

起啥名呢？？？

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 入门之 BOM

BOM：Browser Object Model，是指浏览器对象模型。浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成，其中代表浏览器窗口的 Window 对象是 BOM 的顶层对象，其它对象都是该对象的子对象。Cookie 是在您的计算机上存储在小的文本文件中的数据。当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。当用户访问网页时，他的名字可以存储在 cookie 中。下次用户访问该页面时，cookie 会“记住”他的名字。
复制链接

扫一扫