Window对象与DOM

た入场券 2022-06-09 07:23 179阅读 0赞

## [Window对象与DOM][Window_DOM] ##

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

## **文档对象模型(DOM)** ##

![753527-20160328212311176-1451837758.png][]

在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对象的关系** ##

![753527-20160328212327769-1366717913.png][]

从上图可以看出：

（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 对象引用。

**对象属性**

document.body//提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。

document.cookie 返回与当前文档有关的所有 cookie。

document.title //返回文档标题等价于HTML的title标签

document.domain 返回当前文档的域名。

document.bgColor //返回页面背景色

document.fgColor //返回前景色(文本颜色)

document.linkColor //未点击过的链接颜色

document.alinkColor //激活链接(焦点在此链接上)的颜色

document.vlinkColor //已点击过的链接颜色

document.URL //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate //文件建立日期，只读属性

document.fileModifiedDate //文件修改日期，只读属性

document.lastModified **返回文档被最后修改的日期和时间**。

document.fileSize //文件大小，只读属性

document.cookie //设置和读出cookie

document.charset //返回字符集 简体中文:gb2312

document.URL 返回当前文档的 URL。

document.referrer 返回载入当前文档的文档的 URL。

document.styleSheets 返回样式表的集合,返回值CSSStyleSheet\[\]

document.styleSheets\[0\].cssRules.style.paddingTop=”10px”设置样式,样式名去掉连字符,

**常用对象方法**

document.write() //动态向页面写入内容

document.writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

document.createElement(<Tag>) //用指定标签类型创建一个新的element对象)

document.getElementById(ID) //获得指定ID值的对象

document.getElementsByName(Name) //获得指定Name值的对象

getElementsByTagName() 返回带有指定标签名的对象集合。

document.body.appendChild(oTag)

**body-主体子对象**

document.body //指定文档主体的开始和结束等价于body>/body>

document.body.bgColor //设置或获取对象后面的背景颜色

document.body.link //未点击过的链接颜色

document.body.alink //激活链接(焦点在此链接上)的颜色

document.body.vlink //已点击过的链接颜色

document.body.text //文本色

document.body.innerText //设置body>…/body>之间的文本

document.body.innerHTML //设置body>…/body>之间的HTML代码

document.body.topMargin //页面上边距

document.body.leftMargin //页面左边距

document.body.rightMargin //页面右边距

document.body.bottomMargin //页面下边距

document.body.background //背景图片

document.body.appendChild(oTag) //动态生成一个HTML对象

**常用对象事件**

document.body.οnclick=”func()” //鼠标指针单击对象是触发

document.body.οnmοuseοver=”func()” //鼠标指针移到对象时触发

document.body.οnmοuseοut=”func()” //鼠标指针移出对象时触发

**location-位置子对象**

与window.location返回对象相同

document.location.hash // \#号后的部分

document.location.host // 域名\+端口号

document.location.hostname // 域名

document.location.href // 完整URL

document.location.pathname // 目录部分

document.location.port // 端口号

document.location.protocol // 网络协议(http:)

document.location.search // ?号后的部分

documeny.location.reload() //刷新网页

document.location.reload(URL) //打开新的网页

document.location.assign(URL) //打开新的网页

document.location.replace(URL) //打开新的网页

**selection-选区子对象**

document.selection

**images集合(页面中的图象)**

a)通过集合引用

document.images //对应页面上的img标签

document.images.length //对应页面上img标签的个数

document.images\[0\] //第1个img标签

document.images\[i\] //第i-1个img标签

b)通过nane属性直接引用

document.images.oImage //document.images.name属性

c)引用图片的src属性

document.images.oImage.src //document.images.name属性.src

d)创建一个图象

var oImage

oImage = new Image()

document.images.oImage.src=”1.jpg”

同时在页面上建立一个img /标签与之对应就可以显示

**forms集合(页面中的表单)**

a)通过集合引用

document.forms //对应页面上的form标签

document.forms.length //对应页面上/formform标签的个数

document.forms\[0\] //第1个/formform标签

document.forms\[i\] //第i-1个/formform标签

document.forms\[i\].length //第i-1个/formform中的控件数

document.forms\[i\].elements\[j\] //第i-1个/formform中第j-1个控件

b)通过标签name属性直接引用

/formform name=”Myform”>input name=”myctrl”/>/form

document.Myform.myctrl //document.表单名.控件名

c)访问表单的属性

document.forms\[i\].name //对应form name>属性

document.forms\[i\].action //对应/formform action>属性

document.forms\[i\].encoding //对应/formform enctype>属性

document.forms\[i\].target //对应/formform target>属性

document.forms\[i\].appendChild(oTag) //动态插入一个控件

document.all.oDiv //引用图层oDiv

document.all.oDiv.style.display=” //图层设置为可视

document.all.oDiv.style.display=”none” //图层设置为隐藏

document.getElementId(”oDiv”) //通过getElementId引用对象

document.getElementId(”oDiv”).style=”

document.getElementId(”oDiv”).display=”none”

/\*document.all表示document中所有对象的集合

只有ie支持此属性，因此也用来判断浏览器的种类\*/

