JS--JavaScript中的document对象概述、API详解、文档对象模型

最新推荐文章于 2022-09-27 21:28:42 发布

原创最新推荐文章于 2022-09-27 21:28:42 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JS #JSdocument #documentAPI #JS文档对象模型

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

本文介绍如何通过document对象访问和操作HTML文档中的元素，包括各种集合的使用及动态生成文档内容的方法。

document对象

在浏览器窗口中，每个对象都会包含一个document属性，该属性引用窗口中显示HTML文档的document对象。document对象与它所包含的各种节点（如表单、图像和链接）构成了文档对象模型。

在这里插入图片描述

访问文档对象

浏览器在加载文档时，会自动构建文档对象模型，把文档中同类元素对象映射到一个集合中，然后以document对象属性的形式允许用户访问。

以下集合都是HTMLCollection对象，为访问文档常用对象提供了快捷方式。

document.anchors：
返回文档中所有Anchor对象，即所有带name特性的< a > 标签
document.applets：
返回文档中所有Applet对象，即所有带< applet >的标签，不再推荐使用
document.forms：
返回文档中所有Form对象，与documentgetElementsByTagName(“form”)得到相同的结果
document.images：
返回文档中所有Image对象，与documentgetElementsByTagName(“img”)得到相同的结果
document.links：
返回文档中所有Area和Link对象，即所有带fref特性的 < a > 标签

示例：使用name访问文档元素

<img name="img" src = "bg.gif" />
<form name="form" method="post" action="http:://www.xxx.cn/navi/">
</form>
<script>
	//返回图像地址：3种方式
	alert(document.img.src);
	alert(document.images[0].src);
	alert(document.images["imag"].src);//通过name属性访问
	//返回表单提交的名称
	alert(document.form.action);
	alert(document.form[0].src);
	alert(document.forms["form"].src);//通过name属性访问
</script>

动态生成文档内容

使用document对象的write()和writeLn()方法可以动态生成文档内容。包括以下两种方式：

在浏览器解析时动态输出信息
在调用事件处理函数时使用write()或writeLn()方法生成文档内容

注意：write()方法可以包含多个参数，当它传递多个参数时，这些参数将被依次写入文档。

**示例：**使用open()方法可以为某个框架创建文档，也可以使用write()方法为其添加内容。在下面框架集文档中。左侧的文档为left1.html，而右侧框架还没有文档内容。
left1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload = function(){
				document.body.onclick = f;
			}
			function f(){
				parent.frames[1].document.open();
				parent.frames[1].document.write('<h2>动态生成右侧框架的标题</h2>');
				parent.frames[1].document.close();
			}
		</script>
	</head>
	<body>
		<h1>左侧的页面，单击页面动态生成右侧页面</h1>
	</body>
</html>

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset cols="*, *">
		<frame src="left1.html" name="leftFrame" id="leftFrame" />
		<frame src="" name="mainFrame" id="mainFrame" />
	</frameset>
	<body>
	</body>
</html>