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

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

=============================================== === =======================

sous-objet corps-corps

Copier le code Le code est le suivant :

document.body                                                                             // Spécifier le début et la fin du corps du document équivaut à
document.body.bgColor //Définir ou obtenir la couleur d'arrière-plan derrière l'objet
document.body.link //Couleur des liens non cliqués
document.body.alink //La couleur du lien actif (le focus est sur ce lien)
document.body.vlink //Couleur des liens cliqués
document.body.text //Couleur du texte
document.body.innerText //Définissez le texte entre ...
document.body.innerHTML //Définissez le code HTML entre ...
document.body.topMargin //Marge supérieure de la page
document.body.leftMargin //Marge gauche de la page
document.body.rightMargin //Marge droite de la page
document.body.bottomMargin //Marge inférieure de la page
document.body.background //Image de fond
document.body.appendChild(oTag) //Générer dynamiquement un objet HTML

Événements d'objets communs

Copier le code Le code est le suivant :

document.body.onclick="func()" //Le clic sur l'objet avec le pointeur de la souris est déclenché
document.body.onmouseover="func()" //Déclenché lorsque le pointeur de la souris se déplace vers l'objet
document.body.onmouseout="func()" //Déclenché lorsque le pointeur de la souris sort de l'objet

=============================================== === =======================

sous-objet emplacement-emplacement

Copier le code Le code est le suivant :

document.location.hash // La partie après #
document.location.host //Nom de domaine Numéro de port
document.location.hostname // Nom de domaine
document.location.href // URL complète
document.location.pathname // Partie répertoire
document.location.port // Numéro de port
document.location.protocol // Protocole réseau (http:)
document.location.search // La partie après ?

Événements d'objets communs

Copier le code Le code est le suivant :

documenty.location.reload() //Actualiser la page Web
document.location.reload(URL) //Ouvrir une nouvelle page Web
document.location.assign(URL) //Ouvrir une nouvelle page Web
document.location.replace(URL) //Ouvrir une nouvelle page Web

=============================================== === =======================
collection d'images (images sur la page)
a) Référence via collection

Copier le code Le code est le suivant :

document.images                                                                                                                                                                                                          document.images.length //Le nombre de balises sur la page correspondante
document.images[0] //La première balise document.images //La i-1ème balise


b) Référencez directement

via l'attribut name

Copier le code Le code est le suivant :

document.images.oImage //attribut document.images.name

c) Référencez l'attribut src de l'image

Copier le code Le code est le suivant : document.images.oImage.src //document.images.name attribut.src

d) Créer une image

Copier le code Le code est le suivant : var oImage

oImage = nouvelle Image()

document.images.oImage.



En parallèle, créez une balise sur la page pour l'afficher en conséquence

Exemple de code (création dynamique d'images) :

Copier le code Le code est le suivant :

      var oImage
oImage = nouvelle Image()
        document.images.oImage.




oImage=document.caeateElement("IMG")
oImage.src="1.jpg"
         document.body.appendChild(oImage)





=============================================== === ======================

collection de formulaires (formulaires dans la page) a) Référence via collection

Copier le code Le code est le suivant :

document.forms                                                                                                                                                    // La balise

sur la page correspondante document.forms.length //Le nombre de balises

sur la page correspondante
document.forms[0] //La première balise

document.forms        //La i-1ème balise

document.forms.length //Le nombre de contrôles dans le i-1ème

document.forms.elements[j] //Le j-1ème contrôle
dans le i-1ème

------------------------------- b) Référencez directement

via l'attribut de nom de balise

Copier le code Le code est le suivant :

document.Myform.myctrl //nom du document.form.nom du contrôle

------------------------------- c) Accéder aux attributs du formulaire

Copier le code Le code est le suivant :

document.forms.name                                                           // Correspondant à l'attribut

document.forms.action                                                 // Correspondant à l'attribut

document.forms.encoding //correspond à

attribute

document.forms.target //correspond à l'attribut document.forms.appendChild(oTag) //Insérer dynamiquement un contrôle



-------------------------------
Exemple de code (formulaire) :

Copier le code

Le code est le suivant :

//Obtenir la valeur de la zone de mot de passe texte
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)





-------------------------------
Exemple de code (case à cocher) :

Copier le code

Le code est le suivant :

1 
2 
 
fonction fun(){ 
//Parcourez la valeur du contrôle case à cocher et déterminez s'il est sélectionné ou non
longueur variable
longueur=document.forms[0].chk.length
pour(i=0;i v=document.forms[0].chk.value
b=document.forms[0].chk.checked
Si(b)
alert(v=v "sélectionné")
                                                                            alert(v=v "Non sélectionné")
                                                                                                                                       
ddd


-------------------------------
Exemple de code (Sélectionner) :

Copier le code

Le code est le suivant :

1

2
3
électionner>


//Parcourir les éléments d'option du contrôle de sélection
longueur variable
length=document.Myform.oSelect.length
pour(i=0;i         document.write(document.Myform.oSelect.value)


//Parcourir les éléments d'option et déterminer si une option est sélectionnée
pour(i=0;i Si(document.Myform.oSelect.selected!=true)
        document.write(document.Myform.oSelect.value)
       autre
        document.write("" document.Myform.oSelect.value "") 
>


//Imprime l'option sélectionnée
en fonction de SelectedIndex ​​​ //(0 à document.Myform.oSelect.length-1)
i=document.Myform.oSelect.selectedIndex
        document.write(document.Myform.oSelect.value)


//Ajouter dynamiquement des options au contrôle de sélection
      var oOption = document.createElement("OPTION");
oOption.text="4";
oOption.value="4";
Document.Myform.oSelect.add(oOption);





=============================================== === =======================
Collection Div (calques dans la page)

Copier le code

Le code est le suivant :

Text

名詞                         document.all.oDiv.style.display=""                 //以圖層設定為視覺上
document.all.oDiv.style.display="none"             //圖層設定為隱藏
document.getElementId("oDiv")                      //以getElementId引用物件
document.getElementId("oDiv").
document.getElementId("oDiv").display="none"
/*document.all表示document中所有物件的集合
只有ie支援此屬性，因此也用來判斷瀏覽器的種類*/

圖層物件的4個屬性

複製程式碼 程式碼如下:

document.getElementById("ID").innerText      //動態輸出文字
document.getElementById("ID").innerHTML      //動態輸出HTML
document.getElementById("ID").outerText      //同innerText
document.getElementById("ID").outerHTML      //同innerHTML

----------------------------

範例程式碼：

複製程式碼 程式碼如下:

Text

Text