Maison  >  Article  >  interface Web  >  Explication détaillée de l'utilisation des objets document dans les connaissances JavaScript_Basic

Explication détaillée de l'utilisation des objets document dans les connaissances JavaScript_Basic

WBOY
WBOYoriginal
2016-05-16 16:21:55931parcourir

Propriétés de l'objet

Copier le code Le code est le suivant :

document.title                              // Définit le titre du document équivalent à la balise HTML document.bgColor //Définir la couleur d'arrière-plan de la page <br> document.fgColor //Définir la couleur de premier plan (couleur du texte) <br> document.linkColor //Couleur des liens non cliqués<br> document.alinkColor //La couleur du lien actif (le focus est sur ce lien)<br> document.vlinkColor //Couleur des liens cliqués<br> document.URL //Définissez l'attribut URL pour ouvrir une autre page Web dans la même fenêtre<br> document.fileCreatedDate //Date de création du fichier, attribut en lecture seule<br> document.fileModifiedDate //Date de modification du fichier, attribut en lecture seule<br> document.fileSize //Taille du fichier, attribut en lecture seule<br> document.cookie //Définir et lire le cookie<br> document.charset //Définir le jeu de caractères Chinois simplifié : gb2312<br> <br> </div> =============================================== === =======================<p> sous-objet corps-corps<br> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="51821" class="copybut" id="copybut51821" onclick="doCopy('code51821')">Copier le code<u></u></a> Le code est le suivant :</span></div> <div class="codebody" id="code51821"> document.body                                                                             // Spécifier le début et la fin du corps du document équivaut à <body></body><br> document.body.bgColor //Définir ou obtenir la couleur d'arrière-plan derrière l'objet<br> document.body.link //Couleur des liens non cliqués<br> document.body.alink //La couleur du lien actif (le focus est sur ce lien)<br> document.body.vlink //Couleur des liens cliqués<br> document.body.text //Couleur du texte<br> document.body.innerText //Définissez le texte entre <body>...</body><br> document.body.innerHTML //Définissez le code HTML entre <body>...</body><br> document.body.topMargin //Marge supérieure de la page<br> document.body.leftMargin //Marge gauche de la page<br> document.body.rightMargin //Marge droite de la page<br> document.body.bottomMargin //Marge inférieure de la page<br> document.body.background //Image de fond<br> document.body.appendChild(oTag) //Générer dynamiquement un objet HTML<br> <br> </div> Événements d'objets communs<p> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="29794" class="copybut" id="copybut29794" onclick="doCopy('code29794')">Copier le code<u></u></a> Le code est le suivant :</span></div> <div class="codebody" id="code29794"> document.body.onclick="func()" //Le clic sur l'objet avec le pointeur de la souris est déclenché<br> document.body.onmouseover="func()" //Déclenché lorsque le pointeur de la souris se déplace vers l'objet<br> document.body.onmouseout="func()" //Déclenché lorsque le pointeur de la souris sort de l'objet<br> <br> </div> =============================================== === =======================<p> sous-objet emplacement-emplacement<br> </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="69315" class="copybut" id="copybut69315" onclick="doCopy('code69315')">Copier le code<u></u></a> Le code est le suivant :</span><div class="codebody" id="code69315"> <br> document.location.hash // La partie après #<br> document.location.host //Nom de domaine Numéro de port<br> document.location.hostname // Nom de domaine<br> document.location.href // URL complète<br> document.location.pathname // Partie répertoire<br> document.location.port // Numéro de port<br> document.location.protocol // Protocole réseau (http:)<br> document.location.search // La partie après ?<br> </div> <p>Événements d'objets communs</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="50752" class="copybut" id="copybut50752" onclick="doCopy('code50752')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code50752"> <br> documenty.location.reload() //Actualiser la page Web<br> document.location.reload(URL) //Ouvrir une nouvelle page Web<br> document.location.assign(URL) //Ouvrir une nouvelle page Web<br> document.location.replace(URL) //Ouvrir une nouvelle page Web<br> </div> <p>=============================================== === =======================<br> collection d'images (images sur la page) <br> a) Référence via collection </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="32999" class="copybut" id="copybut32999" onclick="doCopy('code32999')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code32999"> <br> document.images                                                                                                                                                                                                          document.images.length //Le nombre de balises <img> sur la page correspondante<br> document.images[0] //La première balise <img> document.images //La i-1ème balise <img> <br><br> <br>b) Référencez directement </div> via l'attribut name <p></p> <p></p> <div class="codetitle">Copier le code<span><a style="CURSOR: pointer" data="59702" class="copybut" id="copybut59702" onclick="doCopy('code59702')"><u> Le code est le suivant :</u></a></span> <img name="oImage"></div> document.images.oImage //attribut document.images.name<div class="codebody" id="code59702"> <br><br> <br>c) Référencez l'attribut src de l'image</div> <p></p> <p></p> <div class="codetitle">Copier le code<span><a style="CURSOR: pointer" data="29446" class="copybut" id="copybut29446" onclick="doCopy('code29446')"><u> Le code est le suivant :</u></a></span> document.images.oImage.src //document.images.name attribut.src</div> <div class="codebody" id="code29446"> <br> <br>d) Créer une image </div> <p></p> <p></p> <div class="codetitle">Copier le code<span><a style="CURSOR: pointer" data="96333" class="copybut" id="copybut96333" onclick="doCopy('code96333')"><u> Le code est le suivant :</u></a></span> var oImage</div> oImage = nouvelle Image()<div class="codebody" id="code96333"> document.images.oImage.src="1.jpg"<br> <br><br> <br>En parallèle, créez une balise <img> sur la page pour l'afficher en conséquence </div> Exemple de code (création dynamique d'images) : <p><br></p> <p></p> <div class="codetitle">Copier le code<span><a style="CURSOR: pointer" data="95670" class="copybut" id="copybut95670" onclick="doCopy('code95670')"><u> Le code est le suivant :</u></a></span> <html></div> <img name=oImage><div class="codebody" id="code95670"> <langage de script="javascript"><br>       var oImage<br> oImage = nouvelle Image()<br>         document.images.oImage.src="1.jpg"<br> </script><br> </html><br> <html><br> <langage de script="javascript"><br> oImage=document.caeateElement("IMG")<br> oImage.src="1.jpg"<br>          document.body.appendChild(oImage)<br> </script><br> </html><br> <br><br> <br>=============================================== === ======================</div> collection de formulaires (formulaires dans la page) a) Référence via collection <p> <br><br></p> <p></p> <div class="codetitle">Copier le code<span><a style="CURSOR: pointer" data="71103" class="copybut" id="copybut71103" onclick="doCopy('code71103')"><u> Le code est le suivant :</u><div class="codebody" id="code71103"> <br> document.forms                                                                                                                                                    // La balise <form> <br> sur la page correspondante document.forms.length //Le nombre de balises <form> sur la page correspondante<br> document.forms[0] //La première balise <form> document.forms        //La i-1ème balise <form> document.forms.length //Le nombre de contrôles dans le i-1ème <form><br> document.forms.elements[j] //Le j-1ème contrôle <br> dans le i-1ème<form> <br><br> </div>------------------------------- b) Référencez directement <p> via l'attribut de nom de balise <br></p> <p></p> <div class="codetitle"><span>Copier le code<a style="CURSOR: pointer" data="44804" class="copybut" id="copybut44804" onclick="doCopy('code44804')"><u></u> Le code est le suivant :</a></span></div> <form name="Monformulaire"><input name="myctrl"></form><div class="codebody" id="code44804"> document.Myform.myctrl //nom du document.form.nom du contrôle<br> <br><br> </div>------------------------------- c) Accéder aux attributs du formulaire <p> <br></p> <p></p> <div class="codetitle"><span>Copier le code<a style="CURSOR: pointer" data="97142" class="copybut" id="copybut97142" onclick="doCopy('code97142')"><u></u> Le code est le suivant :</a></span></div> document.forms.name                                                           // Correspondant à l'attribut <form name> document.forms.action                                                 // Correspondant à l'attribut <form action> document.forms.encoding //correspond à<form enctype>attribute<div class="codebody" id="code97142"> document.forms.target //correspond à l'attribut <form target> document.forms.appendChild(oTag) //Insérer dynamiquement un contrôle<br> <br><br> <br>-------------------------------<br> Exemple de code (formulaire) : <br> </div> <p><br></p>Copier le code<p></p> <div class="codetitle"> <span> Le code est le suivant :<a style="CURSOR: pointer" data="40127" class="copybut" id="copybut40127" onclick="doCopy('code40127')"><u></u> <html></a> <!--Script lié au contrôle Texte--></span> <form name="Monformulaire"></div> <input type="text" name="oText"><div class="codebody" id="code40127"> <input type="password" name="oPswd"><br> <formulaire><br> <langage de script="javascript"><br> //Obtenir la valeur de la zone de mot de passe texte<br> document.write(document.Myform.oText.value)<br> document.write(document.Myform.oPswd.value)<br> </script><br> </html><br> <br><br> <br>-------------------------------<br> Exemple de code (case à cocher) : <br> </div> <p><br></p>Copier le code<p></p> <div class="codetitle"><span> Le code est le suivant :<a style="CURSOR: pointer" data="64289" class="copybut" id="copybut64289" onclick="doCopy('code64289')"><div class="codebody" id="code64289"> <br> <html><br> <!--case à cocher, script lié à la commande radio--><br> <form name="Monformulaire"><br> <input type="checkbox" name="chk" value="1">1 <br> <input type="checkbox" name="chk" value="2">2 <br> </formulaire>  <br> <langage de script="javascript"> fonction fun(){ <br> //Parcourez la valeur du contrôle case à cocher et déterminez s'il est sélectionné ou non <br> longueur variable <br> longueur=document.forms[0].chk.length <br> pour(i=0;i<length;i){ <br> v=document.forms[0].chk.value <br> b=document.forms[0].chk.checked <br> Si(b) <br> alert(v=v "sélectionné") <br>                                                                             alert(v=v "Non sélectionné") <br>                                                                                                                                       </script> <br> <a href=# onclick="fun()">ddd</a> </html> <br><br> <br>-------------------------------<br> Exemple de code (Sélectionner) : <br> <br> </div> <p><br>Copier le code</p> <p></p> <div class="codetitle"> Le code est le suivant :<span><a style="CURSOR: pointer" data="91802" class="copybut" id="copybut91802" onclick="doCopy('code91802')"><u> <html></u> <!--Script lié au contrôle Select--></a> <form name="Monformulaire"></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> </sélectionner><br> </formulaire><br> <langage de script="javascript"><br> //Parcourir les éléments d'option du contrôle de sélection<br> longueur variable<br> length=document.Myform.oSelect.length<br> pour(i=0;i<length;i)<br>         document.write(document.Myform.oSelect.value)<br> </script><br> <langage de script="javascript"><br> //Parcourir les éléments d'option et déterminer si une option est sélectionnée<br> pour(i=0;i<document.Myform.oSelect.length;i ){<br /> Si(document.Myform.oSelect.selected!=true)<br />         document.write(document.Myform.oSelect.value)<br />        autre<br />         document.write("<font color=red>" document.Myform.oSelect.value "</font>") <br> ><br> </script><br> <langage de script="javascript"><br> //Imprime l'option sélectionnée<br> en fonction de SelectedIndex ​​​ //(0 à document.Myform.oSelect.length-1)<br> i=document.Myform.oSelect.selectedIndex<br>         document.write(document.Myform.oSelect.value)<br> </script><br> <langage de script="javascript"><br> //Ajouter dynamiquement des options au contrôle de sélection<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> Collection Div (calques dans la page) <br> <br> </div> <p><br>Copier le code</p> <p></p> <div class="codetitle"> Le code est le suivant :<span><div class="codebody" id="code56149"> <br> <div id="oDiv">Text</div> <br> 名詞                         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表示document中所有物件的集合<br> 只有ie支援此屬性,因此也用來判斷瀏覽器的種類*/<br> <br> </div> 圖層物件的4個屬性<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"> <br> <script language="javascript"><br /> function change(){<br /> document.all.oDiv.style.display="none"<br /> }<br /> </script><br> <div id="oDiv" onclick="change()">Text</div> <br> <br> <br> <script language="javascript"><br /> function changeText(){<br /> document.getElementById("oDiv").innerText="NewText"<br /> }<br /> </script><br> <div id="oDiv" onmouseover="changeText()">Text</div> <br> <br> <br> </div></span> </div></a></span></div></a></span> </div> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration:</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent:<a class="dBlack" title="Comment le compteur de trafic identifie-t-il C# : fausse technique referer_javascript dans WebBrowser" href="http://m.php.cn/fr/faq/9572.html">Comment le compteur de trafic identifie-t-il C# : fausse technique referer_javascript dans WebBrowser</a></span><span>Article suivant:<a class="dBlack" title="Comment le compteur de trafic identifie-t-il C# : fausse technique referer_javascript dans WebBrowser" href="http://m.php.cn/fr/faq/9574.html">Comment le compteur de trafic identifie-t-il C# : fausse technique referer_javascript dans WebBrowser</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</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/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</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/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</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/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</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:setlang('en');" class="language course-right-orders chooselan " 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:;" class="language course-right-orders chooselan chooselanguage" 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>