JavaScript-DOM-Grundlagen_Grundkenntnisse-js-Tutorial-php.cn

DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口);

DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;

一 DOM介绍

D(文档):可以理解为整个Web加载的网页文档;
O(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里说的是document对象;
M(模型):可以理解为网页文档的树形结构;

1.节点

加载HTML页面时,Web浏览器生成一个树形结构,用来表示页面内部结构;
DOM将这种节点结构理解为由节点组成;
html元素为根节点;head元素是html的子节点;meta元素和title元素之间是兄弟关系;

2.节点种类:元素节点/文本节点/属性节点

测试Div

Elementknoten => div;
Attributknoten => title="Elementattribut"
Textknoten => Test Div 2 Element finden
W3C bietet relativ praktische und einfache Methoden und Attribute zum Auffinden von Knoten, damit wir Knoten schnell bedienen können
DOM (Document Object Model) ist das Dokumentobjektmodell, API (Anwendungsprogrammschnittstelle) für HTML- und XML-Dokumente;

DOM stellt einen hierarchischen Knotenbaum dar, und Entwickler können bestimmte Teile der Seite hinzufügen/entfernen und ändern;

Elementknoten-Suchmethode
Methode getElementById() Ruft den Knoten eines bestimmten ID-Elements ab; getElementsByTagName() Ruft die Knotenliste desselben Elements ab;
getElementsByName() Ruft eine Liste von Knoten mit demselben Namen ab;
getAttribute() Ruft den Wert des Knotenattributs eines bestimmten Elements ab;
setAttribute() Setzt den Wert des Knotenattributs eines bestimmten Elements;
removeAttribute() entfernt das Knotenattribut eines bestimmten Elements;

1.getElementById()

//Die Methode empfängt einen Parameter: Ruft die ID des Elements ab;

// Wenn das entsprechende Element gefunden wird, geben Sie das HTMLDivElement-Objekt des Elements zurück. Wenn es nicht existiert, geben Sie null zurück Document.getElementById('box'); // [object HTMLDivElement];

// Wenn wir über getElementById() einen bestimmten Elementknoten erhalten, erhalten wir dieses Knotenobjekt
// Über dieses Knotenobjekt können wir auf eine Reihe seiner Eigenschaften zugreifen; (1). Greifen Sie auf die Attribute von Elementknoten
zu Attributbeschreibung
tagName Ruft den Tag-Namen des Elementknotens ab;
innerHTML Ruft den Inhalt im Elementknoten ab, Nicht-W3C-DOM-Spezifikation; Document.getElementById('box').tagName; // =>DIV;
Document.getElementById('box').innerHTML; // =>Test Div;

(2).Greifen Sie auf allgemeine HTML-Attribute zu
Attributbeschreibung
ID-Name des Elementknotens;
title Der Titelattributwert des Elementknotens;

style style CSS-Inline-Stilattributwert;

className Klasse des CSS-Elements;

document.getElementById('box').id; // =>id;
Document.getElementById('box').title; // Titel abrufen;

document.getElementById('box').style; // CSSStyleDeclaration-Objekt abrufen;

Document.getElementById('box').style.color; // Den Farbwert im Stilobjekt abrufen, d. h. den in der Elementzeile festgelegten Stilwert; Document.getElementById('box').style.color='red'; // Farbwert im Stilobjekt festlegen;

document.getElementById('box').className; // Klasse abrufen;

Document.getElementById('box').className='pox'; // Klasse festlegen;

document.getElementById('box').bbb; // Den Wert eines benutzerdefinierten Attributs abrufen, das von Nicht-IE nicht unterstützt wird;

2.getElementsByTagName()
//Die Methode gibt ein Objektarray HTMLCollection (NodeList) zurück, das eine Liste von Knoten mit demselben Elementnamen speichert; Document.getElementsByTagName('*'); // Platzhalter verwenden, um alle Elemente abzurufen;
// PS: Wenn IE Platzhalter verwendet, behandelt er die Spezifikationsanweisung des HTML am Anfang des Dokuments als ersten Elementknoten

document.getElementsByTagName('li'); // =>[object HTMLCollection];Alle li-Elemente abrufen;

Document.getElementsByTagName('li').[0]; // Holen Sie sich das erste li-Element;

3.getElementsByName()

Elemente mit der gleichen Namenseinstellung (Name) abrufen und ein Objektarray HTMLCollection (NodeList) zurückgeben; Document.getElementsByName('add'); // Holen Sie sich die Eingabeelementsammlung mit name='add';

// PS: Für Attribute, die in HTML nicht zulässig sind, gibt es Unterschiede in der von JS erhaltenen Kompatibilität // IE unterstützt zulässige Namensattribute, es treten jedoch Inkompatibilitätsprobleme mit benutzerdefinierten Attributen auf

4.getAttribute()

Die Methode ruft den Wert eines Attributs im Element ab; Es unterscheidet sich jedoch etwas von der Methode, „.attr“ direkt zu verwenden, um Attributwerte zu erhalten;

Document.getElementById('box').getAttribute('mydiv'); // Benutzerdefinierten Attributwert abrufen; Document.getElementById('box').mydiv; // Benutzerdefinierte Attributwerte abrufen, nur vom IE unterstützt;
5.setAttribute()

Die Methode legt ein Attribut und einen Wert im Element fest; sie erhält zwei Parameter: Attributname und -wert; Wenn das Attribut selbst bereits vorhanden ist, wird es überschrieben; Document.getElementById('box').setAttribute('align','center'); // Attribute und Werte festlegen;
// PS: In IE7 und niedriger hat die Verwendung der setAttribute()-Methode zum Festlegen von Klassen- und Stilattributen keine Auswirkung

6.removeAttribute() Die
-Methode kann HTML-Attribute entfernen Document.getElementById('box').removeAttribute('style'); // Stilattribut entfernen;

Drei DOM-Knoten

1.node-Knotenattribute
//Knoten können unterteilt werden in: Elementknoten/Attributknoten und Textknoten; // Diese Knoten haben drei Attribute: nodeName/nodeType und nodeValue;

Informationsknotenattribute

Knotentyp nodeName nodeType nodeValue Elementname von Element 1 null Attribut Attributname Attributwert 2 Attributwert

Textinhalt

Document.getElementById('box').nodeType; // =>1;

2. Hierarchische Knotenattribute

// Hierarchische Knoten können unterteilt werden in: übergeordnete Knoten und untergeordnete Knoten/Geschwisterknoten

// Wenn wir einen der Elementknoten erhalten, können wir das Attribut „Hierarchischer Knoten“ verwenden, um die zugehörigen Ebenenknoten abzurufen

Knotenbeziehungsdiagramm

Hierarchische Knotenattribute
Attributbeschreibung
childNodes Liest alle untergeordneten Knoten des aktuellen Elementknotens;
firstChild Liest den ersten untergeordneten Knoten des aktuellen Elementknotens;
lastChild Ruft den letzten untergeordneten Knoten des aktuellen Elementknotens ab;
OwnerDocument Ruft den Dokumentstammknoten des Knotens ab, der document;
entspricht parentNode Ruft den übergeordneten Knoten des aktuellen Knotens ab;
previousSibling Ruft den vorherigen Geschwisterknoten des aktuellen Knotens ab;
nextSibling Ruft den nächsten Geschwisterknoten des aktuellen Knotens ab;
attributes Holen Sie sich die Menge aller Attributknoten des aktuellen Elementknotens;

(1).childNodes-Attribut

Das Attribut ruft alle untergeordneten Knoten eines bestimmten Elementknotens ab. Diese untergeordneten Knoten umfassen Elementknoten und Textknoten PS: Wenn Sie childNodes[n] verwenden, um untergeordnete Knotenobjekte zurückzugeben, ist es möglich, untergeordnete Elementknoten zurückzugeben, z. B.: HTMLElement;
Es können auch Text-Unterknoten zurückgegeben werden, z. B.: Text; Element-Unterknoten können nodeName oder tagName verwenden, um den Tag-Namen zu erhalten; Unterknoten für den Tag-Text können mit
abgerufen werden var box = document.getElementById('box');
for(var i=0; i Stellen Sie fest, dass es sich um einen Elementknoten handelt, und geben Sie den Namen der Elementbezeichnung aus If(box.childNodes[i].nodeType === 1){
console.log('Element node:' box.childNodes[i].nodeName);
Stellen Sie fest, dass es sich um einen Textknoten handelt, und geben Sie den Textinhalt aus }else if(box.childNodes[i].nodeType ===3){
console.log('Text node:' box.childNodes[i].nodeValue);
}
}
PS1: Beim Abrufen eines Textknotens (der entscheidende Punkt ist, dass es sich nicht mehr um einen Elementknoten handelt) können Sie das innerHTML-Attribut nicht zum Ausgeben von Textinhalten verwenden Dieses nicht standardmäßige Attribut muss verwendet werden, um den Elementknoten abzurufen, bevor der darin enthaltene Text ausgegeben werden kann Alert(box.innerHTML); Der erste Unterschied zwischen innerHTML und nodeValue;

PS2: Wenn innerHTML und nodeValue Werte zugewiesen werden, wird nodeValue den im Text enthaltenen HTML-Code in Sonderzeichen umwandeln, wodurch der Effekt der Bildung von Klartext erzielt wird
Und innerHTML analysiert Sonderzeichen im Text; box.childNodes[0].nodeValue = 'abc'; box.innerHTML = 'abc';
(2).firstChild- und lastChild-Attribute
firstChild = childNodes[0]; Holen Sie sich den ersten untergeordneten Knoten des aktuellen Elements;
lastChild = childNodes[box.childNodes.length-1]; Holen Sie sich den letzten untergeordneten Knoten des aktuellen Elements;

(3).ownerDocument-Eigenschaft
Gibt den Dokumentobjekt-Stammknoten des Knotens zurück. Das zurückgegebene Objekt entspricht document;
Alert(box.ownerDocument === document); // =>true;Root node;

(4).parentNode/ previousSibling/nextSibling-Eigenschaften

parentNode: Gibt den übergeordneten Knoten dieses Knotens zurück;
previousSibling: Gibt den vorherigen Geschwisterknoten dieses Knotens zurück; nextSibling: Gibt den nächsten Geschwisterknoten dieses Knotens zurück; Alert(box.parentNode.nodeName); // Den Labelnamen des übergeordneten Knotens abrufen;
Alert(box.firstChild.nextSibling); // Den zweiten Knoten abrufen;
Alert(box.lastChild. previousSibling); // Den vorletzten Knoten abrufen;

(5).attributes-Attribut

Attribut gibt die Attributknotensammlung des Knotens zurück;

Alert(document.getElementById('box').attributes); // =>NamedNodeMap;

(6). Leere Textknoten ignorieren

  var body = document.getElementsByTagName('body')[0];// 获取body元素节点;  
  alert(body.childNodes.length);           // 非IE=7;  IE=3;

  // PS:在非IE中,标准的DOM具有识别空白文本节点的功能,而IE自动忽略了;
  function filterSpaceNode1(nodes){
    // 新数组;
    var ret = [];
    for(var i=0; i<nodes.length; i++){
      // 如果识别到空白文本节点,就不添加到数组;
      if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)) continue;
      // 把每次的元素节点,添加到数组里;
      ret.push(nodes[i]);
    }
    return ret;
  }

  // PS:上面的方法,采用忽略空白文件节点的方法,把得到的元素节点累加到数组里返回;
  function filterSpaceNode2(nodes){
    for(var i=0; i<nodes.length; i++){
      if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)){
        // 得到空白节点之后,一道父节点上,删除子节点;
        nodes[i].parentNode.removeChild(nodes[i]);
      }
    }
    return nodes;
  }

  // PS:firstChild等方法在获取节点时遇到空白节点,处理方法;
  function removeWhileNode(nodes){
    for(var i=0; i<nodes.childNodes.length; i++){
      if(nodes.childNodes[i].nodeType ===3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)){
        nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
      }
    }
    return nodes;
  }

