| |
在JavaScript 能够涉及的范围内有如下几个“大”对象：window, document, location, navigator, screen, history 等。下面是一个文档对象树，你可以看到对象下包含对象的“壮观”情景。要引用某个对象，就要把父级的对象都列出来。例如，要引用某表单"applicationForm"的某文字框"customerName"，就要用"document.applicationForm.customerName"。 下表中有些对象是全小写的，有些是以大写字母开头的。以大写字母开头的对象表示，引用该对象不使用下表列出的名字，而直接用对象的“名字”（Id 或 Name，下面有讲解），或用它所属的对象数组指定。 - window
- navigator
- screen
- history
- location
- frames[ ]; Frame
- document
- anchors[ ]; links[ ]; Link
- applets[ ]
- embeds[ ]
- forms[ ]; Form
- Button
- Checkbox
- elements[ ]; Element
- Hidden
- Password
- Radio
- Reset
- Select
- Submit
- Text
- Textarea
- images[ ]; Image
| 窗口对象 浏览器对象(实际上是JavaScript 对象，而不是HTML DOM 对象。) 屏幕对象(实际上是JavaScript 对象，而不是HTML DOM 对象。) 历史对象(实际上是JavaScript 对象，而不是HTML DOM 对象。) 地址对象(实际上是JavaScript 对象，而不是HTML DOM 对象。) 框架对象 文档对象 连接对象 Java小程序对象 插件对象 表单对象 按钮对象 复选框对象 表单元素对象 隐藏对象 密码输入区对象 单选域对象 重置按钮对象 选择区（下拉菜单、列表）对象 选择项对象 提交按钮对象 文本框对象 多行文本输入区对象 图片对象 | window 窗口对象 最大的对象，它描述的是一个浏览器窗口。一般要引用它的属性和方法时，不需要用“window.xxx”这种形式，而直接使用“xxx”。一个框架页面也是一个窗口。 属性 name 窗口的名称，由打开它的连接（<a target="...">）或框架页（<frame name="...">）或某一个窗口调用的 open() 方法（见下）决定。一般我们不会用这个属性。 status 指窗口下方的“状态栏”所显示的内容。通过对 status 赋值，可以改变状态栏的显示。 opener 用法：window.opener；返回打开本窗口的窗口对象。注意：返回的是一个窗口对象。如果窗口不是由其他窗口打开的，在 Netscape 中这个属性返回 null；在 IE 中返回“未定义”（undefined）。undefined 在一定程度上等于 null。注意：undefined 不是 JavaScript 常数，如果你企图使用“undefined”，那就真的返回“未定义”了。 self 指窗口本身，它返回的对象跟 window 对象是一模一样的。最常用的是“self.close()”，放在<a>标记中：“<a href="javascript:self.close()">关闭窗口</a>”。 parent 返回窗口所属的框架页对象。 top 返回占据整个浏览器窗口的最顶端的框架页对象。 history 历史对象，见下。 location 地址对象，见下。 document 文档对象，见下。 方法 open() 打开一个窗口。用法：open(<URL字符串>, <窗口名称字符串>, <参数字符串>); <URL字符串>：描述所打开的窗口打开哪一个网页。如果留空('')，则不打开任意网页。 <窗口名称字符串>：描述被打开的窗口的名称（window.name），可以使用'_top'、'_blank'等内建名称。这里的名称跟“<a href="..." target="...">”里的“target”属性是一样的。 <参数字符串>：描述被打开的窗口的样貌。如果只需要打开一个普通窗口，该字符串留空（''），如果要指定样貌，就在字符串里写上一到多个参数，参数之间用逗号隔开。 例：打开一个 400 x 100 的干净的窗口： open('','_blank','width=400,height=100,menubar=no,toolbar=no, location=no,directories=no,status=no,scrollbars=yes,resizable=yes') 参数 top=# 窗口顶部离开屏幕顶部的像素数 left=# 窗口左端离开屏幕左端的像素数 width=# 窗口的宽度 height=# 窗口的高度 menubar=... 窗口有没有菜单，取值yes或no toolbar=... 窗口有没有工具条，取值yes或no location=... 窗口有没有地址栏，取值yes或no directories=... 窗口有没有连接区，取值yes或no scrollbars=... 窗口有没有滚动条，取值yes或no status=... 窗口有没有状态栏，取值yes或no resizable=... 窗口给不给调整大小，取值yes或no open() 方法有返回值，返回的就是它打开的窗口对象。所以， var newWindow = open('','_blank'); 这样把一个新窗口赋值到“newWindow”变量中，以后通过“newWindow”变量就可以控制窗口了。 close() 关闭一个已打开的窗口。 用法：window.close() 或 self.close()：关闭本窗口； <窗口对象>.close()：关闭指定的窗口。 如果该窗口有状态栏，调用该方法后浏览器会警告：“网页正在试图关闭窗口，是否关闭？”然后等待用户选择是否；如果没有状态栏，调用该方法将直接关闭窗口。 blur() 使焦点从窗口移走，窗口变为“非活动窗口”。 focus() 是窗口获得焦点，变为“活动窗口”。不过在 Windows 98，该方法只能使窗口的标题栏和任务栏上的相应按钮闪烁，提示用户该窗口正在试图获得焦点。 scrollTo() 用法：[<窗口对象>.]scrollTo(x, y)；使窗口滚动，使文档从左上角数起的(x, y)点滚动到窗口的左上角。 scrollBy() 用法：[<窗口对象>.]scrollBy(deltaX, deltaY)；使窗口向右滚动 deltaX 像素，向下滚动 deltaY 像素。如果取负值，则向相反的方向滚动。 resizeTo() 用法：[<窗口对象>.]resizeTo(width, height)；使窗口调整大小到宽 width 像素，高 height 像素。 resizeBy() 用法：[<窗口对象>.]resizeBy(deltaWidth, deltaHeight)；使窗口调整大小，宽增大 deltaWidth 像素，高增大 deltaHeight 像素。如果取负值，则减少。 alert() 用法：alert(<字符串>)；弹出一个只包含“确定”按钮的对话框，显示<字符串>的内容，整个文档的读取、Script 的运行都会暂停，直到用户按下“确定”。 confirm() 用法：confirm(<字符串>)；弹出一个包含“确定”和“取消”按钮的对话框，显示<字符串>的内容，要求用户做出选择，整个文档的读取、Script 的运行都会暂停。如果用户按下“确定”，则返回 true 值，如果按下“取消”，则返回 false 值。 prompt() 用法：prompt(<字符串>[, <初始值>])；弹出一个包含“确认”“取消”和一个文本框的对话框，显示<字符串>的内容，要求用户在文本框输入一些数据，整个文档的读取、Script 的运行都会暂停。如果用户按下“确认”，则返回文本框里已有的内容，如果用户按下“取消”，则返回 null 值。如果指定<初始值>，则文本框里会有默认值。 事件 onload; onunload; onresize; onblur; onfocus; onerror navigator浏览器对象 属性 appCodeName 返回浏览器的“代码名”，流行的 IE 和 NN 都返回 'Mozilla'。 appName 返回浏览器名。IE 返回 'Microsoft Internet Explorer'，NN 返回 'Netscape'。 appVersion 返回浏览器版本，包括了大版本号、小版本号、语言、操作平台等信息。 platform 返回浏览器的操作平台，对于 Windows 9x 上的浏览器，返回 'Win32'（大小写可能有差异）。 userAgent 返回以上全部信息。例如，IE5.01 返回 'Mozilla/4.0 (compatible; MSIE 5.01; Windows 98)'。 javaEnabled() 返回一个布尔值，代表当前浏览器允许不允许 Java。 screen 屏幕对象 反映了当前用户的屏幕设置。 属性 width 返回屏幕的宽度（像素数）。 height 返回屏幕的高度。 availWidth 返回屏幕的可用宽度（除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）。 availHeight 返回屏幕的可用高度。 colorDepth 返回当前颜色设置所用的位数 - 1：黑白；8：256色；16：增强色；24/32：真彩色 history 历史对象 历史对象指浏览器的浏览历史。鉴于安全性的需要，该对象收到很多限制，现在只剩下下列属性和方法。 属性 length 历史的项数。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。 方法 back() 后退，跟按下“后退”键是等效的。 forward() 前进，跟按下“前进”键是等效的。 go() 用法：history.go(x)；在历史的范围内去到指定的一个地址。如果 x < 0，则后退 x 个地址，如果 x > 0，则前进 x 个地址，如果 x == 0，则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。 location 地址对象 它描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址，只需要使用“location”就行了；若要表示某一个窗口的地址，就使用“<窗口对象>.location”。 注意 属于不同协议或不同主机的两个地址之间不能互相引用对方的 location 对象，这是出于安全性的需要。例如，当前窗口打开的是“www.a.com”下面的某一页，另外一个窗口（对象名为：bWindow）打开的是“www.b.com”的网页。如果在当前窗口使用“bWindow.location”，就会出错：“没有权限”。这个错误是不能用错误处理程序（Event Handler，参阅 onerror 事件)来接收处理的。 属性 protocol 返回地址的协议，取值为 'http:','https:','file:' 等等。 hostname 返回地址的主机名，例如，一个“http://www.microsoft.com/china/”的地址，location.hostname == 'www.microsoft.com'。 port 返回地址的端口号，一般 http 的端口号是 '80'。 host 返回主机名和端口号，如：'www.a.com:8080'。 pathname 返回路径名，如“http://www.a.com/b/c.html”，location.pathname == 'b/c.html'。 hash 返回“#”以及以后的内容，如“http://www.a.com/b/c.html#chapter4”，location.hash == '#chapter4'；如果地址里没有“#”，则返回空字符串。 search 返回“?”以及以后的内容，如“http://www.a.com/b/c.asp?selection=3&jumpto=4”，location.search == '?selection=3&jumpto=4'；如果地址里没有“?”，则返回空字符串。 href 返回以上全部内容，也就是说，返回整个地址。在浏览器的地址栏上怎么显示它就怎么返回。如果想一个窗口对象打开某地址，可以使用“location.href = '...'”，也可以直接用“location = '...'”来达到此目的。 方法 reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。 replace() 打开一个 URL，并取代历史对象中当前位置的地址。用这个方法打开一个 URL 后，按下浏览器的“后退”键将不能返回到刚才的页面。 frames[ ]; Frame 框架对象 一个框架内的网页也是 window 对象，也就是说，Frame 对象也是 window 对象。用最容易理解的话说，每一个 HTML 文件占用一个 window 对象，包括定义框架的网页（“框架网页”）。在 IE 里用“<iframe>”标记在文档中插入的框架也是 window 对象，但是用“包含网页”的方法（在 HTML 中显示为“<!--webbot bot="include" ... -->”）读取的 HTML 就不占用独自的 window 对象。每一个框架都是包含它的页的 window 对象的一个子对象（不知道应该叫“属性”不该），要引用它，可以用以下几种方法之一： window.frames[x] window.frames['frameName'] window.frameName 其中，x 指的是该 window 对象中指定的第几个框架，与其它数组一样，x 也是从零开始的。frameName 指的是该框架的名字，跟<frame>里的“name”属性一样。 如果使用 window.frameName 指定的 window 对象又是一个框架网页，那么引用它的框架的方法：window.frameName.subFrameName。以此类推。 要注意的时，无论在何处，引用“window”对象所返回的，都是“当前”window 对象。如果要访问其它 window 对象，就要用到 parent 和 top 属性。parent 指的是“父级”window 对象，也就是包含当前 window 对象的框架网页；top 指的是窗口最顶端的 window 对象。 使用框架还要密切留意你的 JavaScript 中定义的全局变量和自定义函数。它们都有它们的所属——所在的 window 对象。要引用其它框架中的全局变量或自定义函数，都要用“窗口对象.框架对象[.框架对象…].全局变量或自定义函数”这种很烦的方法。 以上这个问题在建立连接时经常会被忽略：如果在<head>中定义了一个默认目标窗口（<base target="...">），在<a href="javascript:...">中，要知道输入的 JavaScript 语句是在默认目标窗口中运行的，必要时加一些“parent”“top”属性。 document 文档对象 描述当前窗口或指定窗口对象的文档。它包含了文档从<head>到</body>的内容。 用法：document （当前窗口） 或 <窗口对象>.document （指定窗口） 属性 cookie 关于 cookie 请参看“使用框架和 Cookies”一章。 lastModified 当前文档的最后修改日期，是一个 Date 对象。 referrer 如果当前文档是通过点击连接打开的，则 referrer 返回原来的 URL。 title 指<head>标记里用<title>...</title>定义的文字。在 Netscape 里本属性不接受赋值。 fgColor 指<body>标记的 text 属性所表示的文本颜色。 bgColor 指<body>标记的 bgcolor 属性所表示的背景颜色。 linkColor 指<body>标记的 link 属性所表示的连接颜色。 alinkColor 指<body>标记的 alink 属性所表示的活动连接颜色。 vlinkColor 指<body>标记的 vlink 属性所表示的已访问连接颜色。 方法 open() 打开文档以便 JavaScript 能向文档的当前位置（指插入 JavaScript 的位置）写入数据。通常不需要用这个方法，在需要的时候 JavaScript 自动调用。 write(); writeln() 向文档写入数据，所写入的会当成标准文档 HTML 来处理。writeln() 与 write() 的不同点在于，writeln() 在写入数据以后会加一个换行。这个换行只是在 HTML 中换行，具体情况能不能够是显示出来的文字换行，要看插入 JavaScript 的位置而定。如在<pre>标记中插入，这个换行也会体现在文档中。 clear() 清空当前文档。 close() 关闭文档，停止写入数据。如果用了 write[ln]() 或 clear() 方法，就一定要用 close() 方法来保证所做的更改能够显示出来。如果文档还没有完全读取，也就是说，JavaScript 是插在文档中的，那就不必使用该方法。 现在我们已经拥有足够的知识来做以下这个很多网站都有的弹出式更新通知了。 <script language="JavaScript"> <!-- var whatsNew = open('','_blank','top=50,left=50,width=200,height=300,' + 'menubar=no,toolbar=no,directories=no,location=no,' + 'status=no,resizable=no,scrollbars=yes'); whatsNew.document.write('<center><b>更新通知</b></center>'); whatsNew.document.write('<p>最后更新日期：00.08.01'); whatsNew.document.write('<p>00.08.01：增加了“我的最爱”栏目。'); whatsNew.document.write('<p align="right">' + '<a href="javascript:self.close()">关闭窗口</a>'); whatsNew.document.close(); --> </script> 当然也可以先写好一个 HTML 文件，在 open() 方法中直接 load 这个文件。 anchors[ ]; links[ ]; Link 连接对象 用法：document.anchors[[x]]; document.links[[x]]; <anchorId>; <linkId> document.anchors 是一个数组，包含了文档中所有锚标记（包含 name 属性的<a>标记），按照在文档中的次序，从 0 开始给每个锚标记定义了一个下标。 document.links 也是一个数组，包含了文档中所有连接标记（包含 href 属性的<a>标记和<map>标记段里的<area>标记），按照在文档中的次序，从 0 开始给每个连接标记定义了一个下标。 如果一个<a>标记既有 name 属性，又有 href 属性，则它既是一个 Anchor 对象，又是一个 Link 对象。 在 IE 中，如果在<a>标记中添加“id="..."”属性，则这个<a>对象被赋予一个标识（ID），调用这个对象的时候只需要使用“<id>”就行了。很多文档部件都可以用这个方法来赋予 ID，但要注意不能有两个 ID 相同。 anchors 和 links 作为数组，有数组的属性和方法。单个 Anchor 对象没有属性；单个 Link 对象的属性见下。 属性 protocol; hostname; port; host; pathname; hash; search; href 与 location 对象相同。 target 返回/指定连接的目标窗口（字符串），与<a>标记里的 target 属性是一样的。 事件 onclick; onmouseover; onmouseout; onmousedown; onmouseup applets[ ] Java小程序对象 它是一个数组，包含了文档中所有的 Applet 对象（Java 小程序）。作为一个数组，有数组的属性和方法。关于单个 Applet 对象的属性和方法，我引用一句话：“Applet 对象继承了 Java 小程序的所有公共属性和方法。”(英文原句：The Applet object inherits all public properties of the Java applet./The Applet object inherits all public methodss of the Java applet.) 因为本人很厌恶 Java 小程序，所以对它的什么“公共”“私有”的问题不感兴趣，也就没有探讨了。 embeds[ ] 插件对象 它是一个数组，包含了文档中所有的插件（<embed>标记）。因为每个插件的不同，每个 Embed 对象也有不同的属性和方法。 forms[ ]; Form 表单对象 document.forms[] 是一个数组，包含了文档中所有的表单（<form>）。要引用单个表单，可以用 document.forms[x]，但是一般来说，人们都会这样做：在<form>标记中加上“name="..."”属性，那么直接用“document.<表单名>”就可以引用了。 Form 对象的属性 name 返回表单的名称，也就是<form name="...">属性。 action 返回/设定表单的提交地址，也就是<form action="...">属性。 method 返回/设定表单的提交方法，也就是<form method="...">属性。 target 返回/设定表单提交后返回的窗口，也就是<form target="...">属性。 encoding 返回/设定表单提交内容的编码方式，也就是<form enctype="...">属性。 length 返回该表单所含元素的数目。 方法 reset() 重置表单。这与按下“重置”按钮是一样的。 submit() 提交表单。这与按下“提交”按钮是一样的。 事件 onreset; onsubmit 以下从“Button”到“Textarea”都是表单的元素对象。 Button 按钮对象 由“<input type="button">”指定。引用一个 Button 对象，可以使用“<文档对象>.<表单对象>.<按钮名称>”。<按钮名称>指在<input>标记中的“name="..."”属性的值。引用任意表单元素都可以用这种方法。 属性 name 返回/设定用<input name="...">指定的元素名称。 value 返回/设定用<input value="...">指定的元素的值。 form 返回包含本元素的表单对象。 方法 blur() 从对象中移走焦点。 focus() 让对象获得焦点。 click() 模拟鼠标点击该对象。 事件 onclick; onmousedown; onmouseup Checkbox 复选框对象 由“<input type="checkbox">”指定。 属性 name 返回/设定用<input name="...">指定的元素名称。 value 返回/设定用<input value="...">指定的元素的值。 form 返回包含本元素的表单对象。 checked 返回/设定该复选框对象是否被选中。这是一个布尔值。 defaultChecked 返回/设定该复选框对象默认是否被选中。这是一个布尔值。 方法 blur() 从对象中移走焦点。 focus() 让对象获得焦点。 click() 模拟鼠标点击该对象。 事件 onclick elements[ ]; Element 表单元素对象 <表单对象>.elements 是一个数组，包含了该表单所有的对象。一般我们不用该数组，而直接引用各个具体的对象。 Hidden 隐藏对象 由“<input type="hidden">”指定。 属性 name 返回/设定用<input name="...">指定的元素名称。 value 返回/设定用<input value="...">指定的元素的值。 form 返回包含本元素的表单对象。 Password 密码输入区对象 由“<input type="password">”指定。 属性 name 返回/设定用<input name="...">指定的元素名称。 value 返回/设定密码输入区当前的值。 defaultValue 返回用<input value="...">指定的默认值。 form 返回包含本元素的表单对象。 方法 blur() 从对象中移走焦点。 focus() 让对象获得焦点。 select() 选中密码输入区里全部文本。 事件 onchange Radio 单选域对象 由“<input type="radio">”指定。一组 Radio 对象有共同的名称（name 属性），这样的话，document.formName.radioName 就成了一个数组。要访问单个 Radio 对象就要用：document.formName.radioName[x]。 单个 Radio 对象的属性 name 返回/设定用<input name="...">指定的元素名称。 value 返回/设定用<input value="...">指定的元素的值。 form 返回包含本元素的表单对象。 checked 返回/设定该单选域对象是否被选中。这是一个布尔值。 defaultChecked 返回/设定该对象默认是否被选中。这是一个布尔值。 方法 blur() 从对象中移走焦点。 focus() 让对象获得焦点。 click() 模拟鼠标点击该对象。 事件 onclick Reset 重置按钮对象 由“<input type="reset">”指定。因为 Reset 也是按钮，所以也有 Button 对象的属性和方法。至于“onclick”事件，一般用 Form 对象的 onreset 代替。 Select 选择区（下拉菜单、列表）对象 由“<select>”指定。 属性 name 返回/设定用<input name="...">指定的元素名称。 length 返回 Select 对象下选项的数目。 selectedIndex 返回被选中的选项的下标。这个下标就是在 options[] 数组中该选项的位置。如果 Select 对象允许多项选择，则返回第一个被选中的选项的下标。 form 返回包含本元素的表单对象。 方法 blur() 从对象中移走焦点。 focus() 让对象获得焦点。 事件 onchange options[ ]; Option 选择项对象 options[] 是一个数组，包含了在同一个 Select 对象下的 Option 对象。Option 对象由“<select>”下的“<options>”指定。 options[ ] 数组的属性 length; selectedIndex 与所属 Select 对象的同名属性相同。 单个 Option 对象的属性 text 返回/指定 Option 对象所显示的文本 value 返回/指定 Option 对象的值，与<options value="...">一致。 index 返回该 Option 对象的下标。对此并没有什么好说，因为要指定特定的一个 Option 对象，都要先知道该对象的下标。这个属性好像没有什么用。 selected 返回/指定该对象是否被选中。通过指定 true 或者 false，可以动态的改变选中项。 defaultSelected 返回该对象默认是否被选中。true / false。 Submit 提交按钮对象 由“<input type="submit">指定。因为 Submit 也是按钮，所以也有 Button 对象的属性和方法。至于“onclick”事件，一般用 Form 对象的 onsubmit 代替。 Text 文本框对象 由“<input type="text">”指定。Password 对象也是 Text 对象的一种，所以 Password 对象所有的属性、方法和事件，Text 对象都有。 Textarea 多行文本输入区对象 由“<textarea>”指定。Textarea 对象所有的属性、方法和事件和 Text 对象相同，也就是跟 Password 对象一样。 images[ ]; Image 图片对象 document.images[] 是一个数组，包含了文档中所有的图片（<img>）。要引用单个图片，可以用 document.images[x]。如果某图片包含“name”属性，也就是用“<img name="...">”这种格式定义了一幅图片，就可以使用“document.images['...']”这种方法来引用图片。在 IE 中，如果某图片包含 ID 属性，也就是用“<img id="...">”这种格式定义了一幅图片，就可以直接使用“<imageID>”来引用图片。 单个 Image 对象的属性 name; src; lowsrc; width; height; vspace; hspace; border 这些属性跟<img>标记里的同名属性是一样的。在 Netscape 里，除了 src 属性，其它属性（几乎全部）都不能改的，即使改了，在文档中也不能显示出效果来。这些属性最有用的就是 src 了，通过对 src 属性赋值，可以实时的更改图片。 事件 onclick 不显示在文档中的 Image 对象 不显示在文档中的 Image 对象是用 var 语句定义的： var myImage = new Image(); 或 var myImage = new Image(<图片地址字符串>); 然后就可以像一般 Image 对象一样对待 myImage 变量了。不过既然它不显示在文档中，以下属性：lowsrc, width, height, vspace, hspace, border 就没有什么用途了。一般这种对象只有一个用：预读图片(preload)。因为当对对象的 src 属性赋值的时候，整个文档的读取、JavaScript 的运行都暂停，让浏览器专心的读取图片。预读图片以后，浏览器的缓存里就有了图片的 Copy，到真正要把图片放到文档中的时候，图片就可以立刻显示了。现在的网页中经常会有一些图像连接，当鼠标指向它的时候，图像换成另外一幅图像，它们都是先预读图像的。 navigator 浏览器对象 反映了当前使用的浏览器的资料。 Document |--- Anchor |--- Area |--- Base |--- Body |--- Button |--- Event |--- Frame |--- Frameset |--- IFrame |--- Image |--- Link |--- Meta |--- Object |--- Style |--- Table |--- TableCell |--- TableRow |--- Form |--- Input Button |--- Input Checkbox |--- Input File |--- Input Hidden |--- Input Password |--- Input Radio |--- Input Reset |--- Input Submit |--- Input Text |--- Input Textarea |--- Select |--- Option | | |
| |
| |
| |
| |
Dom元素基本操作方法API，先记录下，方便以后使用。
W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结 构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个 元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。
DOM独立于具体的编程语言，通常通过JavaScript访问DOM，不过并不严格要求这样。可以使用任何脚本语言来访问DOM，这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性，表3-2列出了一些有用的方法。
表3-1 用于处理XML文档的DOM元素属性
属性名 描述
childNodes 返回当前元素所有子元素的数组
firstChild 返回当前元素的第一个下级子元素
lastChild 返回当前元素的最后一个子元素
nextSibling 返回紧跟在当前元素后面的元素
nodeValue 指定表示元素值的读/写属性
parentNode 返回元素的父节点
previousSibling 返回紧邻当前元素之前的元素
表3-2 用于遍历XML文档的DOM元素方法
方法名 描述
getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素
getElementsByTagName_r(name) 返回当前元素中有指定标记名的子元素的数组
hasChildNodes() 返回一个布尔值，指示元素是否有子元素
getAttribute(name) 返回元素的属性值，属性由name指定
有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。
从下面的例子可以看到，使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表，各个州按地区划分。
表3-3 动态创建内容时所用的W3C DOM属性和方法
属性/方法 描述
document_createElement_x_x_x(tagName) 文档对象上的createElement_x_x_x方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素
document_createTextNode(text) 文档对象的createTextNode方法会创建一个包含静态文本的节点
<element>.a(childNode) a方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如，可以增加一个option元素，作为select元素的子节点
<element>.getAttribute(name)
<element>.setAttribute(name, value)这些方法分别获得和设置元素中name属性的值
<element>.insertBefore(newNode, targetNode)将节点newNode作为当前元素的子节点插到targetNode元素前面
<element>.removeAttribute(name) 这个方法从元素中删除属性name
<element>.removeChild(childNode) 这个方法从元素中删除子元素childNode
<element>.replaceChild(newNode, oldNode) 这个方法将节点oldNode替换为节点newNode
<element>.hasChildnodes() 这个方法返回一个布尔值，指示元素是否有子元素
Document－－最顶层的节点，所有的其他节点都是附属于它的。
DocumentType－－DTD引用（使用<!DOCTYPE>语法）的对象表现形式，它不能包含子节点。
DocumentFragment－－可以像Document一样来保存其他节点。
Element－－表示起始标签和结束标签之间的内容，例如<tag></tab>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。
Attr－－代表一对特性名和特性值。这个节点类型不能包含子节点。
Text－－代表XML文档中的在起始标签和结束标签之间，或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。
CDataSection－－<![CDATA[]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。
Entity－－表示在DTD中的一个实体定义，例如<!ENTITY foo"foo">。这个节点类型不能包含子节点。
EntityReference－－代表一个实体引用，例如"。这个节点类型不能包含子节点。
ProcessingInstruction－－代表一个PI。这个节点类型不能包含子节点。
Comment－－代表XML注释。这个节点不能包含子节点。
Notation－－代表在DTD中定义的记号。这个很少用到。
Node接口定义了所有节点类型都包含的特性和方法。
特性/方法 类型/返回类型 说明
nodeName String 节点的名字;根据节点的类型而定义
nodeValue String 节点的值;根据节点的类型而定义
nodeType Number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
firstChild Node 指向在childNodes列表中的第一个节点
lastChild Node 指向在childNodes列表中的最后一个节点
childNodes NodeList 所有子节点的列表
previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling Node 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes() Boolean 当childNodes包含一个或多个节点时,返回真
attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象;仅用于Element节点
a(node) Node 将node添加到childNodes的末尾
removeChild(node) Node 从childNodes中删除node
replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode) Node 在childNodes中的refnode之前插入newnodd
除节点外，DOM还定义了一些助手对象，它们可以和节点一起使用，但不是DOM文档必有的部分。
NodeList－－节点数组，按照数值进行索引;用来表示和一个元素的子节点。
NamedNodeMap－－同时使用数值和名字进行索引的节点表;用于表示元素特性。
2.访问相关的节点
下面的几节中考虑下面的HTML页面
1<html>
2 <head>
3 <title>DOM Example</title>
4 </head>
5 <body>
6 <p>Hello World!</p>
7 <p>Isn't this exciting?</p>
8 <p>You're learning to use the DOM!</p>
9 </body>
10</html>
要访问<html/>元素（你应该明白这是该文件的document元素），你可以使用document的documentElement特性：
var oHtml = document.documentElement;
现在变量oHtml包含一个表示<html/>的HTMLElement对象。如果你想取得<head/>和<body/>元素，下面的可以实现：
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
也可以使用childNodes特性来完成同样的工作。只需把它当成普通的javascript array，使用方括号标记：
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
注意方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法：
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
HTML DOM页定义了document.body作为指向<body/>元素的指针。
var oBody = ducument.body;
有了oHtml,oHead和oBody这三个变量，就可以尝试确定它们之间的关系：
alert(oHead.parentNode==oHtml);
alert(oBody.parentNode==oHtml);
alert(oBody.previousSibling==oHead);
alert(bHead.nextSibling==oBody);
alert(oHead.ownerDocument==document);
以上均outputs "true"。
3.处理特性
正如前面所提到的，即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有
Element节点才能有特性。
Element节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法：
getNamedItem(name)－－返回nodename属性值等于name的节点;
removeNamedItem(name)－－删除nodename属性值等于name的节点;
setNamedItem(node)－－将node添加到列表中，按其nodeName属性进行索引;
item(pos)－－像NodeList一样，返回在位置pos的节点;
注：请记住这些方法都是返回一个Attr节点，而非特性值。
NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。
当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，这的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。例如，假设有这样一个元素：
<p style="color:red" id="p1">Hello world!</p>
同时，假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值:
var sId = oP.attributes.getNamedItem("id").nodeValue;
当然，还可以用数值方式访问id特性，但这样稍微有些不直观：
var sId = oP.attributes.item(1).nodeValue;
还可以通过给nodeValue属性赋新值来改变id特性：
oP.attributes.getNamedItem("id").nodeValue="newId";
Attr节点也有一个完全等同于(同时也完全同步于)nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。
因为这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性：
getAttribute(name)－－等于attributes.getNamedItem(name).value;
setAttribute(name,newvalue)－－等于attribute.getNamedItem(name).value=newvalue;
removeAttribute(name)－－等于attribute.removeNamedItem(name)。
4.访问指定节点
(1)getElementsByTagName_r()
核 心(XML) DOM定义了getElementsByTagName_r()方法，用来返回一个包含所有的tagName(标签名)特性等于某个指定值的元素的 NodeList。在Element对象中，tagName特性总是等于小于号之后紧跟随的名称－－例如，<img />的tagName是"img"。下一行代码返回文档中所有<img />元素的列表：
var oImgs = document.getElementsByTagName_r("img");
把所有图形都存于oImgs后，只需使用方括号或者Item()方法（getElementsByTagName_r()返回一个和childNodes一样的NodeList），就可以像访问子节点那样逐个访问这些节点了：
alert(oImgs[0].tagName); //outputs "IMG"
假如只想获取在某个页面第一个段落的所有图像，可以通过对第一个段落元素调用getElementsByTagName_r()来完成，像这样：
var oPs = document.getElementByTagName("p");
var oImgsInp = oPs[0].getElementByTagName("img");
可以使用一个星号的方法来获取document中的所有元素：
var oAllElements = document.getElementsByTagName_r("*");
当参数是一个星号的时候，IE6.0并不返回所有的元素。必须使用document.all来替代它。
(2)getElementsByName()
HTML DOM 定义了getElementsByName()，这用来获取所有name特性等于指定值的元素的。
(3)getElementById()
这是HTML DOM定义的第二种方法，它将返回id特性等于指定值的元素。在HTML中，id特性是唯一的－－这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。
注：如果给定的ID匹配某个元素的name特性，IE6.0还会返回这个元素。这是一个bug，也是必须非常小心的一个问题。
5.创建新节点
createDocumentFragment()－－创建文档碎片节点
createElement_x_x_x(tagname)－－创建标签名为tagname的元素
createTextNode(text)－－创建包含文本text的文本节点
createElement_x_x_x()、createTextNode()、a()
1<html>
2 <head>
3 <title>createElement_x_x_x() Example</title>
4 <script type="text/javascript">
5 function createMessage() {
6 var oP = document_createElement_x_x_x("p");
7 var oText = document_createTextNode("Hello World!");
8 oP.a(oText);
9 document.body.a(oP);
10 }
11 </script>
12 </head>
13 <body οnlοad="createMessage()">
14 </body>
15</html>
removeChild()、replaceChild()、insertBefore()
删除节点
1<html>
2 <head>
3 <title>removeChild() Example</title>
4 <script type="text/javascript">
5 function removeMessage() {
6 var oP = document.body.getElementsByTagName_r("p")[0];
7 oP.parentNode.removeChild(oP);
8 }
9 </script>
10 </head>
11 <body οnlοad="removeMessage()">
12 <p>Hello World!</p>
13 </body>
14</html>
替换
1<html>
2 <head>
3 <title>replaceChild() Example</title>
4 <script type="text/javascript">
5 function replaceMessage() {
6 var oNewP = document_createElement_x_x_x("p");
7 var oText = document_createTextNode("Hello Universe!");
8 oNewP.a(oText);
9 var oOldP = document.body.getElementsByTagName_r("p")[0];
10 oOldP.parentNode.replaceChild(oNewP, oOldP);
11 }
12 </script>
13 </head>
14 <body οnlοad="replaceMessage()">
15 <p>Hello World!</p>
16 </body>
17</html
新消息添加到旧消息之前
1<html>
2 <head>
3 <title>insertBefore() Example</title>
4 <script type="text/javascript">
5 function insertMessage() {
6 var oNewP = document_createElement_x_x_x("p");
7 var oText = document_createTextNode("Hello Universe!");
8 oNewP.a(oText);
9 var oOldP = document.getElementsByTagName_r("p")[0];
10 document.body.insertBefore(oNewP, oOldP);
11 }
12 </script>
13 </head>
14 <body οnlοad="insertMessage()">
15 <p>Hello World!</p>
16 </body>
17</html>
createDocumentFragment()
一 旦把节点添加到document.body（或者它的后代节点）中，页面就会更新并反映出这个变化。对于少量的更新，这是很好的，然而，当要向 document添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然 后把文档碎片的内容一次性添加到document中，假如想创建十个新段落
1<html>
2 <head>
3 <title>insertBefore() Example</title>
4 <script type="text/javascript">
5 function addMessages() {
6 var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
7
8 var oFragment = document_createDocumentFragment();
9
10 for (var i=0; i < arrText.length; i++) {
11 var oP = document_createElement_x_x_x("p");
12 var oText = document_createTextNode(arrText[i]);
13 oP.a(oText);
14 oFragment.a(oP);
15 }
16
17 document.body.a(oFragment);
18
19 }
20 </script>
21 </head>
22 <body οnlοad="addMessages()">
23
24 </body>
25</html>
6.让特性像属性一样
大部分情况下，HTML DOM元素中包含的所有特性都是可作为属性。
假设有如下图像元素：
<img src = "mypicture.jpg" border=0 />
如果要使用核心的DOM来获取和设置src和border特性，那么要用getAttribute()和setAttribute()方法：
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jpg");
oImg.setAttribute("border",1);
然而，使用HTML DOM，可以使用同样名称的属性来获取和设置这些值：
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border ="1";
唯一的特性名和属性名不一样的特例是class属性，它是用来指定应用于某个元素的一个CSS类，因为class在ECMAScript中是一个保留字，在javascript中，它不能被作为变量名、属性名或都函数名。于是，相应的属性名就变成了className;
注：IE在setAttribute()上有很大的问题，最好尽可能使用属性。
7.table方法
为了协助建立表格，HTML DOM给<table/>,<tbody/>和<tr/>等元素添加了一些特性和方法。
给<table/>元素添加了以下内容：
特性/方法 说明
caption 指向<caption/>元素并将其放入表格
tBodies <tbody/>元素的集合
tFoot 指向<tfoot/>元素（如果存在）
tHead 指向<thead/>元素（如果存在）
rows 表格中所有行的集合
createTHead() 创建<thead/>元素并将其放入表格
createTFood() 创建<tfoot/>元素并将其放入表格
createCpation() 创建<caption/>元素并将其放入表格
deleteTHead() 删除<thead/>元素
deleteTFood() 删除<tfoot/>元素
deleteCaption() 删除<caption/>元素
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一个新行
<tbody/>元素添加了以下内容
特性/方法 说明
rows <tbody/>中所有行的集合
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一个新行
<tr/>元素添加了以下内容
特性/方法 说明
cells <tr/>元素中所有的单元格的集合
deleteCell(postion) 删除给定位置上的单元格
insertCell(postion) 在cells集合的给点位置上插入一个新的单元格
function parseDom(arg) {
var objE = document_createElement_x_x("div");
objE.innerHTML = arg;
return objE.childNodes;
};
var obj=parseDom('<div id="div_1" class="div1">Hello World!</div>');
var obj=parseDom('<div id="div_1" class="div1">Hello World!</div><span>多个也没关系</span>');
原文地址：http://apps.hi.baidu.com/share/detail/17360133