三.HTML DOM 对象列表 & 一切从 Document 对象 开始
HTML DOM 对象列表
| 对象 | 描述 |
|---|---|
| Document | 代表整个 HTML 文档，可被用来访问页面中的所有元素 |
| Anchor | 代表 <a> 元素 |
| Area | 代表图像映射中的 <area> 元素 |
| Base | 代表 <base> 元素 |
| Body | 代表 <body> 元素 |
| Button | 代表 <button> 元素 |
| Event | 代表某个事件的状态 |
| Form | 代表 <form> 元素 |
| Frame | 代表 <frame> 元素 |
| Frameset | 代表 <frameset> 元素 |
| Iframe | 代表 <iframe> 元素 |
| Image | 代表 <img> 元素 |
| Input button | 代表 HTML 表单中的一个按钮 |
| Input checkbox | 代表 HTML 表单中的复选框 |
| Input file | 代表 HTML 表单中的文件上传 |
| Input hidden | 代表 HTML 表单中的隐藏域 |
| Input password | 代表 HTML 表单中的密码域 |
| Input radio | 代表 HTML 表单中的单选按钮 |
| Input reset | 代表 HTML 表单中的重置按钮 |
| Input submit | 代表 HTML 表单中的确认按钮 |
| Input text | 代表 HTML 表单中的文本输入域（文本框） |
| Link | 代表 <link> 元素 |
| Meta | 代表 <meta> 元素 |
| Object | 代表 <Object> 元素 |
| Option | 代表 <option> 元素 |
| Select | 代表 HTML 表单中的选择列表 |
| Style | 代表单独的样式声明 |
| Table | 代表 <table> 元素 |
| TableData | 代表 <td> 元素 |
| TableRow | 代表 <tr> 元素 |
| Textarea | 代表 <textarea> 元素 |
| PS:加色为重点学习和研究的目标 | |
一.从 Document 对象 开始
Document 对象代表整个 HTML 文档，可用来访问页面中的所有元素。
Document 对象是 Window 对象的一个部分，可通过 window.document 属性来访问。
Document 对象的描述
HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。
很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。
write() 方法 值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。
IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet 标准).
Document 对象的集合
| 集合 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| all[] | 返回对文档中所有 HTML 元素的引用。 | 4 | 1 | 9 | Yes |
| anchors[] | 返回对文档中所有 Anchor 对象的引用。 | 4 | 1 | 9 | Yes |
| applets | 返回对文档中所有 Applet 对象的引用。 | - | - | - | - |
| forms[] | 返回对文档中所有 Form 对象引用。 | 4 | 1 | 9 | Yes |
| images[] | 返回对文档中所有 Image 对象引用。 | 4 | 1 | 9 | Yes |
| links[] | 返回对文档中所有 Area 和 Link 对象引用。 | 4 | 1 | 9 | Yes |
all[]集合
测试 ：
IE特有的，FF没有
1 |
<!-- |
说明：
all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。
all[] 已经被 Document 接口的标准的 getElementByid() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此，这个 all[] 数组在已有的代码中仍然使用。
all[] 包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接从数组中提取它们。然而，更为常见的是使用 all[] 数组，根据它们的 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name，将得到共享同一名称的元素的一个数组。
anchors[]
说明：anchors 集合可返回对文档中所有 Anchor 对象的引用。
测试 ：
1 |
<a name = "first" > First anchor</ a ><br / > |
1 |
document.write ( document.anchors .length ) ; |
forms[]
forms 集合可返回对文档中所有 Form 对象的引用。
测试 ：
1 |
<form name = "Form1" ></ form > |
1 |
//计算文档中表单的数目 |
images[]
images[] 集合可返回对文档中所有 Image 对象的引用。
测试:
1 |
<img src = "http://cssrainbow.cn/wp-content/themes/rainbow/images/subscribeViaEmail.png" alt = "subscribeViaEmail" > |
1 |
var img_src= '' ; |
links[]
links 集合可返回对文档中所有 Area 和 Link 对象的引用。
注意：如果一个标记既有 name 属性，又有 href 属性，则它既是一个 Anchor 对象，又是一个 Link 对象。
Document 对象的属性
| 属性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| body | 提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。 | ||||
| cookie | 设置或返回与当前文档有关的所有 cookie。 | 4 | 1 | 9 | Yes |
| domain | 返回当前文档的域名。 | 4 | 1 | 9 | Yes |
| lastModified | 返回文档被最后修改的日期和时间。 | 4 | 1 | No | No |
| referrer | 返回载入当前文档的文档的 URL。 | 4 | 1 | 9 | Yes |
| title | 返回当前文档的标题。 | 4 | 1 | 9 | Yes |
| URL | 返回当前文档的 URL。 | 4 | 1 | 9 | Yes |
Document 对象的方法
| 方法 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 | 4 | 1 | 9 | Yes |
| getElementById() | 返回对拥有指定 id 的第一个对象的引用。 | 5 | 1 | 9 | Yes |
| getElementsByName() | 返回带有指定名称的对象集合。 | 5 | 1 | 9 | Yes |
| getElementsByTagName() | 返回带有指定标签名的对象集合。 | 5 | 1 | 9 | Yes |
| open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 | 4 | 1 | 9 | Yes |
| write() | 向文档写 HTML 表达式 或 JavaScript 代码。 | 4 | 1 | 9 | Yes |
| writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 | 4 | 1 | 9 | Yes |
open() & close()
重要事项：调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 close 方法关闭文档，并迫使其内容显示出来。
测试:
1 |
function createNewDoc( ) |
1 |
<input
type
=
"button"
value
=
"Write to a new document"
onclick
=
"createNewDoc()"
>
|