Nach dem Login kopieren

Vier Knotenoperationen

// DOM kann nicht nur nach Knoten suchen, sondern auch Knoten erstellen/Kopieren/Knoten einfügen/Knoten löschen und Knoten ersetzen
Knotenbetriebsmethoden

Methodenerklärung

write() Diese Methode kann eine beliebige Zeichenfolge in das Dokument einfügen;
createElement() Erstellt einen Elementknoten;
appendChild() Hängt den neuen Knoten an das Ende der Liste der untergeordneten Knoten an;
createTextNode() Erstellt einen Dateiknoten;
insertBefore() Fügt den neuen Knoten vorne ein;
replaceChild() Ersetzen Sie den alten Knoten durch den neuen Knoten;
cloneNode() Knoten kopieren;
removeChild() Knoten entfernen;

(1).write()-Methode

//Die Methode write() kann eine beliebige Zeichenfolge in das Dokument einfügen;
document.write('

Dies ist ein Absatz!

'); // Geparster Text

(2).createElement()-Methode
Die Methode createElement() kann einen Elementknoten erstellen;
document.createElement('p'); // [object HTMLParagraphElement];

(3).appendChild() Methode

Die appendChild()-Methode fügt einen neuen Knoten am Ende der Liste der untergeordneten Knoten eines Knotens hinzu;
var box = document.getElementById('box'); var p = document.createElement('p'); // Einen neuen Elementknoten erstellen

; box.appendChild(p); //Füge den neuen Elementknoten

am Ende des untergeordneten Knotens hinzu;

(4).createTextNode()-Methode

Diese Methode erstellt einen Textknoten; var text = document.createTextNode('paragraph'); p.appendChild(text); //Füge den Textknoten am Ende des untergeordneten Knotens hinzu;

(5).insertBefore()-Methode

// 该方法可以把节点添加到指定节点的前面;
  box.parentNode.insertBefore(p,box);      // 在<div>之前添加一个<p>;
  box.insertBefore(newNode,null);        // 将newNode添加到box自列表的最后节点;

  //PS:insertBefore()方法可以给当前元素的前面创建一个节点,但没有提供给当前元素的后面创建一个节点;
  function insertAfter(newElement,targetElement){
    // 得到父节点;
    var parent = targetElement.parentNode;
    // 如果最后一个子节点是当前元素,那么直接添加即可;
    if(parent.lastChild === targetElement){
      parent.appendChild(newElement);
    }else{
    // 否则,在当前节点的下一个节点之前添加;达成在当前节点后面添加节点的需求;
      parentNode.insertBefore(newElement,targetElement.nextSibling);
    }
  }

Nach dem Login kopieren

(6).replaceChild() Methode

Diese Methode kann den Knoten durch den angegebenen Knoten ersetzen;

box.parentNode.replaceChild(p,box); // Ersetzen Sie

durch

;

(7).cloneNode() Methode

// Diese Methode kann den untergeordneten Knoten kopieren. Die nach dem Kopieren zurückgegebene Knotenkopie gehört zum Dokument, es ist jedoch kein übergeordneter Knoten angegeben // Der Parameter ist wahr: Führen Sie eine tiefe Kopie durch, bei der der Knoten und sein gesamter untergeordneter Knotenbaum kopiert werden // Der Parameter ist falsch: Flache Kopie durchführen, nur den Knoten selbst kopieren; var box = document.getElementById('box'); var clone = box.firstChild.cloneNode(true); // Den ersten untergeordneten Knoten abrufen, true bedeutet, den Inhalt zu kopieren box.appendChild(clone); // Am Ende der Liste der untergeordneten Knoten hinzufügen;

(8).removeChild() Methode

Diese Methode löscht den angegebenen Knoten;
box.parentNode.removeChild(box);

Zusammenfassung: Im nächsten Kapitel~