Wie JavaScript HTML-DOM zum Betrieb von Dokumenten verwendet_Javascript-Fähigkeiten

HTML-DOM-Baum

1. Einführung in DOM

DOM ist ein vom W3C entwickelter Standard für den Zugriff auf strukturierte Dokumente wie XML und XHTML.

Das W3C Document Object Model (DOM) ist eine plattform- und sprachneutrale Schnittstelle, die es Programmen und Skripten ermöglicht, dynamisch auf den Inhalt, die Struktur und den Stil eines Dokuments zuzugreifen und diese zu aktualisieren

Core DOM: das Standardmodell für jedes strukturierte Dokument

XML DOM: Standardmodell für XML-Dokumente. Ist ein Standard zum Abrufen, Ändern, Hinzufügen oder Entfernen von XML-Elementen.

HTML DOM: Das Standardmodell für HTML-Dokumente. Definiert die Objekte und Eigenschaften aller HTML-Elemente sowie die Methoden (Schnittstellen) für den Zugriff darauf.

2. DOM-Knoten

Gemäß der DOM-Spezifikation ist jede Komponente im Dokument ein Knoten. DOM-Vorschriften:

Das gesamte Dokument ist ein Dokumentknoten, auch Wurzelknoten genannt

Jedes Tag ist ein Elementknoten

Der im Tag enthaltene Text ist ein Textknoten

Jedes Attribut des Tags ist ein Attributknoten

Die Anmerkung gehört zum Anmerkungsknoten

2.1DOM-Schnittstelle und ihre Eigenschaften und Methoden

DOM simuliert das Dokument als eine Reihe von Knotenschnittstellen. Auf Knoten kann über JavaScript oder andere Programmiersprachen zugegriffen werden. Ja

Die Programmierschnittstelle von DOM wird durch eine Reihe von Standardeigenschaften und -methoden definiert.

2.1.1DOM-Eigenschaften

Einige typische DOM-Attribute:

x.nodeName: Name von x

x.nodeValue: Wert von x

x.parentNode: Der übergeordnete Knoten von x, außer dem Wurzelknoten gibt es nur einen übergeordneten Knoten

x.childNodes: Der untergeordnete Knoten von x, es können mehrere untergeordnete Knoten vorhanden sein

x.attributes: eine Sammlung von Attributknoten von x, die mehrere Attribute haben können

Wobei x ein Knotenobjekt ist

2.1.2DOM-Methode

Einige typische DOM-Methoden:

x.getElementsByTagName(name): Alle Elemente mit dem angegebenen Tag-Namen abrufen

x.appendChild(node): Fügen Sie einen untergeordneten Knoten in x
ein

x.removeChild(node): Untergeordneten Knoten von x entfernen

Beispiel:

//获得文档标题的文本内容
document.getElementsByTagName("title")[0].childNode[0].nodeValue

2.1.3 Zugriffsknoten

Methode 1: Durch Verwendung der getElementsByTagName()-Methode

Methode 2: Durchlaufen Sie den Knotenbaum durch eine Schleife

Methode 3: Navigieren Sie im Knotenbaum, indem Sie Knotenbeziehungen nutzen

2.1.4 Knoteninformationen :

nodeName: Rufen Sie den Namen des Knotens ab. Er ist schreibgeschützt.

nodeValue: Den Wert des Knotens abrufen oder festlegen

nodeType: Der Knotentyp, der schreibgeschützt ist. 1 stellt ein Element dar, 2 stellt ein Attribut dar, 3 stellt einen Text dar, 8

steht für Kommentare, 9 steht für Dokumentation

3. Knotenbetrieb

3.1 Knoten erstellen

createElement(tagName): Elementknoten erstellen

createTextNode(text): Textknoten erstellen

createAttribute(attrName): Attributknoten erstellen

3.2 Knoten hinzufügen

Der neu erstellte Knoten muss mit anderen vorhandenen Knoten organisiert werden, damit er wirklich zum Dokumentbaum gehört.

appendChild(node) fügt einen neuen untergeordneten Knoten nach dem letzten untergeordneten Knoten innerhalb des aktuellen Knotens hinzu, und der Parameter ist der neue untergeordnete Knoten

insertBefore(newNode,node) fügt einen neuen untergeordneten Knoten vor dem im aktuellen Knoten angegebenen untergeordneten Knoten hinzu. Der erste Parameter ist der neue untergeordnete Knoten und der zweite Parameter ist der im aktuellen Knoten angegebene untergeordnete Knoten

insertAfter() fügt einen neuen untergeordneten Knoten nach dem im aktuellen Knoten angegebenen untergeordneten Knoten hinzu. Der erste Parameter ist der neue untergeordnete Knoten und der zweite Parameter ist der im aktuellen Knoten angegebene untergeordnete Knoten

setAttributeNode() legt den Attributknoten auf dem aktuellen Elementknoten fest. Der Typ des Knotens, der den Aufruf dieser Methode einlädt, ist der Elementtyp, und der Parameter ist der festzulegende Attributknoten

