Home  >  Article  >  Web Front-end  >  Detailed explanation of the use of document objects in JavaScript_Basic knowledge

Detailed explanation of the use of document objects in JavaScript_Basic knowledge

WBOY
WBOYOriginal
2016-05-16 16:21:55931browse

Object properties

Copy code The code is as follows:

document.title                              // Set the document title equivalent to the HTML tag <br> document.bgColor //Set the page background color <br> document.fgColor //Set the foreground color (text color) <br> document.linkColor //Color of unclicked links<br> document.alinkColor //The color of the active link (the focus is on this link)<br> document.vlinkColor //Color of clicked links<br> document.URL //Set the URL attribute 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, read-only attribute<br> document.cookie //Set and read cookie<br> document.charset //Set the character set Simplified Chinese: gb2312<br> </div> <p>================================================== =======================<br> body-body sub-object</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="51821" class="copybut" id="copybut51821" onclick="doCopy('code51821')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code51821"> <br> document.body                                                                               //Specify the start and end of the document body is equivalent to <body></body><br> document.body.bgColor //Set or get the background color behind the object<br> document.body.link //Color of unclicked links<br> document.body.alink //The color of the active link (the focus is on this link)<br> document.body.vlink //Color of clicked links<br> document.body.text //Text color<br> document.body.innerText //Set the text between <body>...</body><br> document.body.innerHTML //Set the HTML code between <body>...</body><br> document.body.topMargin //Page top margin<br> document.body.leftMargin //Left margin of page<br> document.body.rightMargin //Right margin of page<br> document.body.bottomMargin //Page bottom margin<br> document.body.background //Background image<br> document.body.appendChild(oTag) //Dynamicly generate an HTML object<br> </div> <p>Common object events</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="29794" class="copybut" id="copybut29794" onclick="doCopy('code29794')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code29794"> <br> document.body.onclick="func()" //Clicking the object with the mouse pointer is triggered<br> document.body.onmouseover="func()" //Triggered when the mouse pointer moves to the object<br> document.body.onmouseout="func()" //Triggered when the mouse pointer moves out of the object<br> </div> <p>================================================== =======================<br> location-location sub-object</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="69315" class="copybut" id="copybut69315" onclick="doCopy('code69315')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code69315"> <br> document.location.hash // The part after #<br> document.location.host //Domain name Port number<br> document.location.hostname // Domain name<br> document.location.href // Full URL<br> document.location.pathname // Directory part<br> document.location.port // Port number<br> document.location.protocol // Network protocol (http:)<br> document.location.search // The part after ?<br> </div> <p>Common object events</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="50752" class="copybut" id="copybut50752" onclick="doCopy('code50752')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code50752"> <br> documenty.location.reload() //Refresh the web page<br> document.location.reload(URL) //Open a new webpage<br> document.location.assign(URL) //Open a new webpage<br> document.location.replace(URL) //Open a new webpage<br> </div> <p>================================================== =======================<br> images collection (images on the page) <br> a) Reference via collection </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="32999" class="copybut" id="copybut32999" onclick="doCopy('code32999')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code32999"> <br> document.images                                                                                                                                                                                                                             document.images.length //The number of <img> tags on the corresponding page<br> document.images[0] //The first <img> tag<br> document.images //The i-1th <img> tag<br> <br> </div> b) Directly reference <p> through the name attribute </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="59702" class="copybut" id="copybut59702" onclick="doCopy('code59702')">Copy code<u></u></a> The code is as follows:</span></div> <div class="codebody" id="code59702"> <img name="oImage"><br> document.images.oImage //document.images.name attribute<br> <br> </div> c) Reference the src attribute of the image<p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="29446" class="copybut" id="copybut29446" onclick="doCopy('code29446')">Copy code<u></u></a> The code is as follows:</span></div> <div class="codebody" id="code29446"> document.images.oImage.src //document.images.name attribute.src<br> <br> </div> d) Create an image <p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="96333" class="copybut" id="copybut96333" onclick="doCopy('code96333')">Copy code<u></u></a> The code is as follows:</span></div> <div class="codebody" id="code96333"> var oImage<br> oImage = new Image()<br> document.images.oImage.src="1.jpg"<br> <br> </div> At the same time, create an <img> tag on the page to display it accordingly <p> Sample code (dynamic creation of images): <br> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="95670" class="copybut" id="copybut95670" onclick="doCopy('code95670')">Copy code<u></u></a> The code is as follows:</span></div> <div class="codebody" id="code95670"> <html><br> <img name=oImage><br> <script language="javascript"><br>       var oImage<br> oImage = new Image()<br>         document.images.oImage.src="1.jpg"<br> </script><br> </html><br> <html><br> <script language="javascript"><br> oImage=document.caeateElement("IMG")<br> oImage.src="1.jpg"<br>          document.body.appendChild(oImage)<br> </script><br> </html><br> <br> </div> ================================================== ======================<p> forms collection (forms in the page)<br> a) Reference via collection <br> </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="71103" class="copybut" id="copybut71103" onclick="doCopy('code71103')">Copy code<u></u></a> The code is as follows:</span><div class="codebody" id="code71103"> <br> document.forms                                                                                                                                                    // The <form> tag <br> on the corresponding page document.forms.length //The number of <form> tags on the corresponding page<br> document.forms[0] //The first <form> tag<br> document.forms        //The i-1th <form> tag<br> document.forms.length //The number of controls in the i-1th <form><br> document.forms.elements[j] //The j-1th control <br> in the i-1th<form> </div> <p>-------------------------------<br> b) Directly reference </p> through the tag name attribute <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="44804" class="copybut" id="copybut44804" onclick="doCopy('code44804')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code44804"> <br> <form name="Myform"><input name="myctrl"></form><br> document.Myform.myctrl //document.form name.control name<br> </div> <p>-------------------------------<br> c) Access form attributes </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="97142" class="copybut" id="copybut97142" onclick="doCopy('code97142')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code97142"> <br> document.forms.name                                                              // Corresponding to <form name> attribute <br> document.forms.action                                                   // Corresponding to <form action> attribute <br> document.forms.encoding //corresponds to<form enctype>attribute<br> document.forms.target //corresponds to <form target> attribute<br> document.forms.appendChild(oTag) //Dynamically insert a control<br> </div> <p>-------------------------------<br> Sample code (form): </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="40127" class="copybut" id="copybut40127" onclick="doCopy('code40127')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code40127"> <br> <html><br> <!--Script related to Text control--><br> <form name="Myform"><br> <input type="text" name="oText"><br> <input type="password" name="oPswd"><br> <form><br> <script language="javascript"><br> //Get the value of the text password box<br> document.write(document.Myform.oText.value)<br> document.write(document.Myform.oPswd.value)<br> </script><br> </html><br> </div> <p>-------------------------------<br> Sample code (checkbox): </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="64289" class="copybut" id="copybut64289" onclick="doCopy('code64289')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code64289"> <br> <html><br> <!--checkbox, radio control related script--><br> <form name="Myform"><br> <input type="checkbox" name="chk" value="1">1 <br> <input type="checkbox" name="chk" value="2">2 <br> </form> <br> <script language="javascript"> <br> function fun(){ <br> //Traverse the value of the checkbox control and determine whether it is selected or not <br> var length <br> length=document.forms[0].chk.length <br> for(i=0;i<length;i){ <br> v=document.forms[0].chk.value <br> b=document.forms[0].chk.checked <br> If(b) <br> alert(v=v "selected") <br>                                                                                 alert(v=v "Not selected") <br>                                                                                                                                       </script> <br> <a href=# onclick="fun()">ddd</a> </html> <br> <br><br> <br>-------------------------------<br> Sample code (Select): </div> <p><br></p> <p>Copy code</p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="91802" class="copybut" id="copybut91802" onclick="doCopy('code91802')"> The code is as follows:<u></u></a> <html></span> <!--Script related to Select control--></div> <form name="Myform"><div class="codebody" id="code91802"> <select name="oSelect"><br> <option value="1">1</option><br> <option value="2">2</option><br> <option value="3">3</option><br> </select><br> </form><br> <script language="javascript"><br> //Traverse the option items of the select control<br> var length<br> length=document.Myform.oSelect.length<br> for(i=0;i<length;i)<br>         document.write(document.Myform.oSelect.value)<br> </script><br> <script language="javascript"><br> //Traverse option items and determine whether an option is selected<br> for(i=0;i<document.Myform.oSelect.length;i ){<br /> If(document.Myform.oSelect.selected!=true)<br />         document.write(document.Myform.oSelect.value)<br />        else<br />         document.write("<font color=red>" document.Myform.oSelect.value "</font>") <br> }<br> </script><br> <script language="javascript"><br> //Print out the selected option<br> based on SelectedIndex ​​​ //(0 to document.Myform.oSelect.length-1)<br> i=document.Myform.oSelect.selectedIndex<br>         document.write(document.Myform.oSelect.value)<br> </script><br> <script language="javascript"><br> //Dynamicly add options to the select control<br>       var oOption = document.createElement("OPTION");<br> oOption.text="4";<br> oOption.value="4";<br> Document.Myform.oSelect.add(oOption);<br> </script><br> <html><br> <br><br> <br>================================================== =======================<br> Div collection (layers in the page) </div> <p><br></p> <p>Copy code</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="56149" class="copybut" id="copybut56149" onclick="doCopy('code56149')"> The code is as follows:<u><div class="codebody" id="code56149"> <br> <Div id="oDiv">텍스트</Div><br> document.all.oDiv                                                                                                           ~    document.all.oDiv.style.display="" //레이어가 보이도록 설정<br> document.all.oDiv.style.display="none" //레이어를 숨김으로 설정<br> document.getElementId("oDiv") //getElementId를 통해 객체 참조<br> document.getElementId("oDiv").<br> document.getElementId("oDiv").display="none"<br> /*document.all은 문서에 있는 모든 객체의 컬렉션을 나타냅니다<br> IE만이 이 속성을 지원하므로 브라우저 유형을 결정하는 데에도 사용됩니다*/<br> <br> </div> 레이어 객체의 4가지 속성</u><p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="89666" class="copybut" id="copybut89666" onclick="doCopy('code89666')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code89666"> document.getElementById("ID").innerText //동적 출력 텍스트<br> document.getElementById("ID").innerHTML //동적 출력 HTML<br> document.getElementById("ID").outerText //innerText와 동일<br> document.getElementById("ID").outerHTML //innerHTML과 동일<br> <br> </div> ------------------<p> 샘플 코드: <br> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="62558" class="copybut" id="copybut62558" onclick="doCopy('code62558')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code62558"> <html><br> <스크립트 언어="javascript"><br> 함수 변경(){<br> document.all.oDiv.style.display="없음"<br> }<br> <br> <Div id="oDiv" onclick="change()">텍스트</Div><br> </div></a></span></div> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement:</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article:<a class="dBlack" title="How does the traffic counter identify C#: fake referer_javascript technique in WebBrowser" href="http://m.php.cn/faq/9572.html">How does the traffic counter identify C#: fake referer_javascript technique in WebBrowser</a></span><span>Next article:<a class="dBlack" title="How does the traffic counter identify C#: fake referer_javascript technique in WebBrowser" href="http://m.php.cn/faq/9574.html">How does the traffic counter identify C#: fake referer_javascript technique in WebBrowser</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>(ZH-CN)</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>(EN)</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>(ZH-TW)</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>(JA)</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>(KO)</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>(MS)</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>(FR)</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>(DE)</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>