📄 dom2.html
字号:
<!-- check for different collection -->
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description"
content="Thau's JavaScript Tutorial: Day 1: Not only does Thau give the JavaScript skinny, but he'll have you writing your first script by the end of the day.">
<meta name="keywords"
content="javascript, hotwired, webmonkey, javascript, javascript tutorial, thau, dave thau, developer resource, developer, development, web
development, design, code, geek, warez, free, new, latest, news, tools,
info, tutorials, how-to, builder, web builder, page builder, javascript, hotwired, webmonkey, javascript, javascript tutorial, thau, dave thau, developer resource,
developer, development, web development, design, code, geek, warez, free,
new, latest, news, tools, info, tutorials, how-to, builder, web builder,
page builder">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>DOM</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#660099">
<table border="0" cellpadding="0" width="530" celspacing="0">
<tr>
<td width="530">
<div align="left">
<p><font face="geneva, arial, sans-serif" size="1"><b><font color="#99FFFF" size="2"><a href="../../design/index.html" target="_top">网页设计</a></font><font face="geneva, arial, sans-serif" size="1"> |
</font><a href="../../html/index.html" target="_top"><font color="#0000FF" size="2" face="宋体">HTML</font><font color="#0000FF" size="2">文件</font></a><font face="geneva, arial, sans-serif" size="1"> |
</font><a href="../../dynamic_html/index.html" target="_top"><font color="#0000FF" size="2">动态</font><font face="宋体" color="#0000FF" size="2">HTML</font><font color="#0000FF" size="2">文件</font></a><font face="geneva, arial, sans-serif" size="1"><a href="../../dynamic_html.htm">
</a> | <a href="../../stylesheets/index.html">Stylesheets</a> |
</font><font color="#99FFFF" size="2"><a href="../../graphics/index.html" target="_top">图形与字体</a></font><font face="geneva, arial, sans-serif" size="1"> |
</font><font color="#99FFFF" size="2"><a href="../../multimedia/index.html" target="_top">多媒体</a></font><font face="geneva, arial, sans-serif" size="1"> |
</font><small><br>
</small><font color="#99FFFF" size="2"><a href="../../browsers/index.html" target="_top">浏览器</a></font><font face="geneva, arial, sans-serif" size="1"> |
<a href="../../java/index.html">Java</a> | <a href="../../javascript/index.html">JavaScript</a> |
<nobr><a href="../../perl.html">Perl</a></nobr></font></b><small><strong><a href="../../perl/index.html" target="_top"><font size="2">语言</font></a></strong></small><font face="geneva, arial, sans-serif" size="1"><b><nobr> |
<a href="../../backend/index.html">Backend</a> | </nobr></b></font></font></p>
</div>
<p><font face="宋体"><nobr><!-- FILE PATH NAVIGATION --> <font size="5"><a
href="/index.html"><b>webmonkey</b></a>/<a
href="../index.html">javascript</a>/</font></nobr></font>
</td>
</tr>
</table>
<table border="0" cellpadding="3" width="532" celspacing="0">
<!-- AUTHOR IMAGE --> <!-- BUFFER -->
<tr>
<td rowspan="99" width="10"><font face="宋体"><img
src="http://static.wired.com/webmonkey/images/spacer.gif" width="10" height="1"></font></td>
<td align="right" colspan="2" width="165"></td>
<!-- HEADLINE -->
<td width="365"><font color="#FF3300" size="4" face="宋体"><br>
</font><font color="#FF0000"><strong><big>第2页：DOM的内部结构</big></strong></font><font
face="宋体"><br>
<!-- BYLINE --> </font><font color="#000000" size="2" face="宋体">作者：Taylor</font></td>
</tr>
<!-- SEE ALSO LINKS -->
<tr>
<td valign="bottom" width="155"></td>
<td rowspan="99" width="10"></td>
<td valign="top" rowspan="99" width="357" bgcolor="#FFFFFF"><font
face="verdana, arial, geneva, sans-serif" size="2"></font><font size="3"><font
face="宋体">DOM</font>通过生成对象发挥作用。对象还可以有子<br>
对象和属性，子对象还可以有子对象和属性，<br>
依此类推。对象通过进入对象树形等级结构进<br>
行引用，或者用<font face="宋体">HTML</font>元素和<font face="宋体">ID</font>属性（<font
face="宋体">(<tt><img <br>
src="foo.gif" <strong>ID="blueMarble"</strong>></tt>)</font>进行显示<br>
引用。
<p>一下是顶层对象的简要列表：<font face="宋体"> </font>
<ul>
<li>窗口<font face="宋体"> </font>
<ul>
<li>地址框<font face="宋体"> </font></li>
<li>分割窗口（分帧－<font face="宋体">frames</font>）<font face="宋体"> </font></li>
<li>历史记录（<font face="宋体">history</font>）<font face="宋体"> </font></li>
<li>导航（<font face="宋体">navigator</font>）<font face="宋体"> </font></li>
<li>事件（<font face="宋体">event</font>）<font face="宋体"> </font></li>
<li>屏幕（<font face="宋体">screen</font>）<font face="宋体"> </font></li>
<li>文件（<font face="宋体">document</font>）<font face="宋体"> </font>
<ul>
<li>链接（<font face="宋体">links</font>）<font face="宋体"> </font></li>
<li>定位（<font face="宋体">anchors</font>）<font face="宋体"> </font></li>
<li>图象（<font face="宋体">images</font>）<font face="宋体"> </font></li>
<li>过滤器（<font face="宋体">filters</font>）<font face="宋体"> </font></li>
<li>表单（<font face="宋体">forms</font>）<font face="宋体"> </font></li>
<li>小程序（<font face="宋体">applets</font>）<font face="宋体"> </font></li>
<li>嵌入（<font face="宋体">embeds</font>）<font face="宋体"> </font></li>
<li>插件（<font face="宋体">plug-ins</font>）<font face="宋体"> </font></li>
<li>分帧（<font face="宋体">frames</font>）<font face="宋体"> </font></li>
<li>编程语言（<font face="宋体">scripts</font>）<font face="宋体"> </font></li>
<li>全部（<font face="宋体">all</font>）<font face="宋体"> </font></li>
<li>选择（<font face="宋体">selection</font>）<font face="宋体"> </font></li>
<li>样式表（<font face="宋体">stylesheets</font>）<font face="宋体"> </font></li>
<li>主体（<font face="宋体">body</font>）<font face="宋体"> </font></li>
</ul>
</li>
</ul>
</li>
</ul>
<p>这只是简要的列表，特实际所包括的项目非<br>
常多。当你制作一个飞翔标题的特技时，你<br>
可以通过从属性等级的最高层开始往下一层<br>
一层引用到最终的项目，或者可以使用该项<br>
目的<font face="宋体">ID</font>或<font face="宋体"><tt>NAME</tt> </font>实现引用。如果你计划将页<br>
面的第<font face="宋体">23</font>个元素改变为可爱的蓝色，你可以<br>
这样做：
<ul>
<tt>
<p><font face="宋体">document.all(23).style.color = <br>
'blue'; </font></p>
</tt>
</ul>
<p>或者如果你知道该元素的名称是<font face="宋体">"Freddie"</font>，<br>
你可以引用它的名称：<font face="宋体"> </font>
<ul>
<tt>
<p><font face="宋体">document.all('Freddie').style.color = <br>
'blue'; </font></p>
</tt>
</ul>
<p>你还可以完全跳过属性等级结构引用方式：<font face="宋体"><br>
</font>
<ul>
<tt>
<p><font face="宋体">Freddie.style.color = 'blue'; </font></p>
</tt>
</ul>
<p>聪明的读者也许会发现不论我采用何种引用<br>
方式，我都用到一个子对象<font face="宋体">"style"</font>。整个<br>
对象用于任何可以应用串接样式表（<font face="宋体">CSS</font>）<br>
的元素，所以<font face="宋体"><tt><div></tt></font>可以用该子对象，但<br>
<font face="宋体"><tt><title></tt></font>不行。在样式对象（<font
face="宋体">style object</font>）<br>
下面是所有<font face="宋体">CSS </font>属性，包括<font face="宋体">CSS</font>定位元素。<br>
所以在谈论如何制作飞翔进入页面的标题特<br>
效时，实际是在谈如何控制一个对象的样式<br>
属性。</p>
</font>
<p><font size="3">本文只是简要介绍<font face="宋体">DOM</font>。<font face="宋体">DOM</font>内容十分丰富，<br>
利用它你可以作很多有趣的设计。在以后的<br>
文章中我将逐步谈到它的实际应用。你可以<br>
阅读<font face="宋体">W3C</font>正在起草的<font face="宋体">DOM</font>规范中的<a
href="http://www.w3.org/MarkUp/DOM/">对象</a>章节，<br>
以及微软的<font face="宋体"> <a
href="http://www.microsoft.com/msdn/sdk/inetsdk/help/default.htm">Software
Development Kit <br>
(SDK) for Internet Explorer</a></font>（互联网开<br>
发者的软件开放工具）。</font></p>
<font size="3">
<p><font face="宋体"> <br>
</font>第<font face="宋体">1</font>页：<a href="index.html">应用文件对象模块</a><font
face="宋体"><br>
<!-- PAGE X LINKS --> </font>第<font face="宋体">2</font>页：<a href="dom2.html"><font face="宋体">DOM</font>的内部结构</a></p>
</font>
<p><font size="2" face="宋体"><br>
<!-- AUTHOR TAGLINE --> </font>
</td>
</tr>
</table>
<p><font size="2" face="宋体"><br>
</font></p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -