Compétences DOM spiced_javascript couramment utilisées

Avant-propos :

html construit une arborescence DOM pour le document. Cette arborescence est composée d'une série de nœuds Node. Il définit pour nous la structure du document.

Type de nœud :

Node.ELEMENT_NODE(1); //Les nœuds d'éléments sont plus couramment utilisés
Node.ATTRIBUTE_NODE(2); //Les nœuds d'attribut sont plus couramment utilisés
Node.TEXT_NODE(3); //Les nœuds de texte sont plus couramment utilisés
Node.CDATA_SECTION_NODE(4);
Noeud.ENTITY_REFERENCE_NODE(5);
Noeud.ENTITY_NODE(6);
Noeud.PROCESSING_INSTRUCTION_NODE(7);
Noeud.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9); //Les nœuds de document sont plus couramment utilisés
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Noeud.NOTATION_NODE(12);

Fonctions associées :

1. Obtenir le nœud :

document.getElementById('element');
document.getElementsByTagName('element'); Renvoie un objet de type tableau
document.getElementsByName('element'); Renvoie un objet de type tableau
document.getElementsByClassName('className') Renvoie un objet de type tableau, qui n'est pas pris en charge par IE7 et versions antérieures
 ; document.querySelectorAll('class' | 'element') Renvoie un objet de type tableau

2. Traverser les nœuds

Rechercher les nœuds enfants : element.childNodes Renvoie un objet de type tableau
Trouvez le premier nœud enfant : element.firstChild
Trouvez le dernier nœud enfant : element.lastChild
Recherchez l'élément parent : element.parentNode
Recherchez l'élément frère précédent : element.previousSibling
Recherchez l'élément frère suivant : element.nextSibling

3. Obtenir des informations sur le nœud

Obtenez le nom de l'étiquette de l'élément ou du nœud d'attribut : elementNode.nodeName
Récupère le contenu du nœud de texte : textNode.nodeValue;
Récupère et définit le contenu du nœud d'élément (peut contenir des balises HTML) : elementNode.innerHTML
Obtenez et définissez le contenu en texte brut du nœud de l'élément : element.innerText(IE) | element.textContent(FF)
Obtenez la valeur du nœud d'attribut : attrNode.getAttribute(AttrName);
Définissez la valeur du nœud d'attribut : attrNode.setAttribute(AttrName,AttrValue);
Récupère le type de nœud : node.nodeType;
Nœud d'élément : 1 ;
Nœud d'attribut : 2 ;
Nœud de texte : 3 ;
Nœud de document : 9 ;
Nœud de commentaire : 8 ;

4. Nœud d'opération

Créer un nœud d'élément : document.createElement('element');
Créez un nœud de texte : document.createTextNode('text');
Créer un nœud d'attribut : document.createAttribute('attribute');
Supprimer le nœud : node.remove();
Supprimer les nœuds enfants : parentNode.removeChild(childNode);
Insérer un nœud : parentNode.appendChild(childNode); //Insérer jusqu'à la fin du nœud parent
parentNode.insertBefore(newNode,existingNode) //Insérer devant un nœud existant
Nœud de clonage : Node.cloneNode([true]) //Passer true signifie une copie complète
Remplacer le nœud : parentNode.replaceChild(newNode,oldNode);

Extensions associées :

1. En raison de l'incompatibilité entre IE et d'autres navigateurs dans le traitement du DOM, un simple traitement d'encapsulation est requis.

 
//=================
function getElementChildren(element) {
   var children = [],
   oldChildNodes = element.childNodes;
   for(var i=0, len=oldChildNodes.length; i<len; i+=1) {
     if(oldChildNodes[i].nodeType == 1) {
        children.push(oldChildNodes[i]);
     }
   }
 return children;
}
 
//==================
function getElementNext(element) {
   var next = element.nextSibling || null;
     if(next) {
       if(next.nodeType == 1) {
          return next;
       } else {
          return arguments.callee(next);
       }
     } else {
     throw new Error("下一个兄弟元素不存在！");
     }
}
 
//======================
function getElementPrev(element) {
   var prev = element.previousSibling || null;
   if(prev) {
     if(prev.nodeType == 1) {
       return prev;
     } else {
       return arguments.callee(prev);
     }
   } else {
     throw new Error("上一个兄弟元素不存在！");
   }
}
 

2. Manipuler le style des éléments DOM

//=========================
function getElementStyle(element,styleName) {
   if(typeof getComputedStyle != 'undefined') {
     return getComputedStyle(element,null)[styleName];
   } else {
     return element.currentStyle[styleName];
   }
}
 
//==========================
function addClass(element,className) {
   element.className += className;
}
 
//==========================
function removeClass(element,removeClassName) {
   var classStr = element.className;
   element.className = classStr.replace(removeClassName,'').split(/\s+/).join(' ').replace(/^\s+/,'').replace(/\s+$/,'');
}

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.