dom XML-Javascript ändern

DOM-Änderung von XML (JavaScript)

DOM (Document Object Model) ist der Kern von JavaScript und eine Standardmethode zur Manipulation von XML. XML (Extensible Markup Language) ist ein Format, das häufig zum Speichern und Austauschen von Daten verwendet wird und die Grundlage von HTML bildet. Im Bereich der Front-End-Entwicklung müssen wir häufig JavaScript verwenden, um XML zu manipulieren, z. B. um XML-Anfragen an den Server zu senden oder Antworten im XML-Format bei der AJAX-Entwicklung zu empfangen. Dieser Artikel konzentriert sich auf die Verwendung des DOM von JavaScript zum Ändern von XML.

Einführung in die XML-Struktur

Bevor wir lernen, XML mit DOM zu ändern, müssen wir zunächst die Grundstruktur von XML verstehen. XML ist Text mit Tags als grundlegender grammatikalischer Einheit. Die Grundstruktur eines XML ist wie folgt:

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <element1 attribute1="value1">content1</element1>
  <element2>content2</element2>
  <element3>
    <subelement1>subcontent1</subelement1>
    <subelement2>subcontent2</subelement2>
  </element3>
</root>

Dabei muss das XML-Dokument mit dem <?xml ... ?></code beginnen >-Anweisung und das Element der obersten Ebene (Stammelement) heißen <code>root, und andere Elemente heißen element. Jedes Element kann ein oder mehrere Attribute haben (z. B. attribute1), die zur Bereitstellung beschreibender Informationen über das Element verwendet werden. Elemente können auch andere Elemente enthalten. Diese Verschachtelung von Elementen wird als Elementhierarchie bezeichnet. <?xml ... ?> 声明开始，而顶层元素（根元素）称为 root，其他元素称为 element。每个元素可以有一个或多个属性（例如 attribute1），属性用于提供元素的描述信息。元素还可以包含其他元素，这种元素嵌套称为元素层级结构。

DOM 修改 XML 基本操作

JavaScript 的 DOM 可以解析 XML，并将其转化为一棵节点树，允许我们使用 JavaScript 编写代码对这棵节点树进行修改操作。

1. 解析 XML

令 xmlstr 为一个 XML 字符串，我们可以使用 JavaScript 的 DOMParser 对其进行解析：

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlstr, "text/xml");

解析完成后，我们可以对解析后的 xmlDoc 进行修改。

2. 获取元素值

对于 XML 中的元素内容，我们可以通过 nodeValue 属性获取其值：

const element1Value = xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue;
console.log(element1Value); // "content1"

这里我们使用 getElementsByTagName 获取名为 element1 的元素节点，childNodes[0] 获取其文本节点，最后再使用 nodeValue 获取其值。

3. 获取和设置属性

对于 XML 中的元素属性，我们可以使用 getAttribute 和 setAttribute 方法来获取和设置属性值：

const attribute1Value = xmlDoc.getElementsByTagName("element1")[0].getAttribute("attribute1");
console.log(attribute1Value); // "value1"

xmlDoc.getElementsByTagName("element1")[0].setAttribute("attribute1", "newvalue");

这里我们使用 getAttribute 获取名为 attribute1 的 element1 的属性值，然后使用 setAttribute 设置 attribute1 的新值为 newvalue。需要注意的是，在设置属性时，需要指定该属性所属的元素节点以及属性名。

4. 创建元素节点

我们可以使用 createElement 方法在 XML 文档中创建新的元素节点：

const newElement = xmlDoc.createElement("newelement");

这里我们创建了一个名为 newelement 的新元素节点。

5. 添加节点

我们可以使用 appendChild 方法将一个节点添加到另一个节点的子节点列表中：

const element1 = xmlDoc.getElementsByTagName("element1")[0];
element1.appendChild(newElement);

这里我们将新创建的 newelement 添加到 element1 的子节点列表中。

6. 删除节点

我们可以使用 removeChild 方法从其父节点的子节点列表中删除一个节点：

const element1 = xmlDoc.getElementsByTagName("element1")[0];
const subelement2 = xmlDoc.getElementsByTagName("subelement2")[0];
element1.removeChild(subelement2);

这里我们将 subelement2 从其父节点 element1 的子节点列表中删除。

完整示例代码：

// 解析 XML
const parser = new DOMParser();
const xmlstr = `
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <element1 attribute1="value1">content1</element1>
  <element2>content2</element2>
  <element3>
    <subelement1>subcontent1</subelement1>
    <subelement2>subcontent2</subelement2>
  </element3>
</root>`;
const xmlDoc = parser.parseFromString(xmlstr, "text/xml");

// 获取元素内容并修改
const element1Value = xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue;
console.log(element1Value); // "content1"
xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue = "newcontent1";

// 获取元素属性并修改
const attribute1Value = xmlDoc.getElementsByTagName("element1")[0].getAttribute("attribute1");
console.log(attribute1Value); // "value1"
xmlDoc.getElementsByTagName("element1")[0].setAttribute("attribute1", "newvalue");

// 创建新节点并添加
const newElement = xmlDoc.createElement("newelement");
const element2 = xmlDoc.getElementsByTagName("element2")[0];
element1.appendChild(newElement);

// 删除节点
const element1 = xmlDoc.getElementsByTagName("element1")[0];
const subelement2 = xmlDoc.getElementsByTagName("subelement2")[0];
element1.removeChild(subelement2);

console.log(xmlDoc.documentElement.outerHTML);

需要注意的是，修改 XML 中的节点后需要使用 outerHTML

Grundlegende Operationen der DOM-Änderung von XML

JavaScripts DOM kann XML analysieren und in einen Knotenbaum konvertieren, sodass wir JavaScript verwenden können, um Code zum Ändern dieses Knotenbaums zu schreiben.

1. XML analysieren

Lassen Sie xmlstr eine XML-Zeichenfolge sein. Wir können den DOMParser von JavaScript verwenden, um ihn zu analysieren: 🎜

<?xml version="1.0" encoding="UTF-8"?>
<root>
   <element1 attribute1="newvalue">newcontent1<newelement/></element1>
   <element2>content2</element2>
   <element3>
      <subelement1>subcontent1</subelement1>
   </element3>
</root>

🎜Nachdem die Analyse abgeschlossen ist, können wir sie analysieren das folgende xmlDoc. 🎜

2. Elementwert abrufen

🎜Für Elementinhalte in XML können wir seinen Wert über das Attribut nodeValue abrufen: 🎜rrreee🎜Hier verwenden wir getElementsByTagName Rufen Sie den Elementknoten mit dem Namen element1 und childNodes[0] ab, um seinen Textknoten abzurufen, und verwenden Sie schließlich nodeValue, um seinen Wert abzurufen. 🎜

3. Attribute abrufen und festlegen

🎜Für Elementattribute in XML können wir die Methoden getAttribute und setAttribute verwenden, um Attributwerte abzurufen und festzulegen: 🎜rrreee🎜Hier verwenden wir getAttribute, um den Attributwert von element1 mit dem Namen attribute1 abzurufen, und verwenden dann setAttribute, um set attribute1 ist newvalue. Beachten Sie, dass Sie beim Festlegen eines Attributs den Elementknoten, zu dem das Attribut gehört, und den Attributnamen angeben müssen. 🎜

4. Elementknoten erstellen

🎜Wir können die Methode createElement verwenden, um einen neuen Elementknoten im XML-Dokument zu erstellen: 🎜rrreee🎜Hier erstellen wir ein Element mit dem Namen newelement s neuer Elementknoten. 🎜

5. Knoten hinzufügen

🎜Wir können die Methode appendChild verwenden, um einen Knoten zur Liste der untergeordneten Knoten eines anderen Knotens hinzuzufügen: 🎜rrreee🎜Hier fügen wir den neu erstellten newelement wird zur Liste der untergeordneten Knoten von element1 hinzugefügt. 🎜

6. Knoten löschen

🎜Wir können die Methode removeChild verwenden, um einen Knoten aus der Liste der untergeordneten Knoten seines übergeordneten Knotens zu löschen: 🎜rrreee🎜Hier werden wir subelement2 code> wird aus der Liste der untergeordneten Knoten seines übergeordneten Knotens <code>element1 entfernt. 🎜🎜Vollständiger Beispielcode: 🎜rrreee🎜Es ist zu beachten, dass Sie nach der Änderung des Knotens im XML das Attribut outerHTML verwenden müssen, um die vollständige XML-Zeichenfolge auszugeben. Der obige Beispielcode gibt den geänderten XML-Inhalt aus: 🎜rrreee🎜Fazit🎜🎜Durch die Verwendung des JavaScript-DOM zum Ändern von XML können wir Elemente und Attribute einfach hinzufügen, löschen und ändern. Es ist zu beachten, dass die Struktur von XML relativ flexibel ist und auf mehreren Ebenen verschachtelt werden kann. Daher müssen beim Ändern von XML Knotenoperationen entsprechend den spezifischen Umständen ausgeführt werden. Durch das Erlernen der in diesem Artikel vorgestellten grundlegenden Vorgänge der DOM-Änderung an XML glaube ich, dass Leser JavaScript flexibel verwenden können, um XML zu ändern und die Entwicklungseffizienz zu verbessern. 🎜

Das obige ist der detaillierte Inhalt vondom XML-Javascript ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!