dom modifier XML javascript

DOM Modification XML (JavaScript)

DOM (Document Object Model) est le cœur de JavaScript et un moyen standard de manipuler XML. XML (Extensible Markup Language) est un format couramment utilisé pour stocker et échanger des données et constitue la base du HTML. Dans le domaine du développement front-end, nous avons souvent besoin d'utiliser JavaScript pour manipuler XML, comme envoyer des requêtes XML au serveur ou recevoir des réponses au format XML dans le développement AJAX. Cet article se concentrera sur la façon d'utiliser le DOM de JavaScript pour modifier XML.

Introduction à la structure XML

Avant d'apprendre à modifier XML avec DOM, nous devons d'abord comprendre la structure de base de XML. XML est un texte avec des balises comme unité grammaticale de base. La structure de base d'un XML est la suivante :

<?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>

Parmi eux, le document XML doit commencer par le <?xml ... ?></code. >, et l'élément de niveau supérieur (élément racine) est appelé <code>root, et les autres éléments sont appelés element. Chaque élément peut avoir un ou plusieurs attributs (tels que attribute1), qui sont utilisés pour fournir des informations descriptives sur l'élément. Les éléments peuvent également contenir d'autres éléments, et cette imbrication d'éléments est appelée hiérarchie d'éléments. <?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

Opérations de base de modification DOM de XML

Le DOM de JavaScript peut analyser XML et le convertir en une arborescence de nœuds, nous permettant d'utiliser JavaScript pour écrire du code afin de modifier cette arborescence de nœuds.

1. Analyser XML

Soit xmlstr une chaîne XML. Nous pouvons utiliser le DOMParser de JavaScript pour l'analyser : 🎜

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

🎜Une fois l'analyse terminée, nous pouvons l'analyser. le xmlDoc suivant. 🎜

2. Obtenir la valeur de l'élément

🎜Pour le contenu d'un élément en XML, nous pouvons obtenir sa valeur via l'attribut nodeValue : 🎜rrreee🎜Ici, nous utilisons getElementsByTagName Récupérez le nœud d'élément nommé element1, childNodes[0] pour obtenir son nœud de texte, et enfin utilisez nodeValue pour obtenir sa valeur. 🎜

3. Obtenir et définir des attributs

🎜Pour les attributs d'élément en XML, nous pouvons utiliser les méthodes getAttribute et setAttribute pour obtenir et définir les valeurs d'attribut : 🎜rrreee🎜Ici, nous utilisons getAttribute pour obtenir la valeur d'attribut de element1 nommé attribute1, puis utilisons setAttribute pour set attribute1 est newvalue. Il convient de noter que lors de la définition d'un attribut, vous devez spécifier le nœud d'élément auquel appartient l'attribut et le nom de l'attribut. 🎜

4. Créer un nœud d'élément

🎜Nous pouvons utiliser la méthode createElement pour créer un nouveau nœud d'élément dans le document XML : 🎜rrreee🎜Ici, nous créons un élément nommé . Le nouveau nœud d'élément de newelement . 🎜

5. Ajouter un nœud

🎜Nous pouvons utiliser la méthode appendChild pour ajouter un nœud à la liste des nœuds enfants d'un autre nœud : 🎜rrreee🎜Ici, nous ajoutons le newelement est ajouté à la liste des nœuds enfants de element1. 🎜

6. Supprimer le nœud

🎜Nous pouvons utiliser la méthode removeChild pour supprimer un nœud de la liste des nœuds enfants de son nœud parent : 🎜rrreee🎜Ici, nous allons subelement2 code> est supprimé de la liste des nœuds enfants de son nœud parent <code>element1. 🎜🎜Exemple de code complet : 🎜rrreee🎜Il convient de noter qu'après avoir modifié le nœud dans le XML, vous devez utiliser l'attribut outerHTML pour générer la chaîne XML complète. L'exemple de code ci-dessus affichera le contenu XML modifié : 🎜rrreee🎜Conclusion🎜🎜En utilisant le DOM de JavaScript pour modifier XML, nous pouvons facilement ajouter, supprimer et modifier des éléments et des attributs. Il convient de noter que la structure de XML est relativement flexible et peut être imbriquée à plusieurs niveaux. Ainsi, lors de la modification de XML, les opérations sur les nœuds doivent être effectuées en fonction de la situation spécifique. En apprenant les opérations de base de modification du DOM en XML présentées dans cet article, je pense que les lecteurs peuvent utiliser JavaScript de manière flexible pour modifier XML et améliorer l'efficacité du développement. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!