**图层对象的4个属性**

document.getElementById(”ID”).innerText //动态输出文本

document.getElementById(”ID”).innerHTML //动态输出HTML

document.getElementById(”ID”).outerText //同innerText

document.getElementById(”ID”).outerHTML //同innerHTML

## **HTMLElement对象** ##

**HTML DOM 节点**

在 HTML DOM （文档对象模型）中，每个部分都是节点：

1.文档本身是文档节点

2.所有 HTML 元素是元素节点

3.所有 HTML 属性是属性节点

4.HTML 元素内的文本是文本节点

5.注释是注释节点

**Element 对象**

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点

获取

document.getElementById(ID) //获得指定ID值的对象

document.getElementsByName(Name) //获得指定Name值的对象

getElementsByTagName() 返回带有指定标签名的对象集合。

**属性和方法**

方法里有a,b的参数仅仅是为了加深说明,其他元素没有a,b不代表是无参方法

Element.add(<class>)给元素添加指定的类

element.accessKey 设置或返回元素的快捷键。

element.appendChild() 向元素添加新的子节点，作为最后一个子节点。

element.attributes 返回元素属性的集合。

element.childNodes 返回元素子节点的 NodeList。

element.className 设置或返回元素的 class 属性。

element.clientHeight 返回元素的可见高度。

element.clientWidth 返回元素的可见宽度。

element.cloneNode() 克隆元素。

element.compareDocumentPosition() 比较两个元素的文档位置。

element.contentEditable 设置或返回元素的文本方向。

element.dir 设置或返回元素的文本方向。

element.firstChild 返回元素的首个子。

element.getAttribute() 返回元素节点的指定属性值。

element.getAttributeNode() 返回指定的属性节点。

element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。

element.getFeature() 返回实现了指定特性的 API 的某个对象。

element.getUserData() 返回关联元素上键的对象。

Element.hidden获取或设置hidden属性的存在状态

element.hasAttribute() 如果元素拥有指定属性，则返回true，否则返回 false。

element.hasAttributes() 如果元素拥有属性，则返回 true，否则返回 false。

element.hasChildNodes() 如果元素拥有子节点，则返回 true，否则 false。

element.id 设置或返回元素的 id。

element.innerHTML 设置或返回元素的内容。

element.insertBefore(<a>,<b>) 在指定的已有的子节点之前插入新节点。A插到b前

element.isContentEditable 设置或返回元素的内容。

element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。

element.isEqualNode(<a>) 检查a元素是否与当前元素相等。

element.isSameNode(a) 检查指定元素是否就是当前元素.

element.isSupported() 如果元素支持指定特性，则返回 true。

element.lang 设置或返回元素的语言代码。

element.lastChild 返回元素的最后一个子元素。

element.namespaceURI 返回元素的 namespace URI。

element.nextSibling 返回当前元素之后的兄弟元素

element.nodeName 返回元素的名称。

element.nodeType 返回元素的节点类型。

element.nodeValue 设置或返回元素值。

element.normalize() 合并元素中相邻的文本节点，并移除空的文本节点。

element.offsetHeight 返回元素的高度。

element.offsetWidth 返回元素的宽度。

element.offsetLeft 返回元素的水平偏移位置。

element.offsetParent 返回元素的偏移容器。

element.offsetTop 返回元素的垂直偏移位置。

element.ownerDocument 返回元素的根元素（文档对象）。

element.parentNode 返回元素的父节点。

element.previousSibling 返回当前元素之前的兄弟元素

Element.remove(<class>) 从元素移除指定的类

element.removeAttribute() 从元素中移除指定属性。

element.removeAttributeNode() 移除指定的属性节点，并返回被移除的节点。

element.removeChild(a) 从元素中移除子节点。

element.replaceChild(a,b) 替换元素中的子节点。

element.scrollHeight 返回元素的整体高度。

element.scrollLeft 返回元素左边缘与视图之间的距离。

element.scrollTop 返回元素上边缘与视图之间的距离。

element.scrollWidth 返回元素的整体宽度。

element.setAttribute() 把指定属性设置或更改为指定值。

element.setAttributeNode() 设置或更改指定属性节点。

element.setIdAttribute()

element.setIdAttributeNode()

element.setUserData() 把对象关联到元素上的键。

element.style 设置或返回元素的 style 属性。

Element.toggle(<class>)如果类不存在就添加它存在就移除它

element.tabIndex 设置或返回元素的 tab 键控制次序。

element.tagName 返回元素的标签名。

element.textContent 设置或返回节点及其后代的文本内容。

element.title 设置或返回元素的 title 属性。

element.toString() 把元素转换为字符串。

nodelist.item() 返回 NodeList 中位于指定下标的节点。

nodelist.length 返回 NodeList 中的节点数。

[Window_DOM]: http://www.cnblogs.com/liuyandeng/p/5330716.html
[753527-20160328212311176-1451837758.png]: /images/20220609/12055aeeee824bf3af033b4550ef3e48.png
[753527-20160328212327769-1366717913.png]: /images/20220609/e01f23352ebc4467b9c0602f984d8df2.png