Tutoriel sur les bases du DOM : Utilisation des connaissances DOM

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 :

HTML

JavaScript

ASP.NET

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 :

childNodes

        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 :

childNodes

        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 :

childNodes

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 :

Frères et sœurs

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 : childNodes

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>

Tutoriel sur les bases du DOM : Utilisation des connaissances DOM_Basic

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 :