浏览器常用对象概述

爱被打了一巴掌 2022-10-22 07:48 174阅读 0赞

### 文章目录 ###

*  一、window对象
 *  二、navigator对象
 *  三、screen对象
 *  四、location对象
 *  五、document对象
 *  六、history对象

# 一、window对象 #

在javascript中，一个浏览器窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象就是window对象的子对象

子对象

document	文档对象，用于操作页面元素
    location	地址对象，用于操作URL地址
    navigator	浏览器对象，用于获取浏览版本信息
    history	历史对象，用于操作浏览历史
    screen	屏幕对象，用于操作屏幕宽度高度

常用方法:

alert	提示对话框
    confirm	判断对话框
    prompt	输入对话框
    open()	打开窗口
    close()	关闭窗口
    setTimeout()	开启一次性定时器
    clearTimeout()	关闭一次性定时器
    setInterval	开启重复性定时器
    clearInterval	关闭重复性定时器

# 二、navigator对象 #

navigator对象表示浏览器的信息

navigator.appName：浏览器名称；
    navigator.appVersion：浏览器版本；
    navigator.language：浏览器设置的语言；
    navigator.platform：操作系统类型；
    navigator.userAgent：浏览器设定的User-Agent字符串。

// ios设备
    var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') ||                                            navigator.userAgent.match('iPod');
    // 安卓设备
    var isAndroid = navigator.userAgent.match('Android');
    // 微信内置浏览器
    var isWeChat = navigator.userAgent.match('MicroMessenger');

# 三、screen对象 #

screen对象表示屏幕的信息，常用的属性有

screen.width：屏幕宽度，以像素为单位；
    screen.height：屏幕高度，以像素为单位；
    screen.colorDepth：返回颜色位数，如8、16、24。

# 四、location对象 #

location对象表示当前页面的URL信息。

location.protocol; // 'http'
    location.host; // 'www.example.com'
    location.port; // '8080'
    location.pathname; // '/path/index.html'
    location.search; // '?a=1&b=2'
    location.hash; // 'TOP'
    要加载一个新页面，可以调用location.assign()。
    如果要重新加载当前页面，调用location.reload()方法

# 五、document对象 #

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

获得节点的属性:

document.doctype	第一个子节点，表示文档类型。对于html5文档来说，该节点就代表<!DOCTYPE html>
    document.documentElement	第二个子节点，表示元素节点，该节点代表<html>...</html>
    document.all	文档中所有的元素,例如html，head，title，body，script等,当出现多个相同的标签，如img也会重复显示
    document.head	获取文档中的head节点，<head>...</head>
    document.body	获取文档中的body节点，<body>...</body>
    document.forms	获取所有的form节点，是一个数组对象
    document.images	获取所有的img节点，是一个数组对象
    document.links	获取所有的a节点，是一个数组对象
    document.anchors	获取所有的包含属性name的a节点，是一个数组对象
    document.scripts	获取所有的script元素，是一个数组对象
    document.styleSheets	所有的link或者style元素，是一个对象,对象里面用下标区分每个cssstyleSheet，末尾是一个几个link或者style元素的length属性
    document.children	获取document的子节点，是一个对象数组，对于html5文档来说，该属性值为[html]
    document.activeElement	当前获得焦点的元素,如<body>...</body>

一些常见属性：

document.title	设置文档标题，等价于html的<title>标签
    document.bgColor	设置文档的背景颜色
    document.contentType	返回文档的类型，如“text/html”
    document.charset	设置文档的字符集
    document.lastModified	返回文档最近一次修改的时间
    document.cookie	设置和读取cookie
    document.domain	返回下载当前文档的服务器域名，一般跨域问题会用到该属性
    document.documentElement.clientHeight//获取屏幕可视区域的高度
    document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离

常用的一些方法:

document.write()	动态向页面写入内容
    document.writeln()	动态向页面写入内容，末尾加一个回车符
    document.open(mimetype,replace)	该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写，两个参数，mimetype,可选，规定正在写的文档的类型。默认值是 “text/html”；replace，可选，当此参数设置后，可引起新文档从父文档继承历史条目
    document.close()	关闭文档
    get…	document.getElementById(),document.getElementsByTagName(), document.getElementsByClassName(),…
    create…	document.createElement(), document.createEvent(), document.createAttribute()…
    on…	document.onClick(), document.onkeydown()…

服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。  
为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。

# 六、history对象 #

history对象跟踪用户访问的每一个页面，这个页面列表通常被称为历史栈，它允许用户单击浏览器的“前进”，“后退”按钮来重新访问页面，与JavaScript的数组对象类型相似，也拥有length属性，使用它可以获得历史栈的页面个数。

history对象有back()和go()方法，用户单击浏览器的“前进”，“后退”按钮来重新访问页面的功能就可以用back()和go()方法来实现。

使用：

//后退一页
    history.go(-1);
    //前进一页
    history.go(1);
    //前进两页
    history.go(2);
    //跳转到最近的wrox.com 页面
    history.go("wrox.com");
    //跳转到最近的nczonline.net 页面
    history.go("nczonline.net");
    //后退一页
    history.back();
    //前进一页
    history.forward();

[本文链接https://blog.csdn.net/qq\_39903567/article/details/115442959][https_blog.csdn.net_qq_39903567_article_details_115442959]

[https_blog.csdn.net_qq_39903567_article_details_115442959]: https://blog.csdn.net/qq_39903567/article/details/115442959