dom modify xml javascript

DOM Modifying XML (JavaScript)

DOM (Document Object Model) is the core of JavaScript and a standard way to manipulate XML. XML (Extensible Markup Language) is a format commonly used to store and exchange data and is the basis of HTML. In the field of front-end development, we often need to use JavaScript to manipulate XML, such as sending XML requests to the server or receiving responses in XML format in AJAX development. This article will focus on how to use JavaScript's DOM to modify XML.

Introduction to XML structure

Before learning DOM to modify XML, we need to first understand the basic structure of XML. XML is text with tags as the basic grammatical unit. The basic structure of an XML is as follows:

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

Among them, the XML document must start with the statement <?xml ... ?> , while the top-level element (root element) is called root, and other elements are called element. Each element can have one or more attributes (such as attribute1), and attributes are used to provide descriptive information about the element. Elements can also contain other elements, and this nesting of elements is called an element hierarchy.

Basic operations of DOM modifying XML

JavaScript's DOM can parse XML and convert it into a node tree, allowing us to use JavaScript to write code to modify this node tree.

1. Parse XML

Let xmlstr be an XML string. We can use JavaScript's DOMParser to parse it:

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

Parsing completed After that, we can modify the parsed xmlDoc.

2. Get the element value

For the element content in XML, we can get its value through the nodeValue attribute:

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

Here we usegetElementsByTagName Gets the element node named element1, childNodes[0] gets its text node, and finally uses nodeValue to get its value.

3. Get and set attributes

For element attributes in XML, we can use the getAttribute and setAttribute methods to get and set attribute values. :

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

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

Here we use getAttribute to get the attribute value of element1 named attribute1, and then use setAttribute to set it The new value of attribute1 is newvalue. It should be noted that when setting an attribute, you need to specify the element node to which the attribute belongs and the attribute name.

4. Create element node

We can use the createElement method to create a new element node in the XML document:

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

Here we create a A new element node named newelement.

5. Add node

We can use the appendChild method to add a node to the child node list of another node:

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

Here we Add the newly created newelement to the list of child nodes of element1.

6. Delete Node

We can use the removeChild method to delete a node from the child node list of its parent node:

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

Here we will subelement2 is removed from the list of child nodes of its parent node element1.

Complete sample code:

// 解析 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);

It should be noted that after modifying the node in the XML, you need to use the outerHTML attribute to output the complete XML string. The above example code will output the modified XML content:

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

Conclusion

By using JavaScript's DOM to modify XML, we can easily add, delete, and modify elements and attributes. . It should be noted that the structure of XML is relatively flexible and can be nested at multiple levels, so when modifying XML, node operations need to be performed according to the specific situation. By learning the basic operations of DOM modification to XML introduced in this article, I believe readers can flexibly use JavaScript to modify XML and improve development efficiency.

The above is the detailed content of dom modify xml javascript. For more information, please follow other related articles on the PHP Chinese website!