Häufig verwendete DOM-Timing_Javascript-Fähigkeiten

Vorwort:

HTML erstellt einen DOM-Baum für das Dokument. Dieser Baum besteht aus einer Reihe von Knotenknoten. Es definiert für uns die Struktur des Dokuments.

Knotentyp:

Node.ELEMENT_NODE(1); //Elementknoten werden häufiger verwendet
Node.ATTRIBUTE_NODE(2); //Attributknoten werden häufiger verwendet
Node.TEXT_NODE(3); //Textknoten werden häufiger verwendet
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9); //Dokumentknoten werden häufiger verwendet
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);

Verwandte Funktionen:

1. Knoten abrufen:

document.getElementById('element');
document.getElementsByTagName('element'); Gibt ein Array-ähnliches Objekt zurück
document.getElementsByName('element'); Gibt ein Array-ähnliches Objekt zurück
document.getElementsByClassName('className') Gibt ein Array-ähnliches Objekt zurück, das von IE7 und niedriger nicht unterstützt wird; document.querySelectorAll('class' | 'element') Gibt ein Array-ähnliches Objekt zurück

2. Knoten durchqueren

Untergeordnete Knoten finden: element.childNodes Gibt ein Array-ähnliches Objekt zurück

Suchen Sie den ersten untergeordneten Knoten: element.firstChild
Suchen Sie den letzten untergeordneten Knoten: element.lastChild
Suchen Sie das übergeordnete Element: element.parentNode
Suchen Sie das vorherige Geschwisterelement: element. previousSibling
Suchen Sie das nächste Geschwisterelement: element.nextSibling

3. Knoteninformationen abrufen

Rufen Sie den Labelnamen des Element- oder Attributknotens ab: elementNode.nodeName

Holen Sie sich den Inhalt des Textknotens: textNode.nodeValue;
Rufen Sie den Inhalt des Elementknotens ab und legen Sie ihn fest (kann HTML-Tags enthalten): elementNode.innerHTML
Rufen Sie den Klartextinhalt des Elementknotens ab und legen Sie ihn fest: element.innerText(IE) | element.textContent(FF)
Rufen Sie den Wert des Attributknotens ab: attrNode.getAttribute(AttrName);
Legen Sie den Wert des Attributknotens fest: attrNode.setAttribute(AttrName,AttrValue);
Ermitteln Sie den Knotentyp: node.nodeType;
Elementknoten: 1;
Attributknoten: 2;
Textknoten: 3;
Dokumentknoten: 9;
Kommentarknoten: 8;

4. Operationsknoten

Elementknoten erstellen: document.createElement('element');

Erstellen Sie einen Textknoten: document.createTextNode('text');
Attributknoten erstellen: document.createAttribute('attribute');
Knoten löschen: node.remove();
Untergeordnete Knoten löschen: parentNode.removeChild(childNode); Knoten einfügen: parentNode.appendChild(childNode); //Am Ende des übergeordneten Knotens einfügen
parentNode.insertBefore(newNode,existingNode) //Vor einem vorhandenen Knoten einfügen
Knoten klonen: Node.cloneNode([true]) //Die Übergabe von true bedeutet tiefe Kopie
Knoten ersetzen: parentNode.replaceChild(newNode,oldNode);


Verwandte Erweiterungen:

1. Aufgrund der Inkompatibilität zwischen IE und anderen Browsern bei der DOM-Verarbeitung ist eine einfache Kapselungsverarbeitung erforderlich.

 
//=================
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. Manipulieren Sie den Stil von DOM-Elementen

//=========================
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+$/,'');
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.