Super clear detailed explanation of document objects_Basic knowledge-JS Tutorial-php.cn

Super clear detailed explanation of document objects_Basic knowledge

WBOY

Release： 2016-05-16 19:18:43

Original

772 people have browsed it

document document object - JavaScript scripting language description
----------------------------------------- ----------------------------------
Note: The name attribute of the element on the page and the name referenced by JavaScript must be consistent including size. Write
otherwise you will be prompted with an error message "The referenced element is empty or not an object"
-------------------------- ---------------------------------------------

Object Properties Document.title // Set the document title equivalent to the
tag Document.bgColor // Set the page background color of the page <br> documen.fgcolor // >document.linkColor URL //Set URL properties to open another web page in the same window <br>document.fileCreatedDate // File creation date, read-only attribute <br> document.fileModifiedDate // File modified date, read-only attribute <br> document.fileSize // File size, only read attributes <br> document.cookie // Set and read the cookies <br> Document.charset // Set the character set simplified Chinese: gb2312 <br> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------- -------- <br>Object method<br>document.write() //Dynamicly write content to the page<br>document.createElement(Tag) //Create an html tag object<br>document. getElementById(ID) //Get the object with the specified ID value<br>document.getElementsByName(Name) //Get the object with the specified Name value<br>---------------- -------------------------------------------------- - <br><br>images collection (images on the page) <br><br>a) Reference <br>document.images through the collection // The <br> tag <br>document.images on the corresponding page. length Tag <br><br>b) Directly reference <br><img alt="Super clear detailed explanation of document objects_Basic knowledge" > <br>document.images.oImage //document.images.name attribute <img alt="Super clear detailed explanation of document objects_Basic knowledge" ><br>c) Reference the src attribute of the image<img alt="Super clear detailed explanation of document objects_Basic knowledge" >document.images.oImage.src //document.images.nameproperty.src <br><img alt="Super clear detailed explanation of document objects_Basic knowledge" >d) Create an image <br>var oImage <br>oImage = new Image() <br>document. images.oImage.src="/1.jpg" <img alt="Super clear detailed explanation of document objects_Basic knowledge" >At the same time, create a <br> tag on the page corresponding to it to display <br><br><br> <br><br> <br><br> <br><br> <img alt="Super clear detailed explanation of document objects_Basic knowledge" ><br>-------------------------------- ---------------------------------- <br>forms collection (forms on the page) <br><img alt="Super clear detailed explanation of document objects_Basic knowledge" >a) Reference <br>document.forms through a collection //The <br> tag on the corresponding pagedocument.forms.length //The number of <br>tags on the corresponding page<br>document. forms[0] / The number of controls in each <br><br>document.forms[i].elements[j] //The j-1th control in the i-1th <br><br><br>b) through the label name Attributes directly reference <form><br></form> <form> <br> </form> <form>document.Myform.myctrl . -------------------------------------------------- ---------- <br> </form> <form> <br> </form> <form> <br> </form> <form> <br><br> <br> </form> <form> <input> </form> <br><br> <br><br> <br>----------------------------------------------------------------------- <br> <br> <br><form> <br><select> <br><option>1</option> <br><option>2</option> <br><option>3</option> <br></select> <br> </form> <br><br><script> <BR> //遍历select控件的option项 <BR> var length <BR> length=document.Myform.oSelect.length <BR> for(i=0;i<length;i++) <BR> document.write(document.Myform.oSelect[i].value) <BR></script> <br><br><script> <BR> //遍历option项并且判断某个option是否被选中 <BR> for(i=0;i<document.Myform.oSelect.length;i++){ <BR> if(document.Myform.oSelect[i].selected!=true) <BR> document.write(document.Myform.oSelect[i].value) <BR> else <BR> document.write("<font color=red>"+document.Myform.oSelect[i].value+"") <BR> } <BR></script> <br><br><script> <BR> //根据SelectedIndex打印出选中的option <BR> //(0到document.Myform.oSelect.length-1) <BR> i=document.Myform.oSelect.selectedIndex <BR> document.write(document.Myform.oSelect[i].value) <BR></script> <br><br><script> <BR> //动态增加select控件的option项 <BR> var oOption = document.createElement("OPTION"); <BR> oOption.text="4"; <BR> oOption.value="4"; <BR> document.Myform.oSelect.add(oOption); <BR></script> <br> <br>----------------------------------------------------------------------- <br><div>Text</div> <br>document.all.oDiv //引用图层oDiv <br>document.all.oDiv.style <br>document.all.oDiv.style.display="" //图层设置为可视 <br>document.all.oDiv.style.display="none" //图层设置为隐藏 <br>/*document.all表示document中所有对象的集合 <br>只有ie支持此属性，因此也用来判断浏览器的种类*/ <br><br>