Beispiel:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用DOM创建并添加节点</title>
<script type="text/javascript">
function createAndAddNode(){
//div标签元素节点
var container = document.body.getElementsByTagName("div")[0];
//创建元素节点对象，元素名即标签名 <p>
var pEle = document.createElement("p");
//创建文本节点对象，文本内容就是参数值
var txtOfP = document.createTextNode("这是段落的文字");
//在元素节点内部添加一个文本节点<p>这是段落的文字
pEle.appendChild(txtOfP);
//在div元素节点后面添加新的子节点。<div><p>这是段落的文字</div>
container.appendChild(pEle);
//创建一个超链接标签节点
var aEle = document.createElement("a");
//创建文本节点
var txtOfA = document.createTextNode("博客园");
//在元素节点中添加文本节点，<a>博客园</a>
aEle.appendChild(txtOfA);
//创建一个href属性节点
var attrOfA = document.createAttribute("href");
//将href属性节点设置其属性值
attrOfA.nodeValue = "http:www.cnblogs.com";
//将属性节点添加到超链接元素节点中,即设置a元素标签的属性节点
aEle.setAttributeNode(attrOfA);
//将元素节点a添加到div中
container.appendChild(aEle);
}
//浏览器窗口加载时调用该方法
window.onload = createAndAddNode;
</script>
</head>
<body>
<div></div>
</body>
</html>

3.3 Knoten ändern

Das Ändern von Knoten bezieht sich im Allgemeinen auf das Ändern des Texts innerhalb des Elements oder das Ändern des Attributwerts des Elements. In beiden Fällen können Sie den Textknoten oder den Attributknoten ändern, indem Sie seinem Knotenwert einen Wert zuweisen. Für Letzteres ok

Rufen Sie die setAttribute-Methode auf dem Elementknoten auf, um den Attributwert zu ändern.

Beispiel:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用DOM改变节点</title>
<script type="text/javascript">
function changeSize(){
var target = document.getElementById("txt_1");
//设置列的属性值为50
target.setAttribute("cols", "50");
//设置行的属性值为6 先访问属性节点集合，然后通过getNamedItem定位属性名，
target.attributes.getNamedItem("rows").nodeValue = "6";
}
function changeText() {
var target = document.getElementById("lbl_1");
//先访问该元素节点的子节点，子节点个数可以是多个，因此用了数组下标访问指定元素。然后通过nodeValue修改其值
target.childNodes[0].nodeValue = "您的个人简历：";
}
</script>
</head>
<body>
<form action="">
<label id="lbl_1" for="txt_1">多行文本框的标签文字</label>
<textarea id="txt_1" ></textarea>
<input type="button" name="btn" value="改变多行文本域的尺寸" onclick="changeSize();" />
<input type="button" name="btn" value="改变标签的文字" onclick="changeText();" />
</form>
</body>
</html>

3.3 Knoten löschen

Das Löschen eines Knotens bezieht sich im Allgemeinen auf das Löschen von Unterelementen oder Text, die in einem Element enthalten sind, aus einem Elementknoten. Es können auch Attributknoten gelöscht werden, die in einem Elementknoten enthalten sind

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用DOM删除节点</title>
<script type="text/javascript">
function doRemoveNode() {
//label标签元素节点
var targetLbl = document.getElementById("lbl_1");
//从label元素节点中删除第一个子节点
targetLbl.removeChild(targetLbl.firstChild);
//文档元素，通过访问文档元素集合，指定位置元素获得多行文本域
var tagetArea = document.documentElement.getElementsByTagName("textarea")[0];
//文档中第一个form标签元素节点
var tagetForm = document.documentElement.getElementsByTagName("form")[0];
//删除文档中第一个form标签中的textarea
tagetForm.removeChild(tagetArea);
}
</script>
</head>
<body>
<form>
<label id="lbl_1" for="txt_1">多行文本框的标签文字</label>
<textarea id="txt_1" rows="" cols=""></textarea>
<input type="button" name="btn" value="删除节点" onclick="doRemoveNode();"/>
</form>
</body>
</html>

4. Zusammenfassung

DOM ist die Baumstruktur, in der Dokumente im Speicher dargestellt werden, genannt DOM-Baum. DOM ist die vom W3C entwickelte Standardmethode und das Standardattribut für den Zugriff auf Dokumente, genannt DOM-Schnittstelle
Alle Daten im Dokument werden als Knoten in der Baumstruktur dargestellt. Die aus allen Knoten bestehende Baumstruktur wird als Knotenbaum oder DOM-Baum bezeichnet
Es gibt viele Arten von Knoten. Die häufigsten sind Elementknoten, Attributknoten, Textknoten, Wurzelknoten usw. Knoten haben Namen und Werte, aber verschiedene Knotentypen haben unterschiedliche Bedeutungen von Namen und Werten

Die Methode createElement() wird zum Erstellen von Elementknoten, die Methode createAttribute() zum Erstellen von Attributknoten und die Methode createTextNode() zum Erstellen von Textknoten verwendet, um untergeordnete Elementknoten oder Textknoten zum Element hinzuzufügen Für Knoten können Sie die Methode appendChild() verwenden. Es gibt auch die Methoden insertAfter() und insertBefore() zum Einfügen neuer Knoten vor und nach bestimmten Knoten. Es ist zu beachten, dass die Methode zum Hinzufügen von Attributknoten zu Elementknoten die Methode setAttributeNode() ist.

Um den Wert eines Textknotens oder den Wert eines Attributknotens zu ändern, sollten Sie das nodeValue-Attribut
verwenden

Um einen Knoten zu löschen, verwenden Sie die Methode „removeChild()“.

Der Editor wird Ihnen viel darüber erzählen, wie JavaScript HTML DOM zum Betreiben von Dokumenten verwendet. Ich hoffe, es wird Ihnen hilfreich sein!