Tutoriel sur les bases du DOM : Utilisation des connaissances DOM_Basic

Après avoir compris le framework et les nœuds du DOM (Text Object Model), le plus important est d'utiliser ces nœuds pour traiter les pages web html

Pour un nœud de nœud DOM, il existe une série de propriétés et de méthodes qui peuvent être utilisées. Ceux couramment utilisés incluent le tableau suivant.

Parfait : http://www.w3school.com.cn/xmldom/dom_element.asp

1. Nœud d'accès

BOM fournit certaines méthodes de limite pour accéder aux nœuds, les plus couramment utilisées sont getElementsByTagName() et getElementById()

Copier le code Le code est le suivant :

Langue du client

• HTML


• JavaScript


• CSS

Langage côté serveur

• ASP.NET


• JSP


• PHP

document.getElementById()

Copier le code Le code est le suivant :

PHP

Copier le code Le code est le suivant :

//id obtient le nom de classe

2. Détecter le type de nœud

Le type de nœud peut être détecté via le nodeType. Ce paramètre renvoie 12 valeurs entières.

Format d'expression tel que document.nodeType

Ce qui est vraiment utile, ce sont les trois types de nœuds de modèle mentionnés dans le modèle DOM (1)

Nœuds d'éléments, nœuds de texte et nœuds d'attribut

1. La valeur de retour du nœud d'élément est 1

2. La valeur de retour du nœud d'attribut est 2

3. Le nœud de texte du nœud de texte renvoie une valeur de 3

Copier le code Le code est le suivant :

CSS

Retour : nodeType : 1

Cela signifie que certains nœuds peuvent être traités individuellement, ce qui est très pratique lors de la recherche de nœuds. J'en parlerai plus tard.

3. Utiliser la relation entre père, fils et frère pour trouver des nœuds

Lors de l'accès au nœud dans la première section, utilisez l'attribut childNodes du nœud pour accéder au nœud de texte contenu dans le nœud de l'élément.

Cette section utilise la relation parent-enfant-frère des nœuds pour trouver des nœuds

*Utilisez les attributs hasChildNodes et childNodes pour obtenir tous les nœuds contenus dans ce nœud

Copier le code Le code est le suivant :

        window.onload = function myDOMInspector(){
                var oUl = document.getElementById("myList");                                                                                                                                                           var oUl = document.getElementById("myList");                                      // Obtenez la balise

          var DOMString = "";
                                                                                                                                                                     var oCh = oUl.childNodes;
Pour (var I = 0; i & lt; och.length; i) // Voir
DOMString = oCh[i].nodeName "
";
            }
                document.write(DOMString);
>

ête>

• Côtes de porc aigre-douce


• Rond de porc cuit à la vapeur avec vermicelles


• Poisson Kimchi


• Poulet rôti aux marrons


• Ma Po Tofu

4.DOM obtient le nœud parent du nœud

