会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
Asp.Net技术前瞻--张明Blog
博客园
::
首页
::
新随笔
::
联系
::
订阅
::
管理
公告
javascript里的document.all用法
Posted on
2006-09-23 16:45
张明
阅读(
1595
) 评论(
0
)
编辑
收藏
举报
1
、理解document.all[]
从IE4开始IE的object model才增加了document.all[],来看看document.all[]的Description:
Array of all HTML tags
in
the document.Collection of all elements contained by the
object
.
也就是说document.all[]是文档中所有标签组成的一个数组变量,包括了文档对象中所有元素(见例1)。
IE’s document.all collection exposes all document elements.This array provides access to every element
in
the document.
document.all[]这个数组可以访问文档中所有元素。
例1(这个可以让你理解文档中哪些是对象)
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head
>
<
title
>
Document.All Example
</
title
>
<
meta http
-
equiv
=
"
content-type
"
content
=
"
text/html; charset=ISO-8859-1
"
/>
</
head
>
<
body
>
<
h1
>
Example Heading
</
h1
>
<
hr
/>
<
p
>
This
is
a
<
em
>
paragraph
</
em
>
. It
is
only a
<
em
>
paragraph.
</
em
></
p
>
<
p
>
Yet another
<
em
>
paragraph.
</
em
></
p
>
<
p
>
This final
<
em
>
paragraph
</
em
>
has
<
em id
=
"
special
"
>
special emphasis.
</
em
></
p
>
<
hr
/>
<
script type
=
"
text/javascript
"
>
<!--
var i,origLength;
origLength
=
document.all.length;
document.write(
'
document.all.length=
'
+
origLength
+
"
<br />
"
);
for
(i
=
0
; i
<
origLength; i
++
)
{
document.write(
"
document.all[
"
+
i
+
"
]=
"
+
document.all[i].tagName
+
"
<br />
"
);
}
//
-->
</
script
>
</
body
>
</
html
>
输出结果:
Example Heading
--------------------------------------------------------------------------------
This
is
a paragraph. It
is
only a paragraph.
Yet another paragraph.
This final paragraph has special emphasis.
--------------------------------------------------------------------------------
document.all.length
=
18
document.all[
0
]
=!
document.all[
1
]
=
HTML
document.all[
2
]
=
HEAD
document.all[
3
]
=
TITLE
document.all[
4
]
=
META
document.all[
5
]
=
BODY
document.all[
6
]
=
H1
document.all[
7
]
=
HR
document.all[
8
]
=
P
document.all[
9
]
=
EM
document.all[
10
]
=
EM
document.all[
11
]
=
P
document.all[
12
]
=
EM
document.all[
13
]
=
P
document.all[
14
]
=
EM
document.all[
15
]
=
EM
document.all[
16
]
=
HR
document.all[
17
]
=
SCRIPT
例2(访问一个特定元素)
<!
DOCTYPE HTML PUBLIC
"
-//W3C//DTD HTML 4.01 Transitional//EN
"
"
http://www.w3.org/TR/html4/loose.dtd
"
>
<
html
>
<
head
>
<
meta http
-
equiv
=
"
Content-Type
"
content
=
"
text/html; charset=gb2312
"
>
<
title
>
单击DIV变色
</
title
>
<
style type
=
"
text/css
"
>
<!--
#docid
{
height:400px;
width:400px;
background
-
color:#
999
;}
-->
</
style
>
</
head
>
<
body
><
div id
=
"
docid
"
name
=
"
docname
"
onClick
=
"
bgcolor()
"
></
div
>
</
body
>
</
html
>
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
<!--
function bgcolor()
{
document.all[
7
].style.backgroundColor
=
"
#000
"
}
-->
</
script
>
上面的这个例子让你了解怎么访问文档中的一个特定元素,比如文档中有一个DIV
<
div id
=
"
docid
"
name
=
"
docname
"
></
div
>
,你可以通过这个DIV的ID,NAME或INDEX属性访问这个DIV:
document.all[
"
docid
"
]
document.all[
"
docname
"
]
document.all.item(
"
docid
"
)
document.all.item(
"
docname
"
)
document.all[
7
]
document.all.tags(
"
div
"
)则返回文档中所有DIV数组,本例中只有一个DIV,所以用document.all.tags(
"
div
"
)[
0
]就可以访问了。
2
、使用document.all[]
例3
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head
>
<
title
>
Document.All Example #
2
</
title
>
<
meta http
-
equiv
=
"
content-type
"
content
=
"
text/html; charset=ISO-8859-1
"
/>
</
head
>
<
body
>
<!--
Works
in
Internet Explorer and compatible
-->
<
h1 id
=
"
heading1
"
align
=
"
center
"
style
=
"
font-size: larger;
"
>
DHTML Fun
!!!</
h1
>
<
form name
=
"
testform
"
id
=
"
testform
"
action
=
"
#
"
method
=
"
get
"
>
<
br
/><
br
/>
<
input type
=
"
button
"
value
=
"
Align Left
"
onclick
=
"
document.all['heading1'].align='left';
"
/>
<
input type
=
"
button
"
value
=
"
Align Center
"
onclick
=
"
document.all['heading1'].align='center';
"
/>
<
input type
=
"
button
"
value
=
"
Align Right
"
onclick
=
"
document.all['heading1'].align='right';
"
/>
<
br
/><
br
/>
<
input type
=
"
button
"
value
=
"
Bigger
"
onclick
=
"
document.all['heading1'].style.fontSize='xx-large';
"
/>
<
input type
=
"
button
"
value
=
"
Smaller
"
onclick
=
"
document.all['heading1'].style.fontSize='xx-small';
"
/>
<
br
/><
br
/>
<
input type
=
"
button
"
value
=
"
Red
"
onclick
=
"
document.all['heading1'].style.color='red';
"
/>
<
input type
=
"
button
"
value
=
"
Blue
"
onclick
=
"
document.all['heading1'].style.color='blue';
"
/>
<
input type
=
"
button
"
value
=
"
Black
"
onclick
=
"
document.all['heading1'].style.color='black';
"
/>
<
br
/><
br
/>
<
input type
=
"
text
"
name
=
"
userText
"
id
=
"
userText
"
size
=
"
30
"
/>
<
input type
=
"
button
"
value
=
"
Change Text
"
onclick
=
"
document.all['heading1'].innerText=document.testform.userText.value;
"
/>
</
form
>
</
body
>
</
html
>
会员力量,点亮园子希望
刷新页面
返回顶部
Powered by:
博客园
Copyright © 2024 张明
Powered by .NET 8.0 on Kubernetes