作为前端这些你不能不知道--浏览器基础篇

浏览器对象BOM与 DOM
BOM 也就是浏览器对象模型（Browser Object Model）
先上图：

BOM ???

• BOM是Browser Object Model的简写，既浏览器对象模型。
• BOM由一系列对象组成，是访问、控制、修改客户端(浏览器)的属性的方法。
• BOM没有统一的标准(每种客户端都可以自定标准)。
• BOM的顶层是window对象(BOM对象模型见上图)。

DOM ???

• DOM是Document Object Model的简写，既文档对象模型。
• DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。
• DOM是跨平台与跨语言的。
• DOM用于XHTML、XML文档的应用程序接口(API)。
• DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。
• DOM标准是由w3c制定与维护的 。
• DOM的顶层是document对象。

window 对象：

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成 员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一
1. Window 尺寸

window.innerHeight // - 浏览器窗口的内部高度
window.innerWidth // - 浏览器窗口的内部宽度
var w=window.innerWidth
//ie8 及其以下，下面写法兼容所有浏览器
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

1. window.open() - 打开新窗口
2. window.close() - 关闭当前窗口
3. window.moveTo() - 移动当前窗口
4. window.resizeTo() - 调整当前窗口的尺寸

window.navigator

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

<div id="navigator"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("navigator").innerHTML=txt;
</script>

window.location 对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.hash //如果URL包含#，该方法将返回该符号之后的内容
location.host //服务器的名字（如www.mcdnf.com）
location.hostname //通常等于host，有时会省略前面的www
location.href //当前载入的页面的完整URL
location.pathname //URL中的主机名后面的部分
location.port //返回 web 主机的端口 （80 或 443）
location.protocol //返回所使用的 web 协议（http:// 或 https://）
location.search //执行GET请求的URL中的问号后面的部分（查询字符串）
location.assign() //方法加载新的文档。
location.assign('http://www.mcdnf.com/')//运行时当前页面会被替换为：http://www.mcdnf.com
location.replace('http://www.mcdnf.com/') //同assign()方法一样，只不过从浏览器历史中删除包含脚本的页面，这样就不能通过浏览器的后退和前进按钮访问它。

window.document

属性

属性	描述
activeElement	获取当父 document 拥有焦点时获得焦点的对象。
alinkColor	设置或获取元素中所有激活链接的颜色。
bgColor	不赞成。设置或获取表明对象后面的背景颜色的值。
charset	设置或获取用于解码对象的字符集。
cookie	设置或获取 cookie 的字符串值。
defaultCharset	从当前的区域语言中获取默认字符集。
designMode	设置或获取表明文档是否可被编辑的值。
dir	设置或获取表明对象的阅读顺序的值。
doctype	获取与当前文档关联的文档类型声明。
documentElement	获取对文档根结点的引用。
domain	设置或获取文档的安全域名。
expando	设置或获取表明是否可对象内创建任意变量的值。
fgColor	设置或获取文档的前景(文本)颜色。
fileCreatedDate	获取文件创建的日期。
fileModifiedDate	获取文件上次修改的日期。
fileSize	获取文件大小。
implementation	获取当前文档的 implementation 对象。
lastModified	获取页面上次修改的日期，若页面提供的话。
linkColor	设置或获取对象文档链接的颜色。
parentWindow	获取容器对象所在窗口的引用。
protocol	设置或获取 URL 的协议部分。
readyState	获取表明对象当前状态的值。
referrer	获取将用户引入当前页面的位置 URL。
uniqueID	获取为对象自动生成的唯一标识符。
URL	设置或获取当前文档的 URL。
URLUnencoded	获取文档的 URL，去除所有字符编码。
vlinkColor	设置或获取用户已访问过的链接颜色。
XMLDocument	获取对由对象引出的的 XML 文档对象模型(DOM)的引用。
XSLDocument	获取对 XSL 文档的顶层结点的引用。

集合

属性	描述
all	返回对象所包含的元素集合的引用。
anchors	获取所有带有 name 和/或 id 属性的 a 对象的集合。此集合中的对象以 HTML 源顺序排列。
applets	获取文档中所有 applet 对象的集合。
childNodes	获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
embeds	获取文档中所有 embed 对象的集合。
forms	获取以源顺序排列的文档中所有 form 对象的集合。
frames	获取给定文档定义或与给定窗口关联的文档定义的所有 window 对象的集合。
images	获取以源顺序排列的文档中所有 img 对象的集合。
links	获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合。
namespaces	获取 namespace 对象的集合。
scripts	获取文档中所有 script 对象的集合。
styleSheets	获取代表与文档中每个 link 或 style 对象的实例相对应的样式表的 styleSheet 对象的集合。

事件

属性	描述
onactivate	当对象设置为活动元素时触发。
onbeforeactivate	对象要被设置为当前元素前立即触发。
onbeforecut	当选中区从文档中删除之前在源对象触发。
onbeforedeactivate	在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus	在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste	在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onclick	在用户用鼠标左键单击对象时触发。
onmouseover	鼠标指针移到对象时触发
onmouseout	鼠标指针移出对象时触发

window.screen

screen对象可以获取某些关于屏幕的信息

screen.availWidth // 可用的屏幕宽度，以像素计。
screen.availHeight // 可用的屏幕高度，以像素计。
availHeight //窗口可以使用的屏幕的高度（以像素计），基路包括操作系统需要的空间
availWidth //窗口可以使用的屏幕的宽度（以像素计）。
colorDepth //用户表示颜色的位数，大多系统采用32位。

window.history

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

history.back() //与在浏览器点击后退按钮相同
history.forward() //与在浏览器中点击按钮向前相同

本文整理了一些常用的浏览器基础知识，可能大部分你都用过，也可能有些你很想用却不知道他是是么，算是工作经历中的积累，课可以说是笔记，有时候忘记了还可以打开看看.可能有的地方不全，或者错误的地方请及时指正。

参考文献：
http://www.w3cschool.com/
http://www.w3cschool.cn/
http://www.yiiyaa.net/?p=761
…

我的博客地址http://www.mcdnf.com/2015/10/webBase_bom/