JS的document详细学习.docx

1、JS的document详细学习JS的document详细学习(Document是HTML语言中的一类对象。)document文挡对象- JavaScript脚本语言描述-注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否则会提示你一个错误信息引用的元素为空或者不是对象-对象属性document.title/设置文档标题等价于HTML的标签document.bgColor/设置页面背景色document.fgColor/设置前景色(文本颜色)document.linkColor/未点击过的链接颜色document.alinkColor/激活链接(焦点在此链接上)的颜色

2、document.vlinkColor/已点击过的链接颜色document.URL/设置URL属性从而在同一窗口打开另一网页document.fileCreatedDate/文件建立日期，只读属性document.fileModifiedDate/文件修改日期，只读属性document.fileSize/文件大小，只读属性document.cookie/设置和读出cookiedocument.charset/设置字符集简体中文:gb2312-常用对象方法document.write()/动态向页面写入内容document.createElement(Tag)/创建一个html标签对象docum

3、ent.getElementById(ID)/获得指定ID值的对象document.getElementsByName(Name)/获得指定Name值的对象document.body.appendChild(oTag)-body-主体子对象document.body/指定文档主体的开始和结束等价于document.body.bgColor/设置或获取对象后面的背景颜色document.body.link/未点击过的链接颜色document.body.alink/激活链接(焦点在此链接上)的颜色document.body.vlink/已点击过的链接颜色document.body.text/文本色

4、document.body.innerText/设置.之间的文本document.body.innerHTML/设置.之间的HTML代码document.body.topMargin/页面上边距document.body.leftMargin/页面左边距document.body.rightMargin/页面右边距document.body.bottomMargin/页面下边距document.body.background/背景图片document.body.appendChild(oTag) /动态生成一个HTML对象常用对象事件document.body.onclick=func()/鼠

5、标指针单击对象是触发document.body.onmouseover=func()/鼠标指针移到对象时触发document.body.onmouseout=func()/鼠标指针移出对象时触发location-位置子对象document.location.hash/ #号后的部分document.location.host/域名+端口号document.location.hostname/域名document.location.href/完整URLdocument.location.pathname/目录部分document.location.port/端口号document.locatio

6、n.protocol/网络协议(http:)document.location.search/ ?号后的部分documeny.location.reload()/刷新网页document.location.reload(URL)/打开新的网页document.location.assign(URL)/打开新的网页document.location.replace(URL)/打开新的网页-selection-选区子对象document.selection-images集合(页面中的图象)a)通过集合引用document.images/对应页面上的标签document.images.length/

7、对应页面上标签的个数document.images0/第1个标签document.imagesi/第i-1个标签b)通过nane属性直接引用document.images.oImage/document.images.name属性c)引用图片的src属性document.images.oImage.src/document.images.name属性.srcd)创建一个图象var oImageoImage = new Image()document.images.oImage.src=1.jpg同时在页面上建立一个标签与之对应就可以显示var oImageoImage = new Image(

8、)document.images.oImage.src=1.jpgoImage=document.caeateElement(IMG)oImage.src=1.jpgdocument.body.appendChild(oImage)-forms集合(页面中的表单)a)通过集合引用document.forms/对应页面上的标签document.forms.length/对应页面上标签的个数document.forms0/第1个标签document.formsi/第i-1个标签document.formsi.length/第i-1个中的控件数document.formsi.elementsj/第i

9、-1个中第j-1个控件b)通过标签name属性直接引用document.Myform.myctrl/document.表单名.控件名c)访问表单的属性document.formsi.name/对应属性document.formsi.action/对应属性document.formsi.encoding/对应属性document.formsi.target/对应属性document.formsi.appendChild(oTag) /动态插入一个控件-/获取文本密码框的值document.write(document.Myform.oText.value)document.write(docum

10、ent.Myform.oPswd.value)-12function fun()/遍历checkbox控件的值并判断是否选中var lengthlength=document.forms0.chk.lengthfor(i=0;ilength;i+)v=document.forms0.chki.valueb=document.forms0.chki.checkedif(b)alert(v=v+被选中)elsealert(v=v+未选中)ddd-123/遍历select控件的option项var lengthlength=document.Myform.oSelect.lengthfor(i=0;

11、ilength;i+)document.write(document.Myform.oSelecti.value)/遍历option项并且判断某个option是否被选中for(i=0;idocument.Myform.oSelect.length;i+)if(document.Myform.oSelecti.selected!=true)document.write(document.Myform.oSelecti.value)elsedocument.write(+document.Myform.oSelecti.value+)/根据SelectedIndex打印出选中的option/(0到

12、document.Myform.oSelect.length-1)i=document.Myform.oSelect.selectedIndexdocument.write(document.Myform.oSelecti.value)/动态增加select控件的option项var oOption = document.createElement(OPTION);oOption.text=4;oOption.value=4;document.Myform.oSelect.add(oOption);Textdocument.all.oDiv/引用图层oDivdocument.all.oDiv.

13、style.display=/图层设置为可视document.all.oDiv.style.display=none/图层设置为隐藏document.getElementId(oDiv)/通过getElementId引用对象document.getElementId(oDiv).style=document.getElementId(oDiv).display=none/*document.all表示document中所有对象的集合只有ie支持此属性，因此也用来判断浏览器的种类*/图层对象的4个属性document.getElementById(ID).innerText/动态输出文本document.getElementById(ID).innerHTML/动态输出HTMLdocument.getElementById(ID).outerText/同innerTextdocument.getElementById(ID).outerHTML/同innerHTMLfunction change()document.all.oDiv.style.display=noneTextfunction changeText()document.getElementById(oDiv).innerText=NewTextText