标签：

目前,前端插件数不胜数,比如有移动端滑动特效插件Swiper,下拉刷新的iScroll,弹出框插件layer,还有我们经常使用的JQuery,jquery.mobile等,这些插件能够满足我们日常的基本开发,我们只需调用相应的接口就能实现很炫酷的方法,万变不离其宗,原始操作HTML文档的还是window对象或者DOM,下面是它们之间的关系及用法!

文档对象模型(DOM)

　　　　 在DOM中，HTML文档的层次结构被表示为一个树形结构。树的根节点是一个表示当前HTML文档的Document对象，树的每个子节点表示HTML文档中的不同内容,dom就像一个模型,它由代表文档的众多对象组成(如document)Dom把javascript与HTML文档的内容联系起来,是javascript与HTML之间的桥梁,通过使用dom对象(如document对象)可以添加,删除,和操作各种元素(如div),还可以使用事件来响应用户的交互操作,以及完全控制css在显示文档的过程中,浏览器会解析HTML并创建一个模型,这个模型保存了各个html元素之间的层级关系,每个元素都由一个javascript对象表示,

　　　　每个载入浏览器的 HTML 文档都会成为 Document 对象,Dom是一组对象的集合,这些对象代表了html文档里的各个元素,每个元素就是一个js对象,Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。比如var obj=document.getElementById(id);obj.style.background="url(products/images/duihao.png) ";

　　　　模型里的每个对象都有若干属性和方法(如document对象的getElementsById方法),当你用他们来修改对象的状态时,浏览器会让这些改动反映到对应的html元素上,并更新你的文档,Document是探索DOM的入口,利用全局变量document可以访问Document对象,可以使用document.A 来判断document对象是否定义了一个名为A的方法,返回true,这说明浏览器是支持这一个功能的

Document与Window对象的关系

从上图可以看出：

（1）打开网页后，首先看到的是浏览器窗口，即顶层的window对象。

（2）其次，看到的是网页文档的内容，即document文档。

（3）定位对象：

window.document.myform.text1

或

document.myform.text1

因为window窗口对象是所有页面的根对象，所以常常省略。

真正的大牛不是你懂多少,而是能够快速的查阅相应的API文档

Window对象

注:页面上元素name属性以及JavaScript引用的名称必须一致包括大小写

否则会提示你1个错误信息 "引用的元素为空或者不是对象"

对象属性(window.属性)

window //窗户自身, window=window.self 可使用全局属性 window访问　Window对象

document 对 Document 对象的只读引用。请参阅 Document 对象。

history 对 History 对象的只读引用。请参数 History 对象。

location 用于窗口或框架的 Location 对象。请参阅 Location 对象。

screen 对 Screen 对象的只读引用。请参数 Screen 对象。

navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。

defaultStatus 设置或返回窗口状态栏中的默认文本。

innerheight 返回窗口的文档显示区的高度。

innerwidth 返回窗口的文档显示区的宽度。

outerheight 返回窗口的外部高度。

outerwidth 返回窗口的外部宽度。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

name 设置或返回窗口的名称。

parent 返回父窗口。

top 返回最顶层的先辈窗口。

status 设置窗口状态栏的文本。

window.location //URL地址，配备布置这个属性可以打开新的页面

 

对象方法(window.方法)

alert() 显示带有一段消息和一个确认按钮的警告框。

blur() 把键盘焦点从顶层窗口移开。

clearInterval() 取消由 setInterval() 设置的 timeout。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

close() 关闭浏览器窗口。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

createPopup() 创建一个 pop-up 窗口。

focus() 把键盘焦点给予一个窗口。

moveBy() 可相对窗口的当前坐标把它移动指定的像素。

moveTo() 把窗口的左上角移动到一个指定的坐标。

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

print() 打印当前窗口的内容。

prompt() 显示可提示用户输入的对话框。

resizeBy() 按照指定的像素调整窗口的大小。

resizeTo() 把窗口的大小调整到指定的宽度和高度。

scrollBy() 按照指定的像素值来滚动内容。

scrollTo() 把内容滚动到指定的坐标。

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

setTimeout(方法,秒数) 在指定的毫秒数后调用函数或计算表达式。　

定时器传参数

timeOutEvent = setTimeout("longPress(‘" + obj + "‘)",1500);

成员对象

window.event

window.document //见document对象详解

window.history

window.screen

window.navigator

window.external

 

window.history对象

window.history.length //浏览过的页面数

history.back() //在浏览历史里后退一步

history.forward() //在浏览历史里前进一步

history.go(i) //到汗青详细登记单的第i位//i>0进步,i<0撤退退却

window.screen对象

window.screen.width //屏幕宽度

window.screen.height //屏幕高度

window.screen.colorDepth //屏幕颜色深度

window.screen.availWidth //可用宽度(除去任务栏的高度)

window.screen.availHeight //可用高度(除去任务栏的高度)

window.external对象

window.external.AddFavorite("地址","标题" ) //把网站新增到保藏夹

window.navigator对象

window.navigator.appCodeName //浏览器代码名

window.navigator.appName //浏览器步伐名

window.navigator.appMinorVersion //浏览器补钉版本

window.navigator.cpuClass //cpu类型 x86

window.navigator.platform //操作体系类型 win32

window.navigator.plugins

window.navigator.opsProfile

window.navigator.userProfile

window.navigator.systemLanguage //客户体系语言 zh-cn简体中文

window.navigator.userLanguage //用户语言,同上

window.navigator.appVersion //浏览器版本(包括 体系版本)

window.navigator.userAgent

window.navigator.onLine //用户否在线

window.navigator.cookieEnabled //浏览器是否撑持cookie

window.navigator.mimeTypes

Document对象

注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写

否则会提示你一个错误信息 “引用的元素为空或者不是对象”

利用全局变量document可以访问Document对象

对象集合

all[] 提供对文档中所有 HTML 元素的访问。

anchors[] 返回对文档中所有 Anchor 对象的引用。

applets 返回对文档中所有 Applet 对象的引用。

forms[] 返回对文档中所有 Form 对象引用。

images[] 返回对文档中所有 Image 对象引用。

links[] 返回对文档中所有 Area 和 Link 对象引用。

对象属性