,,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
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。