Zusammenfassung der grundlegenden DOM-Operationsmethoden in JavaScript-js-Tutorial-php.cn

Zusammenfassung der grundlegenden DOM-Operationsmethoden in JavaScript

伊谢尔伦

Freigeben： 2017-07-18 15:49:59

Original

1502 Leute haben es durchsucht

Grundlegende Methoden von DOM

1. Direkter Verweis auf Knoten
1.document.getElementById(id);
--Suchen Sie Knoten anhand der ID
2.document.getElementByTagName(tagName);
--Gibt ein Array mit Verweisen auf diese Knoten zurück
--Zum Beispiel: document.getElementByTagName("span"); gibt alle Arten von Span-Knoten zurück
2. Indirekter Verweis auf den Knoten
3.element.childNodes
– Gibt alle untergeordneten Knoten des Elements zurück. Sie können
-- mit element.childNodes[i] element.firstChild=element.childNodes[ aufrufen. 0];
--element.lastChild=element.childNodes[element.childNonts.length-1];
4.element.parentNode
--Referenz auf den übergeordneten Knoten
5.element.nextSibling ; //Referenzieren Sie den nächsten Geschwisterknoten
element. previousSibling; //Referenzieren Sie den vorherigen Geschwisterknoten
3. Knoteninformationen abrufen
6.nodeName-Attribut ruft den Knotenpunktnamen ab
--Für Elementknoten , der Tag-Name wird zurückgegeben, z. B.: Der zurückgegebene Wert ist „a“
– Für Attributknoten wird der Attributname zurückgegeben, z. B.:class="test" gibt test zurück
--Für Textknoten wird der Inhalt des Textes zurückgegeben
7.nodeType gibt den Typ des Knotens zurück
--Elementknoten geben 1 zurück
- -Attributknoten gibt 2 zurück
-- Textknoten gibt 3 zurück
8.nodeValue gibt den Wert des Knotens zurück
--Elementknoten gibt Null zurück
--Attributknoten gibt undefiniert zurück
--Textknoten gibt den Textinhalt zurück
9. hasChildNodes() bestimmt, ob untergeordnete Knoten vorhanden sind
10.tagName-Attribut gibt den Tag-Namen des Elements zurück
--Dieses Attribut ist nur für Elementknoten verfügbar und entspricht dem nodeName-Attribut des Elementknotens
4. Verarbeiten des Attributknotens
11. Jeder Attributknoten ist ein Attribut des Elementknotens und kann über (Elementknoten.Attributname)
12 aufgerufen werden. Verwenden Sie die Methode setAttribute(), um Attribute zu Elementknoten hinzuzufügen
--elementNode.setAttribute(attributeName, attributeValue);
--attributeName ist der Name des Attributs, attributeValue ist der Wert des Attributs
13. Verwenden Sie die Methode getAttribute(), um den Attributwert --elementNode.getAttribute(attributeName);
14. innerHTML- und innerText-Attribute, ich werde sie hier nicht vorstellen Beachten Sie, dass sowohl IE als auch Firefox Leerzeichen, Zeilenumbrüche, Tabulatoren usw. problemlos als Textknoten betrachten. Wenn Textknoten im Allgemeinen über element.childNodes[i] referenziert werden, müssen sie im Allgemeinen verarbeitet werden:

6. Ändern Sie die Hierarchie des Dokuments

<script language"javaScript" type="text/javascript"> 
function cleanWhitespace(element) 
{ 
for(var i=0; i<element.childNotes.length; i++) 
{ 
var node = element.childNodes[i]; 
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
{ 
node.parentNode.removeChild(node); 
} 
} 
} 
</script>

Nach dem Login kopieren

15. Die Methode document.createElement() Erstellt Elementknoten. Klicken Sie auf

– beispielsweise: document.createElement("Span");
16.document.createTextNode()-Methode erstellt Textknoten
- beispielsweise: document.createTextNode(" ") ; //Hinweis: Es wird nicht über HTML codiert, was bedeutet, dass hier kein Leerzeichen, sondern eine Zeichenfolge erstellt wird
17. Verwenden Sie die Methode appendChild(), um Knoten hinzuzufügen
--parentElement.appendChild (childElement);
18 .Verwenden Sie die Methode insertBefore(), um untergeordnete Knoten einzufügen
--parentNode.insertBefore(newNode, referenceNode);
--newNode ist der eingefügte Knoten davor
19. Verwenden Sie die Methode „replaceChild“, um den untergeordneten Knoten zu ersetzen.
--parentNode.replaceChild(newNode,oldNode); cloneNode-Methode zum Kopieren des Knotens
--node.cloneNode(includeChildren);
--includeChildren ist bool und gibt an, ob sein untergeordneter Knoten kopiert werden soll
21. Verwenden Sie die Methode „removeChild“, um den untergeordneten Knoten zu löschen >--parentNode.removeChild(childNode);
7. Tabellenoperationen
--Hinweis: Ein vollständiger Tabellenknoten kann nicht direkt in das Dokument eingefügt werden
22 Zeilen und Zellen hinzufügen
var _table=document.createElement(" table"); //Eine Tabelle erstellen
table.insertRow(i); //Eine Zeile in die i-te Zeile der Tabelle einfügen
row.insertCell(i); //Fügen Sie eine Zelle an der i-ten Position der Zeile
23 ein. Referenzzellenobjekt
--table.rows[i].cells[i]; Löschen Sie Zeilen und Zellen
--table.deleteRow(index);
--row.deleteCell(index); tauschen Sie zwei Zeilen aus, um die Positionen von zwei Zellen zu erhalten
- -Diese Methode verursacht einen Fehler in Firefox
Allgemeine Methode:

Das obige ist der detaillierte Inhalt vonZusammenfassung der grundlegenden DOM-Operationsmethoden in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!