一. BOM概述
BOM使得JavaScript能与浏览器进行“对话”,主要是Window对象的操作
- History对象
- Location对象
- Document对象
二. Window对象
Window对象表示浏览器中打开的窗口
-
Window 对象是全局对象,可直接调用其方法和属性
-
Window对象的一些方法和属性可省略不写
注:通常把JavaScript程序写在window.onload 函数体中,目的是在窗口加载完成时再执行JavaScript代码;
window.onload = function () { // TODO CODE }
Window对象的常用属性:
属性名称 | 说明 |
---|---|
history | 用户(在浏览器窗口中)访问过的URL |
location | 用于窗口或框架的Location对象 |
screen | 对Screen对象的只读引用 |
status | 设置窗口状态栏的文本 |
document | 对Document对象的只读引用 |
三. history属性
history属性就是History对象的引用
方法:
- back():加载上一个浏览的文档
- forward():加载下一个浏览过的文档
- go(n):n为整数,跳转第n个浏览过的文档
- n==0 则刷新当前页面
- n>0 则向前跳转到第n个文档
- n<0 则向后跳转到第n个文档
四. location属性
location属性就是Location对象的引用
属性名称 | 说明 |
---|---|
host | 设置或返回主机名和当前URL的端口号 |
hostname | 设置或返回当前的URL的主机名 |
href | 设置或返回完整的url,可用于设置跳转 |
hash | 设置或返回从井号(#)开始的URL(锚) |
search | 设置或返回从问号(?)开始的 |
方法名称 | 说明 |
---|---|
reload() | 重新加载当前的文档,刷新页面 |
replace() | 新的文档替换当前文档 |
五. document属性
HTML DOM(文档对象模型):
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
每个载入浏览器的HTML 文档都会成为Document 对
象,利用它可对HTML页面中的所有元素进行访问
HTML DOM 模型被结构化为对象树:
注意:
- 浏览器在解析页面时,会自动为有id属性的标签创建对象,且对象名称就是id属性的值(前提是id都是唯一的)
1. 查找 HTML 元素
方法 | 描述 |
---|---|
document.getElementById(id) | 通过元素 id 来查找元素 |
document.getElementsByTagName(name) | 通过标签的 name 属性来查找元素 |
document.getElementsByTagName(name) | 通过标签名来查找元素 |
document.getElementsByClassName(name) | 通过标签的 class 属性来查找元素 |