Lernen Sie gemeinsam die Javascript-Dom-Programmierung kennen und notieren Sie sich praktische Erfahrungen

Ich habe kürzlich JavaScript-Dom-Programmierung gelernt und befürchte, dass ich es in Zukunft vergessen werde. Deshalb habe ich das Gelernte speziell zusammengefasst und organisiert. Der Dokumentobjektmodus ist ein W3C-Standard.

1. JavaScript ist eine Programmiersprache, die Webseiten interaktiv macht.

2. Die Methode zum Festlegen der Eigenschaften von Browsereigenschaften wird als BOM bezeichnet.

3. Das bevorzugte Benennungsformat für Funktionsnamen, Methodennamen und Objektattributnamen .

4. Bei der Benennung von Variablen können Sie Unterstriche verwenden, um die einzelnen Wörter zu trennen, und bei der Benennung von Funktionen können Sie die Groß-/Kleinschreibung verwenden.

5. Die Funktion sollte sich wie ein eigenständiges Skript verhalten. Bei der Definition einer Funktion müssen wir alle ihre internen Variablen explizit als lokale Variablen deklarieren.

6. Vom Browser vordefinierte Objekte werden als Hostobjekte bezeichnet. Zu den Hostobjekten gehören Von, Bild, Dokument usw.

7.DOM (Dokumentobjektmodell).

8. Es gibt Elementknoten (Beschriftungen) im DOM (jedes Element im Dokument ist ein Objekt), Textknoten (Inhalt) und Attributknoten (Attribute).

9. Auch wenn dieses Tag im gesamten Dokument nur ein Element hat, gibt getElementsByTagName ein Array zurück und die Länge des Arrays beträgt 1.

10.getElementsByClassName gibt ein Array von Elementen mit demselben Klassennamen zurück.

11. Wenn Sie getElemntsByClassName verwenden, um mehrere Klassennamen anzugeben, müssen Sie die mehreren Klassennamen nur durch Leerzeichen
in den Parametern trennen.
12.getElementsById gibt ein Objekt zurück, das einem speziellen Elementknoten
im Dokument entspricht.
13. Sowohl die Funktionen getAttribute als auch setAttribute können nur für Elementknoten verwendet werden.

14. DOM-Arbeitsmodus: Laden Sie zuerst den statischen Inhalt des Dokuments und aktualisieren Sie ihn dann dynamisch. Das Aktualisieren des Seiteninhalts erfordert keine Aktualisierung der Seite der Browser.

15. Nach dem Hinzufügen eines Ereignishandlers zu einem Element wird der entsprechende JavaScript-Code ausgeführt, sobald das Ereignis auftritt. Der aufgerufene JavaScript-Code kann einen Wert zurückgeben, der an den Event-Handler übergeben wird. Angenommen, die Ereignisverarbeitungsfunktion ist im Tag „onclick“ angegeben. Wenn diese Funktion „true“ zurückgibt, geht das Ereignis „onclick“ davon aus, dass auf den Link im Tag „a“ geklickt wurde. Wenn es „false“ zurückgibt, wird davon ausgegangen, dass der Link 2 ist wurde nicht angeklickt. Wenn Sie daher das Standardverhalten im a-Tag nicht auslösen möchten, fügen Sie in onclick einen return false hinzu.

<li><a href="img/1.png" onclick="showpic(this);return false;">1</a> </li>

16. Das Attribut childNodes kann verwendet werden, um alle untergeordneten Elemente eines beliebigen Elements abzurufen.

17. Wenn Sie den Typ eines Knotens wissen möchten, können Sie nodeType verwenden, um den Typ des Knotens anzuzeigen
nodeType=1 Der Knoten ist ein Elementknoten

           =2            属性节点
           =3            文本节点

18. window.open() öffnet ein neues Browserfenster.

function popUrl(winURL) {
        window.open(winURL,"popup","width:320px,height:400px");
    }
    popUrl('canvas.html');

