本文详细整理了JavaScript中Window和Document对象的核心属性与方法。涵盖Window对象的窗口控制、定时器、历史记录及屏幕信息获取,以及Document对象的文档属性、DOM元素操作、表单交互和图像集合处理。通过具体代码示例,帮助开发者掌握浏览器环境下的基础编程技巧。
-------------------------------------------------- -------------------
Window对象属性与方法
本节主要介绍Window对象的相关属性。
window:代表当前浏览器窗口本身。
window.self:返回对当前窗口的引用,等同于window=window.self。
window.name:用于为当前窗口设置或获取名称。
window.defaultStatus:用于设定窗口状态栏的默认显示信息。
window.location:表示当前页面的URL地址,修改此属性可以导航至新页面。
-------------------------------------------------- -------------------
本节介绍Window对象的常用方法。
window.alert("text"):弹出一个包含提示信息的模式对话框。
window.confirm("text"):弹出一个包含确认信息的对话框,用户可选择确定或取消。
window.prompt("text"):弹出一个要求用户通过键盘输入文本的对话框。
window.setInterval("action", time):每隔指定的时间(毫秒)重复执行一次指定的操作。注意原文拼写为setIntervel,标准API应为setInterval。
window.clearInterval():清除之前设置的定时器,从而终止重复执行的操作。
window.setTimeout(action, time):在指定的时间(毫秒)后执行一次操作。
window.open():用于打开一个新的浏览器窗口或标签页。
window.close():用于关闭当前窗口。
-------------------------------------------------- -------------------
Window成员子对象
本节介绍Window对象的成员子对象。
window.event:用于获取当前事件对象(IE浏览器特有,标准浏览器通过事件处理函数参数获取)。
window.document:指向当前文档对象,具体属性见Document对象详解。
window.history:用于访问浏览器的历史记录。
window.screen:用于获取屏幕相关信息。
window.navigator:用于获取浏览器及操作系统的相关信息。
window.external:提供与浏览器外部交互的功能(如IE的收藏夹功能)。
-------------------------------------------------- -------------------
History对象详解
本节详细介绍Window.history对象。
window.history.length:返回用户在此窗口中浏览过的页面数量。
history.back():使浏览器后退到历史记录中的上一页。
history.forward():使浏览器前进到历史记录中的下一页。
history.go(i):使浏览器前进或后退到历史记录中的第i个页面。
其中,i>0表示前进,i<0表示后退。
-------------------------------------------------- -------------------
Screen对象详解
本节详细介绍Window.screen对象。
window.screen.width:获取屏幕的总宽度(像素)。
window.screen.height:获取屏幕的总高度(像素)。
window.screen.colorDepth:获取屏幕的颜色深度(位)。
window.screen.availWidth:获取屏幕的可用宽度(排除任务栏等系统区域)。
window.screen.availHeight:获取屏幕的可用高度(排除任务栏等系统区域)。
-------------------------------------------------- -------------------
External对象详解
本节详细介绍Window.external对象。
window.external.AddFavorite("地址", "标题"):将指定网址添加到浏览器收藏夹(主要适用于旧版IE)。
-------------------------------------------------- -------------------
Navigator对象详解
本节详细介绍Window.navigator对象。
window.navigator.appCodeName:返回浏览器的代码名称(通常为"Mozilla")。
window.navigator.appName:返回浏览器的正式名称(如"Netscape"或"Microsoft Internet Explorer")。
window.navigator.appMinorVersion:返回浏览器的次要版本号。
window.navigator.cpuClass:返回客户端CPU的类型(如x86)。
window.navigator.platform:返回客户端操作系统的类型(如win32)。
window.navigator.plugins:返回浏览器安装的插件列表。
window.navigator.opsProfile:此属性在标准DOM中不常见,可能为特定浏览器扩展或旧版特性。
window.navigator.userProfile:此属性在标准DOM中不常见,可能为特定浏览器扩展或旧版特性。
window.navigator.systemLanguage:返回操作系统默认语言(如zh-cn表示简体中文)。
window.navigator.userLanguage:返回用户首选语言,通常与systemLanguage相同。
window.navigator.appVersion:返回浏览器版本字符串,通常包含操作系统版本信息。
window.navigator.userAgent:返回用户代理字符串,包含浏览器、操作系统和设备信息。
window.navigator.onLine:返回布尔值,指示用户当前是否在线。
window.navigator.cookieEnabled:返回布尔值,指示浏览器是否启用Cookie支持。
window.navigator.mimeTypes:返回浏览器支持的MIME类型列表。
==================================================
二、document对象
Document对象属性与方法
本节主要介绍Document对象的属性。
document.title:设置或获取文档标题,等价于HTML中的<title>标签内容。
document.bgColor:设置或获取页面的背景颜色。
document.fgColor:设置或获取文本的前景色(默认颜色)。
document.linkColor:设置或获取未点击链接的颜色。
document.alinkColor:设置或获取激活链接(鼠标悬停或点击时)的颜色。
document.vlinkColor:设置或获取已访问链接的颜色。
document.URL:获取当前文档的完整URL,修改此属性可导航至新页面。
document.fileCreatedDate:获取文件创建日期,只读属性。
document.fileModifiedDate:获取文件最后修改日期,只读属性。
document.fileSize:获取文件大小,只读属性。
document.cookie:用于设置或读取当前文档的Cookie。
document.charset:设置或获取文档的字符集,例如简体中文通常使用gb2312。
----------------------------
本节介绍Document对象的常用方法。
document.write():动态向HTML文档中写入内容。
document.createElement(Tag):创建指定标签名的HTML元素节点。
document.getElementById(ID):通过指定的ID值获取对应的DOM元素。
document.getElementsByName(Name):通过指定的Name属性值获取元素集合。
document.body.appendChild(oTag):将指定节点oTag添加到body元素的末尾。
Body子对象详解
本节介绍Document.body子对象。
document.body:代表HTML文档的主体部分,等价于<body>...</body>标签。
document.body.bgColor:设置或获取body元素后的背景颜色。
document.body.link:设置或获取未点击链接的颜色。
document.body.alink:设置或获取激活链接的颜色。
document.body.vlink:设置或获取已访问链接的颜色。
document.body.text:设置或获取body内文本的颜色。
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:设置或获取背景图片的URL。
document.body.appendChild(oTag):动态生成一个HTML对象并将其添加到body中。
本节介绍Document.body的常用事件。
document.body.onclick="func()":当鼠标指针单击对象时触发。
document.body.onmouseover="func()":当鼠标指针移到对象上方时触发。
document.body.onmouseout="func()":当鼠标指针移出对象时触发。
Location子对象详解
本节介绍Document.location子对象。
document.location.hash:获取URL中#号后的部分(锚点)。
document.location.host:获取域名和端口号。
document.location.hostname:获取域名部分。
document.location.href:获取完整的URL地址。
document.location.pathname:获取URL的目录部分。
document.location.port:获取端口号。
document.location.protocol:获取网络协议(如http:)。
document.location.search:获取URL中?号后的部分(查询字符串)。
本节介绍Document.location的常用方法。
document.location.reload():刷新当前网页。
document.location.reload(URL):原文描述为打开新网页,但reload通常用于刷新当前页,若需打开新URL应使用assign或replace。
document.location.assign(URL):加载新的URL文档。
document.location.replace(URL):用新文档替换当前文档,不保留历史会话记录。
========================================================================
Selection子对象
本节介绍Document.selection子对象。
document.selection:用于获取或操作文档中的文本选区(IE浏览器特有,标准浏览器使用getSelection)。
========================================================================
Images集合与动态图像创建
本节介绍images集合(页面中的图像)。
----------------------------
a) 通过集合引用。
document.images:返回页面上所有<img>标签的集合。
document.images.length:返回页面上<img>标签的数量。
document.images[0]:访问第1个<img>标签。
document.images[i]:访问第i+1个<img>标签(索引从0开始)。
----------------------------
b) 通过name属性直接引用。
示例HTML:<img name="oImage">
document.images.oImage:通过name属性直接访问图像对象。
----------------------------
c) 引用图片的src属性。
document.images.oImage.src:获取或设置图像源的URL。
----------------------------
d) 创建一个图像对象。
定义变量oImage。
oImage = new Image():创建一个新的Image对象。
document.images.oImage.src="1.jpg":设置图像源。
同时在页面上建立一个<img>标签与之对应即可显示图像。
----------------------------
示例代码:动态创建图像。
<html>
<img name=oImage>
<script language="javascript">
var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
</script>
</html>
<html>
<script language="javascript">
oImage=document.createElement("IMG")
oImage.src="1.jpg"
</script>