Heim > Artikel > Web-Frontend > Detaillierte Einführung in JavaScript DOM
Dieser Artikel bietet Ihnen eine detaillierte Einführung in JavaScript DOM. Ich hoffe, dass er für Freunde hilfreich ist.
Javascript DOM (Document Object Model) ist eine Schnittstelle, die es Entwicklern ermöglicht, den Inhalt, die Struktur und den Stil der Seite zu manipulieren. In diesem Artikel werden wir verstehen, was DOM ist und wie man es mit Javascript manipuliert. Dieser Artikel kann auch als Referenz für die grundlegende DOM-Manipulation dienen.
Grundsätzlich besteht eine Webseite aus HTML- und CSS-Dokumenten. Die Beschreibung, die Browser zum Erstellen von Dokumenten verwenden, wird Document Object Model (DOM) genannt. Es ermöglicht Javascript, auf die Elemente und Stile der Seite zuzugreifen und diese zu bearbeiten. Das Modell ist in einer objektbasierten Baumstruktur aufgebaut und definiert:
HTML-DOM-Modell
Die Position eines Elements wird als Knoten bezeichnet. Nicht nur Elemente erhalten Knoten, sondern auch Attribute von Elementen und Text haben eigene Knoten (Eigenschaftsknoten und Textknoten).
Das DOM-Dokument ist der Eigentümer aller anderen Objekte auf der Webseite. Das bedeutet, dass Sie hier beginnen müssen, wenn Sie auf ein beliebiges Objekt auf der Webseite zugreifen möchten. Es enthält auch viele wichtige Eigenschaften und Methoden, die es uns ermöglichen, auf unsere eigenen Seiten zuzugreifen und diese zu ändern.
Da wir nun verstanden haben, was ein DOM-Dokument ist, können wir mit der Erstellung unseres ersten HTML-Elements beginnen. Es stehen viele verschiedene Methoden für Javascript DOM zur Verfügung, aber diese sind die gebräuchlichsten:
getElementById()
wird verwendet, um ein einzelnes Element anhand seiner ID abzurufen. Schauen wir uns ein Beispiel an:
var title = document.getElementById(‘header-title’);
Wir holen uns das Element mit der ID header-title
und speichern es in einer Variablen.
Sie können auch die Methode getElementsByClassName()
verwenden, um mehrere Objekte abzurufen, die ein Array von Elementen zurückgibt.
var items = document.getElementsByClassName(‘list-items’);
Hier erhalten wir alle Elemente der Klasse list-items
und speichern sie in Variablen.
Sie können auch die Methode getElementsByTagName()
verwenden, um Elemente nach Tag-Namen abzurufen.
var listItems = document.getElementsByTagName(‘li’);
Hier erhalten wir alle li
-Elemente im HTML-Dokument und speichern sie in Variablen. Die Methode
querySelector()
gibt das erste Element zurück, das mit dem angegebenen CSS-Selektor übereinstimmt. Das bedeutet, dass Sie Elemente nach ID, Klasse, Tag und allen anderen gültigen CSS-Selektoren abrufen können. Hier habe ich einige der am häufigsten verwendeten Optionen aufgelistet.
Nach ID abrufen:
var header = document.querySelector(‘#header’)
Nach Klasse abrufen:
var items = document.querySelector(‘.list-items’)
Nach Tag abrufen:
var headings = document.querySelector(‘h1’);
Spezifischere Elemente abrufen:
Wir können auch CSS-Selektoren verwenden, um spezifischere Elemente zu erhalten.
document.querySelector(“h1.heading”);
In diesem Beispiel suchen wir sowohl nach Tags als auch nach Klassen und geben das erste an den CSS-Selektor übergebene Element zurück. Die
querySelectorAll()
-Methode ist genau die gleiche wie querySelector()
, außer dass sie alle Elemente zurückgibt, die mit dem CSS-Selektor übereinstimmen.
var heading = document.querySelectorAll(‘h1.heading’);
In diesem Beispiel erhalten wir alle heading
-Tags, die zur Klasse h1
gehören, und speichern sie in einem Array.
HTML-Elemente ändern
HTML DOM ermöglicht es uns, den Inhalt und Stil von HTML-Elementen zu ändern, indem wir ihre Attribute ändern.
Das innerHTML-Attribut kann verwendet werden, um den Inhalt eines HTML-Elements zu ändern.
document.getElementById(“#header”).innerHTML = “Hello World!”;
In diesem Beispiel erhalten wir das Element mit dem ID-Header und setzen seinen Inhalt auf „Hello World!“.
InnerHTML kann ein Tag auch in ein anderes Tag einfügen.
document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"
Fügen Sie hier h1-Tags in alle vorhandenen Divs ein.
Sie können den DOM auch verwenden, um den Wert des Attributs zu ändern.
document.getElementsByTag(“img”).src = “test.jpg”;
In diesem Beispiel haben wir alle <img alt="Detaillierte Einführung in JavaScript DOM" >
-Tags von src
in test.jpg geändert.
Um den Stil eines HTML-Elements zu ändern, müssen Sie das Stilattribut des Elements ändern. Hier ist eine Beispielsyntax zum Ändern des Stils:
document.getElementById(id).style.property = new style
Als nächstes sehen wir uns ein Beispiel an, in dem wir ein Element nehmen und den unteren Rand in eine durchgezogene schwarze Linie ändern:
document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;
Die CSS-Eigenschaft muss Zum Schreiben muss Camelcase anstelle des normalen CSS-Eigenschaftsnamens verwendet werden. In diesem Beispiel verwenden wir borderBottom
anstelle von border-bottom
.
Jetzt sehen wir uns an, wie man neue Elemente hinzufügt und vorhandene Elemente entfernt.
var div = document.createElement(‘div’);
Hier haben wir ein div-Element mit der Methode createElement()
erstellt, die den Tag-Namen als Parameter verwendet und ihn in einer Variablen speichert. Dann müssen Sie ihm nur noch etwas Inhalt geben und ihn in das DOM-Dokument einfügen.
var content = document.createTextNode("Hello World!"); p.appendChild(newContent); document.body.insertBefore(p, currentp);
这里用了 createTextNode()
方法创建内容,该方法用字符串作参数,然后在文档中已经存在的 div 之前插入新的 div 元素。
var elem = document.querySelector('#header'); elem.parentNode.removeChild(elem);
本例中我们得到一个元素并使用 removeChild()
方法将其删除。
现在让我们来看看怎样替换一个项目。
var p = document.querySelector('#p'); var newp = document.createElement(‘p’); newp.innerHTML = "Hello World2" p.parentNode.replaceChild(newp, p);
这里我们使用 replaceChild()
方法替换元素。第一个参数是新元素,第二个参数是要替换的元素。
还可以使用 write()
方法将 HTML 表达式和 JavaScript 直接写入 HTML 输出流。
document.write(“<h1>Hello World!</h1><p>This is a paragraph!</p>”);
我们也可以把像日期对象这样的参数传给 JavaScript 表达式。
document.write(Date());
write() 方法还可以使用多个参数,这些参数会按其出现的顺序附加到文档中。
HTML DOM 允许 Javascript 对 HTML 事件做出反应。下面列出了一些比较重要的事件:
可以用标记上的属性直接在 HTML 代码中定义事件。以下是 onclick 事件的例子:
<h1>Click me!</h1>
在此例中,单击按钮时,<h1></h1>
的文本将被改为 “Hello!”。
还可以在触发事件时调用函数,如下一个例子所示。
<h1>Click me!</h1>
这里我们在单击按钮时调用 changeText() 方法,并将该元素作为属性传递。
还可以用 Javascript 代码为多个元素分配相同的事件。
document.getElementById(“btn”).onclick = changeText();
接下来看看怎样为 HTML 元素分配事件监听器。
document.getElementById(“btn”)addEventListener('click', runEvent);
这里我们刚刚指定了一个 click 事件,在单击 btn 元素时调用 runEvent 方法。
当然还可以把多个事件指定给单个元素:
document.getElementById(“btn”)addEventListener('mouseover', runEvent);
DOM Document 中的节点之间具有层次关系。这意味着节点的结构类似于树。我们用 parent,sibling 和 child 等术语来描述节点之间的关系。
顶级节点称为根节点,是唯一一个没有父节点的节点。普通 HTML 文档中的根是 标记,因为它没有父标记,并且是文档的顶部标记。
可以用以下属性在节点之间导航:
下面是得到 h1
的父元素的例子。
var parent = document.getElementById(“heading”).parentNode
望本文能帮助你理解 Javascript DOM 以及如何用它来操作页面上的元素。
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的的JavaScript教程视频栏目!!!
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in JavaScript DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!