Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Verwendung von Dokumentobjekten in JavaScript_Grundkenntnisse

Detaillierte Erläuterung der Verwendung von Dokumentobjekten in JavaScript_Grundkenntnisse

WBOY
WBOYOriginal
2016-05-16 16:21:55999Durchsuche

Objekteigenschaften

Code kopieren Der Code lautet wie folgt:

document.title                             // Legen Sie den Dokumenttitel fest, der dem HTML-Tag entspricht document.bgColor //Legen Sie die Hintergrundfarbe der Seite fest <br> document.fgColor //Setzen Sie die Vordergrundfarbe (Textfarbe) <br> document.linkColor //Farbe nicht angeklickter Links<br> document.alinkColor //Die Farbe des aktiven Links (der Fokus liegt auf diesem Link)<br> document.vlinkColor //Farbe der angeklickten Links<br> document.URL //Legen Sie das URL-Attribut fest, um eine andere Webseite im selben Fenster zu öffnen<br> document.fileCreatedDate //Erstellungsdatum der Datei, schreibgeschütztes Attribut<br> document.fileModifiedDate //Dateiänderungsdatum, schreibgeschütztes Attribut<br> document.fileSize //Dateigröße, schreibgeschütztes Attribut<br> document.cookie //Cookie setzen und lesen<br> document.charset //Legen Sie den Zeichensatz fest. Vereinfachtes Chinesisch: gb2312<br> <br> </div> ============================================= === ======================<p> Körper-Körper-Unterobjekt<br> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="51821" class="copybut" id="copybut51821" onclick="doCopy('code51821')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span></div> <div class="codebody" id="code51821"> document.body                                                                            //Angabe des Anfangs und Endes des Dokumentkörpers entspricht <body></body><br> document.body.bgColor //Hintergrundfarbe hinter dem Objekt festlegen oder abrufen<br> document.body.link //Farbe nicht angeklickter Links<br> document.body.alink //Die Farbe des aktiven Links (der Fokus liegt auf diesem Link)<br> document.body.vlink //Farbe der angeklickten Links<br> document.body.text //Textfarbe<br> document.body.innerText //Legen Sie den Text zwischen <body>...</body><br> fest document.body.innerHTML //Legen Sie den HTML-Code zwischen <body>...</body><br> fest document.body.topMargin //Oberer Seitenrand<br> document.body.leftMargin //Linker Seitenrand<br> document.body.rightMargin //Rechter Seitenrand<br> document.body.bottomMargin //Unterer Seitenrand<br> document.body.background //Hintergrundbild<br> document.body.appendChild(oTag) //Erzeuge dynamisch ein HTML-Objekt<br> <br> </div> Allgemeine Objektereignisse<p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="29794" class="copybut" id="copybut29794" onclick="doCopy('code29794')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span></div> <div class="codebody" id="code29794"> document.body.onclick="func()" //Klicken mit dem Mauszeiger auf das Objekt wird ausgelöst<br> document.body.onmouseover="func()" //Wird ausgelöst, wenn sich der Mauszeiger zum Objekt bewegt<br> document.body.onmouseout="func()" //Wird ausgelöst, wenn sich der Mauszeiger aus dem Objekt bewegt<br> <br> </div> ============================================= === ======================<p> Standort-Standort-Unterobjekt<br> </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="69315" class="copybut" id="copybut69315" onclick="doCopy('code69315')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span><div class="codebody" id="code69315"> <br> document.location.hash // Der Teil nach #<br> document.location.host //Domänenname Portnummer<br> document.location.hostname // Domänenname<br> document.location.href // Vollständige URL<br> document.location.pathname // Verzeichnisteil<br> document.location.port // Portnummer<br> document.location.protocol // Netzwerkprotokoll (http:)<br> document.location.search // Der Teil nach ?<br> </div> <p>Allgemeine Objektereignisse</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="50752" class="copybut" id="copybut50752" onclick="doCopy('code50752')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code50752"> <br> documenty.location.reload() //Aktualisieren Sie die Webseite<br> document.location.reload(URL) //Eine neue Webseite öffnen<br> document.location.assign(URL) //Eine neue Webseite öffnen<br> document.location.replace(URL) //Eine neue Webseite öffnen<br> </div> <p>============================================= === ======================<br> Bildersammlung (Bilder auf der Seite) <br> a) Referenz über Sammlung </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="32999" class="copybut" id="copybut32999" onclick="doCopy('code32999')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code32999"> <br> document.images                                                                                                                                                                                         document.images.length //Die Anzahl der <img>-Tags auf der entsprechenden Seite<br> document.images[0] //Das erste <img>-Tag<br> document.images //Das i-1th <img>-Tag<br> <br> </div> b) Verweisen Sie direkt über das Namensattribut auf <p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="59702" class="copybut" id="copybut59702" onclick="doCopy('code59702')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span></div> <div class="codebody" id="code59702"> <img name="oImage"><br> document.images.oImage //document.images.name-Attribut<br> <br> </div> c) Verweisen Sie auf das src-Attribut des Bildes<p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="29446" class="copybut" id="copybut29446" onclick="doCopy('code29446')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span></div> <div class="codebody" id="code29446"> document.images.oImage.src //document.images.name attribute.src<br> <br> </div> d) Erstellen Sie ein Bild <p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="96333" class="copybut" id="copybut96333" onclick="doCopy('code96333')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span></div> <div class="codebody" id="code96333"> var oImage<br> oImage = new Image()<br> document.images.oImage.src="1.jpg"<br> <br> </div> Erstellen Sie gleichzeitig einen <img>-Tag auf der Seite, um sie entsprechend anzuzeigen <p> Beispielcode (dynamische Erstellung von Bildern): <br> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="95670" class="copybut" id="copybut95670" onclick="doCopy('code95670')">Code kopieren<u></u></a> Der Code lautet wie folgt:</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> Formularsammlung (Formulare auf der Seite)<br> a) Referenz über Sammlung <br> </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="71103" class="copybut" id="copybut71103" onclick="doCopy('code71103')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span><div class="codebody" id="code71103"> <br> document.forms                                                                                                                                               // Das <form>-Tag <br> auf der entsprechenden Seite document.forms.length //Die Anzahl der <form>-Tags auf der entsprechenden Seite<br> document.forms[0] //Das erste <form>-Tag<br> document.forms        //Das i-1te <form>-Tag<br> document.forms.length //Die Anzahl der Steuerelemente im i-1. <form><br> document.forms.elements[j] //Das j-1te Steuerelement <br> im i-1ten<form> </div> <p>-------------------------------<br> b) Verweisen Sie direkt über das Tag-Namensattribut auf </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="44804" class="copybut" id="copybut44804" onclick="doCopy('code44804')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</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) Auf Formularattribute zugreifen </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="97142" class="copybut" id="copybut97142" onclick="doCopy('code97142')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code97142"> <br> document.forms.name                                                        // Entspricht dem Attribut <form name> document.forms.action                                              // Entspricht dem <form action>-Attribut <br> document.forms.encoding //entspricht<form enctype>attribute<br> document.forms.target //entspricht dem Attribut <form target> document.forms.appendChild(oTag) //Ein Steuerelement dynamisch einfügen<br> <br><br> </div>------------------------------- Beispielcode (Formular): <p> <br></p> <p></p> <div class="codetitle"><span>Code kopieren<a style="CURSOR: pointer" data="40127" class="copybut" id="copybut40127" onclick="doCopy('code40127')"><u></u> Der Code lautet wie folgt:</a></span></div> <html><div class="codebody" id="code40127"> <!--Skript im Zusammenhang mit der Textsteuerung--><br> <form name="Myform"><br> <input type="text" name="oText"><br> <input type="password" name="oPswd"><br> <form><br> <script language="javascript"><br> //Den Wert des Textpasswortfelds abrufen<br> document.write(document.Myform.oText.value)<br> document.write(document.Myform.oPswd.value)<br> </script><br> </html><br> <br><br> </div>------------------------------- Beispielcode (Kontrollkästchen): <p> <br></p> <p></p> <div class="codetitle"><span>Code kopieren<a style="CURSOR: pointer" data="64289" class="copybut" id="copybut64289" onclick="doCopy('code64289')"><u></u> Der Code lautet wie folgt:</a><div class="codebody" id="code64289"> <br> <html><br> <!--Kontrollkästchen, Skript für Funksteuerung--><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"> Funktion fun(){ <br> //Durchlaufen Sie den Wert des Kontrollkästchen-Steuerelements und bestimmen Sie, ob es ausgewählt ist oder nicht <br> Var-Länge <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> Wenn(b) <br> alarm(v=v „ausgewählt“) <br>                                                                               Alert(v=v „Nicht ausgewählt“) <br>                                                                                                                                 </script>  <br> <a href=# onclick="fun()">ddd</a> </html> <br><br> <br>-------------------------------<br> Beispielcode (Auswählen): <br> <br> </div> <p><br>Code kopieren</p> <p></p> <div class="codetitle"> Der Code lautet wie folgt:<span><a style="CURSOR: pointer" data="91802" class="copybut" id="copybut91802" onclick="doCopy('code91802')"><u> <html></u> <!--Skript im Zusammenhang mit der Auswahlsteuerung--></a> <form name="Myform"></span> <select name="oSelect"></div> <option value="1">1</option><div class="codebody" id="code91802"> <option value="2">2</option><br> <option value="3">3</option><br> </select><br> </form><br> <script language="javascript"><br> //Durchlaufen Sie die Optionselemente des Auswahlsteuerelements<br> Var-Länge<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> //Optionselemente durchlaufen und feststellen, ob eine Option ausgewählt ist<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 />        sonst<br />         document.write("<font color=red>" document.Myform.oSelect.value "</font>") <br> }<br> </script><br> <script language="javascript"><br> //Ausgewählte Option<br> basierend auf SelectedIndex ausdrucken ​​​ //(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> //Fügen Sie dem Auswahlsteuerelement dynamisch Optionen hinzu<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-Sammlung (Ebenen auf der Seite) <br> <br> </div> <p><br>Code kopieren</p> <p></p> <div class="codetitle"> Der Code lautet wie folgt:<span><div class="codebody" id="code56149"> <br> <Div id="oDiv">Texte</Div><br> document.all.oDiv                                                                                                                                                                                                                                                document.all.oDiv.style.display="" //Définir le calque comme visible<br> document.all.oDiv.style.display="none" //Définir le calque sur caché<br> document.getElementId("oDiv") //Référencez l'objet via getElementId<br> document.getElementId("oDiv").<br> document.getElementId("oDiv").display="none"<br> /*document.all représente la collection de tous les objets du document<br> Seul IE prend en charge cet attribut, il est donc également utilisé pour déterminer le type de navigateur*/<br> <br> </div> 4 propriétés de l'objet calque<p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="89666" class="copybut" id="copybut89666" onclick="doCopy('code89666')">Copier le code<u></u></a> Le code est le suivant :</span></div> <div class="codebody" id="code89666"> document.getElementById("ID").innerText //Texte de sortie dynamique<br> document.getElementById("ID").innerHTML //Sortie dynamique HTML<br> document.getElementById("ID").outerText //Identique à innerText<br> document.getElementById("ID").outerHTML //Identique à innerHTML<br> <br> </div> -------------------------------<p> Exemple de code : <br> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="62558" class="copybut" id="copybut62558" onclick="doCopy('code62558')">Copier le code<u></u></a> Le code est le suivant :</span></div> <div class="codebody" id="code62558"> <html><br> <langage de script="javascript"><br> changement de fonction(){<br> document.all.oDiv.style.display="none"<br> ><br> </script><br> <Div id="oDiv" onclick="change()">Texte</Div><br> </html><br> <html><br> <langage de script="javascript"><br> fonction changeText(){<br> document.getElementById("oDiv").innerText="NewText"<br> ><br> </script><br> <Div id="oDiv" onmouseover="changeText()">Text</Div><br> </html><br> <br> </div></span> </div></span></div> </div> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="Wie erkennt der Verkehrszähler C#: gefälschte referer_javascript-Technik im WebBrowser?" href="https://m.php.cn/de/faq/9572.html">Wie erkennt der Verkehrszähler C#: gefälschte referer_javascript-Technik im WebBrowser?</a></span><span>Nächster Artikel:<a class="dBlack" title="Wie erkennt der Verkehrszähler C#: gefälschte referer_javascript-Technik im WebBrowser?" href="https://m.php.cn/de/faq/9574.html">Wie erkennt der Verkehrszähler C#: gefälschte referer_javascript-Technik im WebBrowser?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><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>