javascript入门·Document对象入门讲解(访问表单，创建新页，获取页标题)

一 : Document访问页面多个表单
二 : Document.Title 得到页标题：这有个前提，是页标题必须在 head的title字段
三 : 演示三：Document.Write（） 创建新的页，一种是直接覆盖当前页 ，另种是打开新页

Document对象包含页面的实际内容，其属性和方法一般会影响到页内文档的外观和内容！

注意：浏览器允许在页面载入时动态创建内容，单是如果在页面载入完成以后再使用document.write()方法的话，将导致其清除页面现有对象，而从新建立你脚本内指定的对象（包括任何变量和值）。

Document访问页面多个表单：

表单在document.form[] 中已数组形式储存，所以我们可以使用 document.form[1].元素名.value 的形式访问，甚至可以使用 document.form.length或得页面总共的表单数。当然，为了减少我们出错的机会，我想最好还是使用 document.formName.元素名.value。这个我想如果看了我前面实例的话，不需要演示就能懂啦！算了，人家常说做人要厚道，我还是做个演示好了：细心点哦，引用表单使用了三种方法

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Document对象入门讲解(访问表单，创建新页，获取页标题)</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
<script language="javascript">
//下面HTM为一个新页面的代码，其中使用了 加等 连接符。
var htm="<html><head><title>我是新作的页面哦</title></head>";
htm+="<body><from name='neww'><h1>我是新页标题</h1><br>下面代码很简单的了，如果不明白，请去<a href='http://thcjp.cnblogs.com/' target='_blank'>天轰穿.net/ajax入门</a></from>";
htm+="</html></body>";
//下面再申明一个窗口对象的全局变量
var newwindo;
//构造动作
function newdoc()
{//覆盖本页
    newwindo=document.write(htm);
}
function newwin()
{
    newwindo=window.open("","","width=300 height=200");//打开一个新的页面
    newwindo.document.write(htm);//将HTM代码写入到新的页里面去
    newwindo.document.close();//关闭文本流,
}
</script>
</head>

<body>
<p>Document对象包含页面的实际内容，其属性和方法一般会影响到页内文档的外观和内容！</p>
<p class="STYLE1">注意：浏览器允许在页面载入时动态创建内容，单是如果在页面载入完成以后再使用document.write()方法的话，将导致其清除页面现有对象，而从新建立你脚本内指定的对象（包括任何变量和值）。</p>
<hr />
<p><strong>Document访问页面多个表单：</strong></p>
<p>表单在document.form[] 中已数组形式储存，所以我们可以使用  document.form[1].元素名.value 的形式访问，甚至可以使用 document.form.length或得页面总共的表单数。当然，为了减少我们出错的机会，我想最好还是使用 document.formName.元素名.value。这个我想如果看了我前面实例的话，不需要演示就能懂啦！算了，人家常说做人要厚道，我还是做个演示好了：细心点哦，引用表单使用了三种方法</p>
<p>该页目前我们放了两个from标签，我要得到第一个里面的按钮上的字，看好啦：</p>
<form id="form1" name="form1" method="post" action="">
  <input type="submit" name="one" value="第一个表单内的提交" />
</form>
<form id="form2" name="form2" method="post" action="">
  <input type="submit" name="two" value="不说都知道啦，是第二个提交" />
</form>
<form id="form3" name="form3" method="post" action="">
  <input name="txt" type="text" id="txt" value="引用我的表单使用的和前面不一样哦" />
</form>
<p>&nbsp;</p>
<table width="675" border="2" cellspacing="5" cellpadding="3">
  <tr>
    <td width="142">该页包含表单数量：</td>
    <td width="258"><script>document.write(document.forms.length)</script></td>
  </tr>
  <tr>
    <td>第一个按钮值是：</td>
    <td><script>document.write(window.document.forms[0].one.value)</script></td>
  </tr>
  <tr>
    <td>第二个按钮值是：</td>
    <td><script>document.write(document.forms[1].two.value)</script></td>
  </tr>
  <tr>
    <td>第四行赋的值是：</td>
    <td><script>document.write(document.form3.txt.value)</script></td>
  </tr>
</table>
<hr>
<p><strong>Document.Title 得到页标题</strong>：这有个前提，是页标题必须在 head的title字段</p>
<p>演示：查找并显示标题</p>
<p>本页标题是 ：<script> document.write(document.title) </script> </p>
<p>document.write（）动态创建内容：（天轰穿 ：“他不是吧？这个都用了几百次了，还要讲？”，，算了，你说得也对，不讲啦，不知道的自己去 <a href="http://thcjp.cnblogs.com/" target="_blank">天轰穿.net/ajax入门</a> 博客找教程去）</p>
<hr />
<p><strong>演示三：Document.Write（） 创建新的页，</strong>一种是直接覆盖当前页 ，另种是打开新页</p>
<p>我们先做两个按钮：</p>
<form id="form4" name="form4" method="post" action="">
  <input type="submit" name="Submit" value="从新布置本页" onclick="newdoc()" />　　　
  <input type="submit" name="Submit2" value="新开一个页" onclick="newwin()" />
</form>
</body>
</html>
posted @ 2007-11-27 14:22  曹振华  阅读(530)  评论(0)  编辑  收藏  举报