19. Reibungslose Verschlechterung (wenn der Browser keinen JS-Code unterstützt, hat dies keinen Einfluss auf die normale Funktion der Webseite.)

Leistungsüberlegungen
(1) Greifen Sie so wenig wie möglich auf das DOM zu: Immer wenn Sie nach bestimmten Elementen im DOM suchen, durchsucht der Browser den gesamten DOM-Baum nach möglichen passenden Elementen. Mit anderen Worten, der gesamte DOM-Baum wird jedes Mal durchlaufen, wenn getElementBy* verwendet wird. Daher ist es am besten, ihn einmal zu verwenden, um das Element abzurufen und das Element in einer Variablen zu speichern.
(2) Verwenden Sie Tags so wenig wie möglich: Zu viele unnötige Elemente vergrößern nur die Größe des DOM-Baums und erhöhen dadurch die Zeit, die zum Durchqueren des DOM-Baums zum Auffinden bestimmter Elemente benötigt wird.
(3) Der beste Weg, Skripte einzubinden, besteht darin, externe Dateien zu verwenden und mehrere JS-Dateien zusammenzuführen. Dadurch wird die Anzahl der beim Laden einer Seite gesendeten Anfragen reduziert.
(4) Platzieren Sie alle Skript-Tags am Ende des Dokuments, vor dem Ende des Body-Tags, um die Seite schneller zu machen.
(5) Skript komprimieren: Löschen Sie alle unnötigen Bytes im Skripttext, wie z. B. Leerzeichen und Kommentare, um den Zweck der Komprimierung der Datei zu erreichen.

21. HTTP-Protokollspezifikation, der Browser kann gleichzeitig bis zu zwei Dateien mit demselben Namen herunterladen.

22. Wenn Sie JavaScript verwenden möchten, um einer Webseite Verhalten hinzuzufügen, sollten Sie den JavaScript-Code nicht von der Struktur der Webseite abhängig machen.

23. Wenn eine Funktion mehrere Ausgänge hat, ordnen Sie diese Ausgänge am Anfang der Funktion an.

24. Schleife, um die js-Verarbeitung zu bestimmen, die nach dem Klicken auf eine Gruppe von Tags durchgeführt wird

function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById('imagegallery')) return false;
    var gallery = document.getElementById('imagegallery');
    var links  = gallery.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++){
        links[i].onclick = function () {
            showpic(this);
            return false;
        }
    }
}

25. Schreiben Sie Ihre eigene Skriptfunktion, um die Verarbeitung hinzuzufügen, die wann durchgeführt werden muss Die Seite wird geladen. Die Funktion

function addLoadEvent(func) {
  var onload = window.onload;
  if (typeof window.onload !=func){
  window.onload = func;
  }else {
  window.onload = function (ev) {
  oldload();
  func();
  }
  }
}

26.createTextNode wird zum Erstellen von Textknoten verwendet.

var txt =  document.createTextNode("hello world");

27.js Wenn Sie Inhalte in das Dokument einfügen möchten, müssen Sie aus der Perspektive von dom beginnen . Fügen Sie beispielsweise einen p-Absatz in p ein:
a5fdcf67963356bc388e8ab959c1fe2594b3e26ee717c64999d7867364b1b4a3
Insert a p in js

var p = document.createElement("p");
var txt = document.creatTextNode('hello world');
var p = document.getElementById("myp");
p.appendChild(p);
p.appendChild(txt);

28.insertBefore() ,: Fügen Sie einen ein Element vor dem Element,

Verwandte Artikel:

"Java Script DOM Programming Art" Lesenotizen

"JavaScript DOM Programming Kunst“ Lesenotizen DOM Basics_Javascript Skills

Ähnliche Videos:

JavaScript&DOM-Video-Tutorial

Das obige ist der detaillierte Inhalt vonLernen Sie gemeinsam die Javascript-Dom-Programmierung kennen und notieren Sie sich praktische Erfahrungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!