JS的Document属性和方法小结
• 经验
JS的Document属性和方法小结a)通过集合引用对应页面上的document . images//img标签document . images . length//对应页面上的img标签数document.images[0] //第一个img标签document.images[i] //第I个img标签b)通过name属性直接引用img name=" oimage " document.images.oimage//document.images.name属性。c)参考图片的src属性document.images.oimage.src//document.images.name attribute . src。d)创建一个图像varoimage oimage=new image()document . images . oimage . src=" 1 . jpg "并在页面上创建一个img/tag来显示它。———————————————————————-表单集合(页面中的表单)a)引用document.forms //表单标签document.forms.length //通过集合document.forms[0] //第一个/formform标签document.forms[i] //第I个/表单标签document.forms[i]。length//I-1/表单document.forms [I]中的控件数。formform中的elements[j]//I-1/j-1控件b)通过标签名称属性直接引用/form form name=" my form " input name=" my ctrl "//form document . my form . my ctrl//document . form name . control名称。c)访问表单的属性文档。name //对应于表单名称属性document.forms[i]。action //对应于formaction属性document.forms[i]。编码//对应于formenctype属性document.forms[i]。对应于formtarget属性的target //。文档.表单[i]。AppendChild(OTAG)//动态插入一个控件document.all.oDiv //引用层odiv document . all . odiv . style . display=" //图层设置为可见document . all . odiv . style . display=" none "//图层设置为隐藏document . getElementId(" odiv ")//通过getelementid引用对象document.getElementId ("odiv ")。style=" " document . getelementid(" odiv ")。display=" none "/* document.all表示只有ie支持该属性,所以也用来判断浏览器的种类*/图层的四个属性document.getelementbyid ("id ")。innerText//动态输出文本document.getelementbyid ("id ")。innerHTML//动态输出html document . getelementbyid(" id ")。outerText //与innertextdocument . getelementbyid(" id ")相同。outer html//与innerHTML相同- .Firefox不支持它。此属性是只读的,返回值有以下几种可能性:0-未初始化:生成XML对象,但不加载任何文件。1-正在加载:加载程序正在进行,但文件尚未开始解析。2-LOADED:已经加载并解析了一些文件,但是对象模型还没有生效。3-交互式:仅对一些加载的文件有效。在这种情况下,对象模型是有效的,但却是只读的。4-已完成:文件已完全加载,这意味着加载成功。复制代码如下:document . onreadystatechange=something;//当页面加载状态改变时执行此方法。function sub-something(){ if(document . ready state== complete ){//Enter//页面加载状态完全完成时,你要做的操作。} else if(document . ready state== loading ){ } }一个很好的例子:https://www.jb51.net/article/20445.htm说明:onreadyStatechange事件可以识别readystate属性的变化。Document.all(仅IE支持)操作:document.layers是Netscape 4.x的专有属性,它是一个数组,表示由存储(如divlayer)定位的所有元素。通常也是被div或者layer对象的id属性引用,但是里面没有其他元素。文档。图层和文档。全部的用法是一样的,功能也是相同的。所在我就只介绍一种用法:document.all的意思是文档的所有元素,也就是说它包含了当前网页的所有元素。它是以数组的形式保存元素的属性的,所以我们可以用document.all[元素名].属性名=属性值来动态改变元素的属性。用这条语句,可以做出许许多多动态网页效果,如:动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等。你简直可以动态控制所有网页元素。document.all[]这个数组可以访问文档中所有元素。例1(这个可以让你理解文档中哪些是对象)复制代码代码如下:DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。DTD html xmlns= http://www。w3。org/1999/XHTML 标题文档。所有示例/标题元http-equiv= content-type content= text/html;charset=ISO-8859-1 //head body h1标题示例/h1小时/p这是一个图表/em .这只是一个肉馅卷饼/em/p请再来一份肉馅卷饼/em/p p这最后一个段落/em有特别的强调/em/p HR/script type= text/JavaScript !- var i,origLengthorig length=文档。全部。长度;文档。写(文档。全部。length= orig length br/);for(I=0;我原始长度;I){文档。写(文档。所有[ I ]=文档。所有的.标记名br/);}//////script/body/html它的执行结果是:标题示例-这是一段话。它只是一个段落。又是一段。这最后一段有特别的强调。-文档。全部。长度=18个文档。所有[0]=!所有[1]=HTML文档所有[2]=标题文档所有[3]=标题文档所有[4]=元文档所有[5]=正文文档所有[6]=H1文档所有[7]=人力资源文档所有[8]=P文档所有[9]=EM文档所有[10]=EM文档所有[11]=P文档所有[12]=EM文档所有[13]=P文档所有[14]=EM文档所有[15]=EM文档注意它只可以在工业管理学(工业工程)上运行)复制代码代码如下:html head meta http-equiv= Content-Type Content= text/html; charset=gb2312 标题单击差异变色/title style type=text/css !-# docid { height:400 px;宽度:400像素背景色:# 999;}-/style/head body div id= docid name= docname onClick= bgcolor()/div/body/html script language= JavaScript type= text/JavaScript !-函数bgcolor(){ document。全部[7]。风格。背景色= # 000 }-/script上面的这个例子让你了解怎么访问文档中的一个特定元素,比如文档中有一个DIV DIV id= docid name= docname /DIV,你可以通过这个差异的身份证,姓名或指数属性访问这个DIV:文档。所有[ docid ]文档。所有[ docname ]文档。全部。项目(“docid”)文档。全部。项目( docname )文档。所有[7]文档。全部。标签( DIV )则返回文档中所有差异数组,本例中只有一个DIV,所以用document.all.tags(div)[0]就可以访问了。3、使用document.all[]例3复制代码代码如下:DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。DTD html xmlns= http://www。w3。org/1999/XHTML 标题文档。所有示例# 2/title meta http-equiv= content-type content= text/html;charset=ISO-8859-1//head body!-可在微软公司出品的web浏览器中工作并兼容-h1 id= heading 1 align= center style= font-size:larger;动态超文本链接标记语言好玩!/h1 form name= test form id= test form action= # method= get br/br/input type= button value= Align Left onclick= document。所有[标题1 ].align= left///改变h1 gt/h1标签对中的排列属性的值,下面的代码作用相同input type= button value= Align Center on click= document。所有[标题1 ].Align= center /input type= button value= Align Right onclick= document。所有[标题1 ].align= right /br/br/input type= button value= Bigger onclick= document。所有[标题1 ]。风格。font size= xx-large ;/input type= button value= small onclick= document。所有[标题1 ]。风格。font size= xx-small ;/br/br/input type= button value= Red onclick= document。所有[标题1 ]。风格。color= Red/input type= button value= Blue onclick= document。所有[标题1 ]。风格。color= Blue/input type= button value= Black onclick= document。所有[标题1 ]。风格。color= Black/br/br/input type= Text name= userText id= userText size= 30 /input type= button value= Change Text onclick= document。所有[标题1 ].innerText=文档。测试表单。用户文本。价值;/gt .//改变h1/h1标签对中的文本内容/form /body /html