- 浏览: 404273 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
goahead2010:
有用
JS遍历对象或者数组 -
bishibaodian:
不要在这样找笔试题了,一次就这么几个,还没过瘾就没有了,去安装 ...
整理了一份招PHP高级工程师的面试题 -
smallearth:
不错
整理了一份招PHP高级工程师的面试题 -
ipodao:
暂时没发现啊!
IE域名带有下划线导致的session丢失 -
ipodao:
谢了
JS遍历对象或者数组
一、
DOM
简述
DOM—Document Object
Model,
它是
W3C
国际组织的一套
Web
标准。它定义了访问
HTML
文档对象的一套习属性、方法和事件。
DOM
是以层次结构组织的节点或信息片断的集合。文档对象模型(
Document
Object Model
)是给
HTML
与
XML
文件使用的一组
API
。
DOM
的本质是建立网页与脚本语言或程序语言沟通的桥梁。
浏览器对象是一个分层结构,也称为文档对象模型,如下图所示:
从上图可以看出:
(1)打开网页后,首先看到的是浏览器窗口,即顶层的window对象。
(2)其次,看到的是网页文档的内容,即document文档。
(3)定位对象:
window.document.myform.text1
或
document.myform.text1
因为window窗口对象是所有页面的根对象,所以常常省略。
(4)地址对象location和历史对象history,它他对应IE浏览器中的地址栏和前进/后退按钮。
(1)打开网页后,首先看到的是浏览器窗口,即顶层的window对象。
(2)其次,看到的是网页文档的内容,即document文档。
(3)定位对象:
window.document.myform.text1
或
document.myform.text1
因为window窗口对象是所有页面的根对象,所以常常省略。
(4)地址对象location和历史对象history,它他对应IE浏览器中的地址栏和前进/后退按钮。
二、窗口
window
常用属性:
1 window.clesed :指明窗口是否关闭。
2 window.defaultValue :窗口状态栏的默认信息。
3 window.docement :表示浏览器窗口中的 HTML 文档。
4 window.location :表示有关当前 URL 的信息。
5 window.history :表示有关当前访问过的 RUL 的信息。
6 window.name :设置或检索窗口或框架的名称。
7 window.screen :包含有关客户的屏幕和显示性能的信息。
8 window.screenX :窗口 X 坐标
9 window.screenY :窗口 Y 坐标
10 window.status :设置或检索窗口状态栏中的信息。
11 window.title :设置或检索窗口顶部标题栏中的信息。
12 window.self :当前窗口。
13 window.parent :当前窗口的最上层窗口。
14 window.top :当前显示的窗口的最上层窗口。
15 window.opener :所打开“子窗口”的“父窗口”的名称 。
常用属性:
1 window.clesed :指明窗口是否关闭。
2 window.defaultValue :窗口状态栏的默认信息。
3 window.docement :表示浏览器窗口中的 HTML 文档。
4 window.location :表示有关当前 URL 的信息。
5 window.history :表示有关当前访问过的 RUL 的信息。
6 window.name :设置或检索窗口或框架的名称。
7 window.screen :包含有关客户的屏幕和显示性能的信息。
8 window.screenX :窗口 X 坐标
9 window.screenY :窗口 Y 坐标
10 window.status :设置或检索窗口状态栏中的信息。
11 window.title :设置或检索窗口顶部标题栏中的信息。
12 window.self :当前窗口。
13 window.parent :当前窗口的最上层窗口。
14 window.top :当前显示的窗口的最上层窗口。
15 window.opener :所打开“子窗口”的“父窗口”的名称 。
得到当前窗口的详细信息:
<head> <title>JavaScript</title> </head> <body > <script language="javascript" type="text/javascript"> window.document.writeln("当前位置:"+window.location+"</br>"); window.document.writeln("包含窗口个数:"+window.length+"</br>"); window.document.writeln("当前状态栏的信息:"+window.status+"</br>"); window.document.writeln("当前窗口的名称:"+window.name+"</br>"); window.document.writeln("当前窗口的X、Y坐标是:"+window.screenX+","+window.screenY); </script> </body>
常用方法:
1 window.alert(“ 提示信息 ”) : 显示一个包含确定按钮的对话框。
2 window.blur() : 使对象失去焦点并激发 onblur 事件。
3 window.close() : 关闭窗口。
4 window.open(“ 打开窗口的 url”,” 窗口名 ”,” 窗口特征 ”) : 按指定特征打开窗口。
窗口特征参数如下 :
height :窗口高度
width :窗口宽度
top :窗口距屏幕上方的象素值
left :窗口跟屏幕左侧的象素值
toolbar :是否显示工具栏, yes 或 1 表示显示, no 或 0 表示不显示。
menubar :是否显示菜单栏, yes 或 1 表示显示, no 或 0 表示不显示。
scrollbars :是否显示滚动栏, yes 或 1 表示显示, no 或 0 表示不显示。
resizable :是否允许改变窗口大小, yes 或 1 表示否允, no 或 0 表示不否允示。
location :是否显示地址栏, yes 或 1 表示显示, no 或 0 表示不显示。
status :是否显示状态栏, yes 或 1 表示显示, no 或 0 表示不显示。
5 window.confirm(“ 提示信息 ”) : 显示一个确认对话框,包括确定和取消按钮。当点确定按钮时返回的是 true, 点取消按钮时返回的是 false 。
6 window.prompt(“ 提示信息 ”, 显示在 text 中的默认值 ) : 显示带输入框提示对话框,主要用来收集信息。当点确定按钮时返回的是 true, 点取消按钮时返回的是 false 。
7 窗口定位的方法:
( 1 ) window.moveBy(x,y) : 实现窗口的定向、定量移动。两个参数分别表示 x 方向移动的距离和 y 方向移动的距离。
( 2 ) window.moveTo(x,y) : 把窗口移动到指定坐标位置。两个参数 分别 表示横坐标、纵坐标。
8 窗口大小控制的两个方法:
(
1
)
resizeBy(x,y)
:
按指定的尺寸调整窗口的大小。两个参数分别表示在水平方向上的改变量和垂直方向上的改变量。
( 2 ) resizeTo(x,y) : 把窗口调整到指定尺寸。两个参数分别表示浏览器窗口的宽和高。
( 2 ) resizeTo(x,y) : 把窗口调整到指定尺寸。两个参数分别表示浏览器窗口的宽和高。
9
操作定时器的两个方法:
( 1 ) setTimeout(“ 函数 ’, 毫秒数 ) : 设置定时器,经过指定毫秒值后执行某个函数。
( 2 ) clearTimeout( 定时器对象 ) : 取消某个定时器。
( 1 ) setTimeout(“ 函数 ’, 毫秒数 ) : 设置定时器,经过指定毫秒值后执行某个函数。
( 2 ) clearTimeout( 定时器对象 ) : 取消某个定时器。
三、历史对象
history
主要属性:
1 window.history.length:
得到浏览器历史清单中的项目个数。
主要方法:
1 window.history.back():
加载
History
列表中的上一个
URL
,相当于
IE
的后退按钮。等同于
window.history.go(-1);
2 window.history.forward():
加载
History
列表中的下一个
URL
,相当于
IE
的前进按钮。等同于
window.history.go(1);
3 go(“url” or number):
加载
History
列表中的一个
URL
,或要求浏览器移动指定的页面数。
四、地址对象location
此对象相当于IE浏览器中的地址栏,包含了关于当前URL地址的信息.它提供了一种重新加载当前URL的方法。
此对象相当于IE浏览器中的地址栏,包含了关于当前URL地址的信息.它提供了一种重新加载当前URL的方法。
主要属性:
1 window.location.hash : 设置或检索另一个页面里的锚
2 window.location.host : 设置或检索 URL 的主机名和端口号
3 window.location.hostname : 设置或检索 URL 的主机名部分
4 window.location.pathname : 设置或检索 URL 相对路径
5 window.location.href :设置或检索完整的 URL 字符串(常用)
6 window.location.port : 设置或检索主机端口号
主要方法:
1 assign(“url”) : 加载 URL 指定的新的 HTML 文档。
2 reload() : 重新加载当前页。
3 replace(“url”) : 通过加载 URL 指定的文档来替换当前文档。
1 window.location.hash : 设置或检索另一个页面里的锚
2 window.location.host : 设置或检索 URL 的主机名和端口号
3 window.location.hostname : 设置或检索 URL 的主机名部分
4 window.location.pathname : 设置或检索 URL 相对路径
5 window.location.href :设置或检索完整的 URL 字符串(常用)
6 window.location.port : 设置或检索主机端口号
<script language="javascript" type="text/javascript"> window.document.writeln("锚 "+window.location.hash+"</br>"); window.document.writeln("主机名及端口号 "+window.location.host+"</br>"); window.document.writeln("主机名 "+window.location.hostname+"</br>"); window.document.writeln("端口号 "+window.location.port+"</br>"); window.document.writeln("相对路径 "+window.location.pathname+"</br>"); window.document.writeln("URL链接字符串 "+window.location.href+"</br>"); </script>
主要方法:
1 assign(“url”) : 加载 URL 指定的新的 HTML 文档。
2 reload() : 重新加载当前页。
3 replace(“url”) : 通过加载 URL 指定的文档来替换当前文档。
五、文档对象
Document
Document
对象表示给定浏览器窗口中的
HTML
文档,并用于检索文档的信息、检查和修改
HTML
元素和文档中的文本、以及处理事件。
主要属性:
1 alinkColor : 设置或获取元素中所有激活链接的颜色
主要属性:
1 alinkColor : 设置或获取元素中所有激活链接的颜色
2
linkColor
:
设置或获取对象文档链接的颜色。
3
vlinkColor
:
设置或获取用户已访问过的链接颜色。
4
URL
:
设置或获取当前文档的
URL
。
5
location:
获取当前
URL
的信息。
6
title
:
设置或获取当前文档的标题。
7
protocol
:
设置或获取
URL
的协议部分。
8
readyState
:
获取表明对象当前状态的值。
9
alinkColor
:
设置或获取元素中所有激活链接的颜色。
10
bgColor
:
设置或获取表明对象后面的背景颜色的值。
11
fgColor
:
设置或获取文档的前景
(
文本
)
颜色。
12
all
:
返回对象所包含的元素集合的引用。
13
anchors
:
获取所有带有
name
和
/
或
id
属性的
a
对象的集合。此集合中的对象以
HTML
源顺序排列。
14
applets
:
获取文档中所有
applet
对象的集合。
15
childNodes
:
获取作为指定对象直接后代的
HTML
元素和
TextNode
对象的集合。
16
embeds
:
获取文档中所有
embed
对象的集合。
17
forms
:
获取以源顺序排列的文档中所有
form
对象的集合。
18
frames
:
获取给定文档定义或与给定窗口关联的文档定义的所有
window
对象的集合。
19
images
:
获取以源顺序排列的文档中所有
img
对象的集合。
20
links
:
获取文档中所有指定了
HREF
属性的
a
对象和所有
area
对象的集合。
21
namespaces
:
获取
namespace
对象的集合。
22
scripts
:
获取文档中所有
script
对象的集合。
23
styleSheets
:
获取代表与文档中每个
link
或
style
对象的实例相对应的样式表的
styleSheet
对象的集合。
主要方法:
1
clear():
清除当前文档。
2
close():
关闭输出流并强制将数据发送到显示。
3
write("text"):
在指定窗口的文档中写入一个或多个
HTML
表达式。
4
writeln("text"):
在指定窗口的文档中写入一个或多个
HTML
表达式,后面追加一个换行符。
5
focus():
使得元素得到焦点并执行由
onfocus
事件指定的代码。
6 hasFocus():
获取表明对象目前是否拥有焦点的值。
7
getElementById("ID "):
8 getElementsByName("Name
"):
9
getElementsByTagName_r(“TagName”):
发表评论
-
年月日三级联动菜单
2012-09-05 16:01 1674<html xmlns="http:// ... -
javascript中创建对象的几种方式
2012-09-05 13:25 1011随着web 2.0 的兴起(最具代表性的是Aja ... -
清除js缓存
2012-07-20 18:26 5283客户端有一个HTML文件,是用来提交输入信息的.但问 ... -
JS操作cookie
2012-07-20 16:56 902var Cookie=new Object(); C ... -
iframe下的cookie设置
2012-07-11 22:05 1953http://viralpatel.net/blogs/how ... -
IE域名带有下划线导致的session丢失
2012-07-11 22:01 1549IE下如果域名包含_ 则会导致之前session存入的信息丢失 ... -
Iframe父页面和子页面之间的JS调用
2012-07-11 21:59 19901.index.html <!DOCTYPE h ... -
CSS3的一些特效
2012-04-25 14:28 726http://www.cnblogs.com/damonlan ... -
js中undefined,null,NaN的区别
2012-03-31 11:25 33401.类型分析: js中的数据类型有undefined, ... -
jQuery---循环滚动新闻列表
2012-03-09 11:29 913Demo1:http://www.cssrain.cn/dem ... -
html提交表单中input image和img
2012-02-29 18:16 163771.<input type="image&qu ... -
DTD文件定义
2012-02-29 22:27 866DTD文件定义 一个DT ... -
doctype声明、浏览器的标准、怪异等模式
2012-02-08 22:26 1756群里看到一个面试题,doctype 标准(严格)模式(S ... -
IE,火狐,OPERA等浏览器CSS Hack和向后兼容
2012-02-08 22:24 1207在解决兼容方法上,想定出一个统一的规范,个人认为应该以下 ... -
Javascript正则表达式
2012-02-07 22:13 749创建一个正则表达 ... -
HTTP协议
2012-02-01 16:29 916引言 HTTP协议我想任何IT 人士都耳熟能详了 ... -
Zend Studio中安装Aptana及几个配置说明
2012-01-29 11:51 950Zend Studio加Aptana的完美结合.我想,无 ... -
10 个很棒的 jQuery 代码片段
2011-11-25 17:42 839图片预加载 (function($) { var ca ... -
HTTP session cookie原理及应用
2011-09-24 14:55 2152PHP 的COOKIE coo ... -
CSS子选择器
2011-09-14 17:04 913<html> <head> < ...
相关推荐
DOM 对象继承关系 DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,它允许开发者使用脚本语言来访问和修改文档的结构和内容。DOM 中的对象继承关系是指不同类型的 DOM 对象之间的继承关系,了解这些...
例如,`$(element)[0]`可以将jQuery对象转换为DOM对象,而`$(domElement)`则可以将DOM对象转换为jQuery对象。这种转换使得在jQuery和DOM之间切换变得灵活。 ### 总结 jQuery大大简化了JavaScript的许多任务,特别...
BOM和DOM对象的简单介绍 在 JavaScript 中,BOM( Browser Object Model)和 DOM(Document Object Model)是两个重要的对象模型。BOM 主要关注浏览器窗口和屏幕的信息,而 DOM 则是文档对象的树形结构,从而描述了...
这个"XMLDOM对象方法中文手册chm"提供了关于XML DOM在中文环境下的详细指南,对于理解和应用XML DOM技术至关重要。 1. **XML DOM基本概念** - DOM是一种与平台和语言无关的接口,它将XML文档解析为一个树形结构,...
这篇“XMLDOM对象方法手册”提供了关于如何利用XMLDOM对象进行XML操作的详细指南。 1. **XMLDOM对象的创建** 在JavaScript中,可以使用`ActiveXObject`来创建XMLDOM对象,例如: ```javascript var xmlDoc = new...
生成DOM对象主要有两种方式:一是使用`document.createElement()`方法,二是利用innerHTML属性。`document.createElement()`允许我们创建指定标签名的新元素,例如: ```javascript var newElement = document....
document 对象.html-javascript中DOM对象内容
XMLDOM对象方法手册.chm是关于XMLDOM接口及其方法的详细参考资料,它通常包含了如何使用这些方法来查询、修改和操作XML文档的详细信息。手册中可能包括了如以下内容: 1. **createNode**:创建新的XML节点,可以是...
对象介绍,全局,基本,DOM对象,TXT阅读文档 对象介绍,全局,基本,DOM对象,TXT阅读文档 对象介绍,全局,基本,DOM对象,TXT阅读文档 对象介绍,全局,基本,DOM对象,TXT阅读文档 对象介绍,全局,基本,DOM...
在JavaScript中,DOM对象是用于操作网页内容的关键工具。 Window对象是DOM中最高级别的对象,它代表浏览器的窗口。Window对象拥有许多属性和方法,如: - `document`:引用当前窗口中的HTML文档。 - `history`:...
当我们谈论jQuery对象和DOM对象时,我们需要理解两者之间的基本差异和转换方法。 DOM(Document Object Model)是HTML和XML文档的结构表示,允许我们通过JavaScript来访问和修改网页内容。DOM对象是通过JavaScript...
**BOM对象与DOM对象详解** 在Web开发中,BOM(Browser Object Model)对象和DOM(Document Object Model)对象是两个至关重要的概念,它们分别处理浏览器交互和HTML文档结构的解析。 **一、BOM对象** BOM,浏览器...
**jQuery对象和DOM对象** 在JavaScript中,DOM(Document Object Model)对象是浏览器解析HTML或XML文档后生成的树状结构,它允许我们通过编程方式访问和操作网页元素。而jQuery对象则是jQuery库中用于封装DOM对象...
**DOM对象模型** DOM,全称为“Document Object Model”,即文档对象模型,是W3C组织定义的一个标准,用于表示HTML或XML文档的一种结构化表示方式。它将文档解析为一个由节点组成的树形结构,使得JavaScript或其他...
HTML-DOM 对象 HTML-DOM 对象是指在 HTML 文档中表示的对象,这些对象都是 Document 对象的一部分。它们可以用来表示 HTML 文档中的各个部分,如表格、行、单元格等。下面是 HTML-DOM 对象的详细介绍: 1. ...
JavaScript中的DOM对象和jQuery对象是两种不同的数据结构,它们在处理网页元素时有着各自的特性和优缺点。了解它们之间的联系和区别对于JavaScript开发者来说至关重要,因为这有助于选择合适的工具进行网页交互。 ...
JavaScript 转换字符串为 DOM 对象(字符串动态创建 DOM) 在 JavaScript 中,动态创建标准的 DOM 对象通常使用 `var obj = document.createElement('div');`,然后再给 `obj` 设置一些属性。但是,在实际使用过程...
DOM 对象的概念和结构 DOM 对象的定义和概念 DOM 全称 Document Object Model(文档对象模型),是由 W3C 组织定义的一个标准。在前端开发时,我们往往需要在页面某个地方添加一个元素或者删除元素,这种添加元素...
JavaScript操作XML DOM对象是Web开发中的重要技能,尤其在处理数据交换、页面动态更新和跨平台通信时。本文将深入探讨这一主题,并结合JavaScript技巧,为开发者提供一个全面的指导。 1. **DOM(文档对象模型)基础...