首页 > 代码库 > DOM基本对象
DOM基本对象
学习BOM到底能做什么?
通过BOM的学习,我们可以新建一个窗口,关闭窗口,调整窗口大小,改变窗口位置,弹出框,访问历史记录,获取浏览器相关信息等等
BOM编程
BOM核心对象是window对象,接下来的所有操作都是基于window对象,在JavaScript中,window对象是全局对象;
关于window对象属性和方法的调用:
window.属性名
window.方法名()
window.子对象名.属性名/方法名()
因为任何一个打开的窗口都是window对象,我们要操作window对象，那么要通过调用window对象的属性和方法或者子对象;
调用window对象的属性和方法以及子对象,不需要通过window也可以;
window.innerHeight --> innerHeight
window.alert() -->alert()
但是如果公司有严格的标准,要求加上window的话,不要省略;
| Window对象 | 属性/方法 |
| 三种弹出框 |
alert(任意类型参数) 带一条消息和确定按钮的弹出框,没有返回值 confirm(常用字符串参数[任意数据类型参数]) 带一条消息和确定,取消按钮的弹出框;这个方法反馈一个Boolean类型的值, 当点击确定按钮的时候返回true,否则返回false prompt(任意数据类型,[可选参数]) 带一条消息,一个输入框和确定取消按钮;如果点击确定,则返回输入框的内容, 如果点击取消,则返回null;如果有第二个参数,那么表示输入框的默认值是第二个参数; |
| scrollBy(x,y) | 把窗口按照指定像素滚动
x 表示向x轴滚动的像素数,在原有的基本出增加 y 表示向y轴滚动的像素数,在原有的基本出增加 |
| scrollTo(x,y) | 把窗口滚动到指定像素位置
可以实现点击按钮回到顶部; |
| open(url,窗口名称,窗口参数) |
新建一个新窗口 url: 表示新建的窗口的文件路径或网页地址; (页面文件 html) 窗口名称 : 给新建的窗口一个名称,是用来被超链接跳转的 窗口参数 : 用来设置窗口的宽/高/左边距/上边距 |
| close() | 关闭窗口 |
| moveBy(x,y) | 把窗口移动指定像素; |
| moveTo(x,y) | 把窗口移动到指定像素 |
| resizeBy(width,height) | 把窗口按照指定的像素改变大小 |
| resizeTo(width,height) | 把窗口调整到指定大小 |
| focus() | 让窗口获取焦点 |
| 定时器 | 1.setTimeout(fn,time) 延时型定时器
表示当延时time毫秒之后,执行一次函数,总共执行一次 2.setInterval(fn,time) 间隔性定时器 表示当每过time毫秒之后,执行一次函数,只要是没有暂停定时器,那么就一直执行; 3.clearTimeout(id) 清除延时定时器,参数id表示的是哪一个定时器 4.clearInterval(id) 清除间隔性定时器,参数id表示的是哪一个定时器 |
| innerHeight | 获取当前窗口显示内容区域的高度 |
| innerWidth | 获取当前窗口显示内容区域的宽度 |
| outerHeight | 获取当前窗口的整体高度 |
| outerWidth | 获取当前窗口的整体宽度 |
| name属性 | 获取当前窗口的name名称 |
| closed | 判断窗口是否已经关闭,如果已经关闭,返回true,否则返回false |
window 对象的子对象
History对象
Histroy是历史记录对象,包含了访问过的URL,而是本页面相关的历史记录;
length 获取历史记录里面的URL个数
方法:
forword() 访问下一个历史记录
back() 访问上一个历史记录
go(number) 访问历史记录里面指定的记录
如果go方法参数是-1,那么它的作用和back()一致
如果go方法参数是1.那么它的作用和forword()一致
Location对象
Location对象是地址栏对象,我们可以通过它获取一系列和地址相关的数据;
URL:
1.http协议
2.Ip地址和端口号
3.资源路径
Location对象的属性:
host 用来获取URL的ip地址及端口号
hostname 用来获取URL的ip地址
hash 用来获取URL的锚部分
href 用来获取整个URL的链接地址
port 用来获取URL的端口号
search 用来获取URL的查询部分
protocol 用来获取URL的协议
pathname 用来获取URL的资源路径
assign(url) 用新的参数重载当前页面
replace(url) 用新的参数替换当前页面
reload() 重新加载,相当于f5
assgin和replace的区别?
两者都是把当前页面给替换,当时assign()替换过后会生成历史记录,可以点击返回;但是replace()是直接替代了页面,没有历史记录,返回不了;
Screen对象
a) Screen对象是屏幕对象,scree的属性获取到的都是具体的数值;
b) availHeight 获取屏幕高度(不包含任务栏)
c) availWidth 获取屏幕宽度(不包含任务栏)
d) width 获取屏幕宽度
e) height 获取屏幕高度
f) colorDepth 获取颜色的比特深度
g) pixelDepth 获取每像素的位数;
Frames对象
a) Frames对象是框架对象,用来获取页面中的所有框架,返回值是一个数组;
Navigator对象
a) Navigator对象是浏览器对象
b) appCodeName 获取浏览器的代码名称,所有以Netscape代码为基础的浏览器,都是返回Mozilla,为了统一标准IE也是返回Mozilla
c) appName 获取浏览器的名称,所有浏览器都是返回Netscape,只是为了统一标准
d) appversion 获取浏览器的版本信息和操作平台;
e) platform 获取操作系统平台
f) userAgent 获取浏览器和服务器交互的头部信息;
g) cookieEnable 判断cookie是否启用;本地存储只能存储本地信息;cookie是浏览器和服务器交互的时候,用来相互传递的信息;
h) javaEnable() 判断指示浏览器是否支持并启用了 Java。如果是，则返回 true，否则返回 false。
Document对象
DOM基本对象