Copier le code Le code est le suivant :

        window.onload = function(){
var food = document.getElementById("mydearfood");
Document.write(food.parentNode.tagName)
>

ête>

• Côtes de porc aigre-douce


• Rond de porc cuit à la vapeur avec vermicelles


• Poisson Kimchi


• poulet rôti aux marrons


• Ma Po Tofu

//retourne ul

À l'aide du nœud parent, le nœud parent du nœud spécifié a été obtenu avec succès

5. Utilisez l'attribut parentNode

Copier le code Le code est le suivant :

        window.onload = function(){
var food = document.getElementById("mydearfood");
          var parentElm = food.parentNode;
​​​​​​while(parentElm.className != "coloré" && parentElm != document.body)
                parent Elm = parentElm.parentNode;                document.write("tageName:" parentElm.tagName "
");
               document.write("claaName:" parentElm.className "
");
                document.write("typeOf:" typeof(food) "
");
>

ête>

• Côtes de porc aigre-douce


• Rond de porc cuit à la vapeur avec vermicelles


• Poisson Kimchi


• poulet rôti aux marrons


• Ma Po Tofu

//Sortie
//tageName:DIV
claaName:colorful
typeOf:object

En partant d'un nœud enfant, recherchez le nœud parent vers le haut jusqu'à ce que le nom de classe du nœud soit "coloré"

La relation fraternelle de 6.dom

Copier le code Le code est le suivant :

        window.onload = function(){
var foods = document.getElementById("mydearfood");
var nextF = foods.nextSibling;
alert("nextSibling:" nextF.tagName "
");
>

ête>

• Côtes de porc aigre-douce


• Rond de porc cuit à la vapeur avec vermicelles


• Poisson Kimchi


• poulet rôti aux marrons


• Ma Po Tofu

                                                                                                                                                                                                                                     

L'utilisation des attributs nextsibling et previousSibling pour accéder aux nœuds frères semble bonne.

Mais applicable uniquement au navigateur IE

Afin d'avoir une bonne compatibilité lors de l'utilisation du code, nodeType doit être utilisé à des fins de jugement

Le traitement de compatibilité est le suivant :

Copier le code Le code est le suivant :

fonction nextSib(nœud){
var tempLast = node.parentNode.lastChild;
//Déterminez s'il s'agit du dernier nœud, si c'est le cas, retournez null
Si(noeud ​​== tempLast)
        renvoie null ;
var tempObj = node.nextSibling;
//Recherchez les nœuds frères suivants un par un jusqu'à ce que le nœud élément soit trouvé
While(tempObj.nodeType!=1 && tempObj.nextSibling!=null)
         tempObj = tempObj.nextSibling;
//Opérateur ternaire, s'il s'agit d'un nœud d'élément, il renvoie le nœud lui-même, sinon il renvoie null
Retour (tempObj.nodeType==1)?tempObj:null;
>
fonction prevSib(nœud){
var tempFirst = node.parentNode.firstChild;
//Déterminez s'il s'agit du premier nœud, si c'est le cas, retournez null
Si(node ​​​​== tempFirst)
        renvoie null ;
var tempObj = node.previousSibling;
//Recherchez les nœuds frères précédents un par un jusqu'à ce que le nœud élément soit trouvé
While(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
         tempObj = tempObj.previousSibling;
Retour (tempObj.nodeType==1)?tempObj:null;
>
fonction monDOMInspector(){
var monArticle = document.getElementById("myDearFood");
//Obtenir le nœud frère de l'élément suivant
var nextListItem = nextSib(myItem);
//Obtenir le nœud frère de l'élément précédent
var preListItem = prevSib(myItem);
alert("Élément suivant :" ((nextListItem!=null)?nextListItem.firstChild.nodeValue:null) " Élément précédent :" ((preListItem!=null)?preListItem.firstChild.nodeValue:null) );
>

ête>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

7. Définir les attributs du nœud

Copier le code

Le code est le suivant :

        window.onload = function(){

// Obtenez l'image           var imgDataBe = document.getElementsByTagName("img")[0];
//Récupère l'attribut titre de l'image
              imgDataBe.setAttribute("src","02.gif");
             imgDataBe.setAttribute("title","人情波");
             document.write(imgDataBe.getAttribute("title"));
              document.write(imgDataBe.getAttribute("alt"));
              document.write(imgDataBe.getAttribute("node-data"));
             document.write(imgDataBe.getAttribute("node_data"));
>

ête>

Définissez les attributs du nœud à l'aide de la méthode setAttribute()

Copier le code Le code est le suivant :

                                                                                                          
          ête>

          

              555
                                                                                               Commutateur




8.createElement() crée un nœud

Copier le code

Le code est le suivant :                                                                                                                     

               window.onload = function() {

         var oP = document.createElement("p");
​​​​ var oText = document.createTextNode("Utiliser dom pour créer un nœud");
        var oText1 = document.createTextNode("Utiliser dom pour créer le nœud 123");
oP.appendChild(oText);
oP.appendChild(oText1);
           document.body.appendChild(oP);
            }
                                                                                      ête>

Il y a un P ici, testez createElement()

9.removeChild supprime le nœud

Copier le code

Le code est le suivant :

                                                                                                          
          ête>

Il y a un P ici, testez createElement()

10.insertBefore() insère un nœud avant un nœud spécifique

Copier le code Le code est le suivant :

                                                                                                          
         

Les méthodes fournies par DOM ne peuvent utiliser que insertBefore() pour ajouter un nouvel élément avant l'élément cible, ou utiliser la méthode appendchild() pour ajouter un nouvel élément à la fin des childNodes de l'élément parent (exemple : adresse ).

En pratique, il est souvent utilisé pour ajouter un nouvel élément à la fin d'un élément spécifique. La méthode DOM n'a pas la méthode insertBefore(), mais elle peut être écrite en utilisant les connaissances existantes.

L'idée du code est la suivante

Copier le code

Le code est le suivant : Fonction insertAfter(newElement, targetElement) {                      var opent = targetElement.parentNode; //Trouver l'élément parent de l'élément cible

If (oparent.lastChild == targetElement) //Si la cible est le dernier élément

                 opent.appendChild(newElement); //Ajouter directement à la fin du dernier élément
else //Insérer avant le nœud de l'élément parent de l'élément suivant oparent.insertBefore(newElement, targetElement.nextSibling)



Instance : (Ajouter en dehors de l'élément) Instance d'origine : Adresse

Copier le code

Le code est le suivant :

          
                                                                                        ête>

                                                                                             

Deuxième

         

12. Ajoutez des fragments de document pour améliorer l'efficacité de l'exécution

Copier le code

Le code est le suivant :

   
       
       
       
            window.onload = function() {
    var oPold = document.getElementsByTagName("p")[0];
    var aColors = ["rouge","vert","bleu","magenta","jaune","chocolat","noir","aigue-marine","citron vert","fuchsia","laiton","azur ","marron","bronze","rose profond","bleu alice","gris","cuivre","corail","feldspath","orange","orchidee","rose","prune", "quartz","violet"];
    var oFragment = document.createDocumentFragment();    //创建文档碎photo
    pour(var i=0;i         var oP = document.createElement("p");
        var oText = document.createTextNode(aColors[i]);
        oP.appendChild(oText);
        oFragment.appendChild(oP);        //将节点先添加到碎片中
    >
    //document.body.appendChild(oFragment);    //最后一次性添加到页面
     oPold.parentNode.insertBefore(oFragment,oPold);//结合insertBefore使文档碎片添加到节点之前
            >
       
    ête>
   
   

这里本来有个P