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

朱雀 2021-08-13 12:26 551阅读 0赞

#### document对象 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

#### 访问文档对象 ####

浏览器在加载文档时，会自动构建文档对象模型，把文档中同类元素对象映射到一个集合中，然后以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>

首先调用document对象的open()方法创建一个文档，然后调用write()方法在文档中写入内容，最后调用document对象的方法close()结束创建过程。这样在框架页的左侧框架文档中单击时，浏览器会自动在右侧框架中新创建一个文档，并生成一个二级标题信息。

注意：使用open(0后，一定要注意调用close()方法关闭文档，只有在关闭文档时，浏览器才输出显示缓存信息。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/f12ba78ee4af4eea8f238d6c4419290c.png