三.HTML DOM 对象列表 & 一切从 Document 对象开始

最新推荐文章于 2024-08-25 18:26:48 发布

zf213

最新推荐文章于 2024-08-25 18:26:48 发布

阅读量657

点赞数

分类专栏： jQuery 文章标签：文档 html input button forms internet

jQuery 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

HTML DOM 对象列表

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没有

<!--


var
 i,
origLength;


origLength =
 document.all
.length
;
//文档中所有 HTML 元素的个数


document.write
(
'document.all.length='
+
origLength+
"<br />"
)
;


for
 (
i =
 0
;
 i <
 origLength;
 i++
)


{


document.write
(
"document.all["
+
i+
"]="
+
document.all
[
i]
.tagName
+
"<br />"
)
;
//所有元素的标签名


}


//-->

说明：

all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。

all[] 已经被 Document 接口的标准的 getElementByid() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此，这个 all[] 数组在已有的代码中仍然使用。

all[] 包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接从数组中提取它们。然而，更为常见的是使用 all[] 数组，根据它们的 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name，将得到共享同一名称的元素的一个数组。

anchors[]

说明：anchors 集合可返回对文档中所有 Anchor 对象的引用。

测试：

<a
 name
=
"first"
>
First anchor</
a
><br
 /
>


<a
 name
=
"second"
>
Second anchor</
a
><br
 /
>


<a
 name
=
"third"
>
Third anchor</
a
><br
 /
>

document.write
(
document.anchors
.length
)
;


//返回文档中锚的数目 


document.write
(
document.anchors
[
0
]
.innerHTML
)


//返回文档中第一个锚的内容

forms[]

forms 集合可返回对文档中所有 Form 对象的引用。

测试：

<form
 name
=
"Form1"
></
form
>


<form
 name
=
"Form2"
></
form
>


<form
 name
=
"Form3"
></
form
>

 //计算文档中表单的数目


document.write
(
"This document contains: "
)
;


document.write
(
document.forms
.length
 +
 " forms."
)
;


 

//访问集合中的项目 


document.write
(
"<p>第一个表单名称是："
 +
 document.forms
[
0
]
.name
 +
 "</p>"
)


document.write
(
"<p>第一个表单名称是："
 +
 document.getElementById
(
"Form1"
)
.name
 +
 "</p>"
)

images[]

images[] 集合可返回对文档中所有 Image 对象的引用。

测试:

1

2

<img
 src
=
"http://cssrainbow.cn/wp-content/themes/rainbow/images/subscribeViaEmail.png"
 alt
=
"subscribeViaEmail"
>


<img
 src
=
"http://cssrainbow.cn/wp-content/themes/rainbow/images/subscribeViaRSS.png"
 alt
=
"subscribeViaRSS"
>

  var
 img_src=
''
;


  for
 (
i=
0
;
i<
document.images
.length
;
i++
)


  {


   img_src+=
document.images
[
i]
.src
+
"/n
"
;
//返回所有图片的路径名


  }


  alert
(
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 方法关闭文档，并迫使其内容显示出来。

测试:

function
 createNewDoc(
)


  {


  var
 newDoc=
document.open
(
"text/html"
,
"replace"
)
;


  var
 txt=
"<html><body>Learning about the DOM is FUN!</body></html>"
;


  newDoc.write
(
txt)
;


  newDoc.close
(
)
;


  }

1	`<input type = "button" value = "Write to a new document" onclick = "createNewDoc()" >`

zf213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三.HTML DOM 对象列表 & 一切从 Document 对象开始

HTML DOM 对象列表HTML DOM 对象列表对象描述Document代表整个 HTML 文档，可被用来访问页面中的所有元素Anchor代表元素Area代表图像映射中的元素Base代表元素Body代表元素Button代表元素Ev
复制链接

扫一扫