传统的DHTML模型

￡神魔★判官ぃ 2022-05-12 00:42 164阅读 0赞

**一 DHTML对象模型包含关系图**

在下图中，window对象是整个对象模型的顶层对象，该对象包含document属性，该属性代表该窗口内的HTML文档，如果该窗口内有多个Frame，则可以使用frames\[\]方法依次访问该窗口的每个Frame。

document对象代表HTML文档本身，document对象又包含一系列的属性：forms、anchors、links、images......这些属性的返回值以关联数组的形式存在。

![8b3a14d6-a723-3a28-93a5-0002b480b86c.png][]

**二 代码**

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<title> DHTML模型 </title>
    </head>
    <body id="bd">
    	<a href="http://www.crazyit.org">疯狂Java联盟</a><br />
    	<img id="lee" src="http://www.crazyit.org/logo.jpg"
    	alt="疯狂Java联盟" /><br />
    	<form>
    		<input type="text" name="user" value="文本框"/><br />
    		<input type="button" id='bn' value="按钮"/>
    	</form>
    	<script type="text/javascript">
    		// 访问body元素
    		alert(document.body.id);
    		// 访问第一个超链接
    		alert(document.links[0].href);
    		// 访问id或name为lee的图片
    		alert(document.images['lee'].alt);
    		// 访问页面的第一个表单
    		form = document.forms[0];
    		alert(form.innerHTML);
    		// 访问表单里第一个元素
    		alert(form.elements[0].value);
    		// 访问表单里id或name为bn的元素
    		alert(form.elements['bn'].value);
    		// 下面的代码在Internet Explorer 6中可行
    		alert(document.all['bn'].value);
    	</script>
    </body>
    </html>

**三 运行结果**

![0104a445-5c43-3171-9335-03d7ec6e3276.png][]

[8b3a14d6-a723-3a28-93a5-0002b480b86c.png]: /images/20220512/5cb85e8084794119b267f4f87fdcc71d.png
[0104a445-5c43-3171-9335-03d7ec6e3276.png]: /images/20220512/0e678005fbe94e2e84f00066569657a9.png