传统的DHTML模型

最新推荐文章于 2022-03-04 08:50:24 发布

iteye_5722

最新推荐文章于 2022-03-04 08:50:24 发布

阅读量193

点赞数

分类专栏： JavaScript 文章标签： DHTML

JavaScript 专栏收录该内容

188 篇文章 0 订阅

订阅专栏

一 DHTML对象模型包含关系图

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

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

二代码

<!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>

三运行结果