window、location、document浏览器对象等用法 JavaScript边学边记（七）

没有详细的了解之前，可能会有这样的疑问。

• 为什么我使用VS Code运行js的时候，可以调用console方法，但是不能调用alert方法？
• 为什么相同的<input type="file"/>标签、在不同的浏览器下展示效果不一样？

其原因都是一点：有些方法、有些实现是浏览器提供的。只有在浏览器中通过JavaScript调用浏览器才会调用。

浏览器对象

Js可以获取浏览器提供的很多对象并进行操作。

window 不但充当全局作用域、而且表示浏览器窗口

常用属性	说明
window.innerWidth	浏览器窗口的内部宽度
window.innerHeight	浏览器窗口的内部高度
window.outerWidth	浏览器窗口宽度
window.outerHeight	浏览器窗口高度

内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高

navigator 浏览器信息

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

• 有时为了支持浏览器的兼容性，需要判断当前浏览器是否为IE浏览器。会根据浏览器信息使用不同语法获取属性。但此属性很容易修改，所以并不准确。
• eg。 不同浏览器获取宽度用法： var width = window.innerWidth || document.body.clientWidth;

screen 屏幕信息

常用属性	说明
screen.width	宽度
screen.height	高度
screen.colorDepth	返回颜色位数，16、24

location 当前页面的URL信息

常用属性	说明
href	完整URL
protocol	协议 ，http或https
host	域名
port	端口
pathname	路径
search	参数
hash	锚点 （# 后内容）

• 加载新页面： localtion.assign(“网址”);
• 重新加载当前页： location.reload();

document 当前页面对象、HTML在浏览器中以DOM形式表示为树形结构

document为整个DOM的根节点、查找某个DOM节点，从document对象开始查找：

getElementById()  根据Id获取一个DOM节点
getElementByTagName()  按Tag名称获取一组DOM节点
getElementByClassName() 根据class类型获取一组DOM节点
getElementByName()   根据name获取一组DOM节点

history 浏览器的历史记录，不建议使用。back()、forward()