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

最新推荐文章于 2024-07-08 11:02:14 发布

thcjp

最新推荐文章于 2024-07-08 11:02:14 发布

阅读量1.1k

点赞数

分类专栏： JavaScript入门系列文章标签： javascript action input function 浏览器 table

本文链接：https://blog.youkuaiyun.com/thcjp/article/details/1144668

版权

JavaScript入门系列专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何使用Document对象访问页面表单、获取页面标题及通过Document.write()动态创建内容的方法。涵盖表单元素操作、页面标题读取及动态内容生成的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 : 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 >   </ 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 />