Window对象与DOM

时间 2019-11-26

标签 window 对象 dom 栏目 Windows 繁體版

原文原文链接

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

文档对象模型(DOM)

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

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

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

Document与Window对象的关系

从上图能够看出：java

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

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

（3）定位对象：浏览器

window.document.myform.text1cookie

或网络

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.onclick=”func()” //鼠标指针单击对象是触发

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

document.body.onmouseout=”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 中的节点数。

若有解释不妥的地方,请多多留言指出!