dom mengubah suai javascript xml

DOM Mengubah suai XML (JavaScript)

DOM (Document Object Model) ialah teras JavaScript dan cara standard untuk memanipulasi XML. XML (Extensible Markup Language) ialah format yang biasa digunakan untuk menyimpan dan menukar data dan merupakan asas HTML. Dalam bidang pembangunan bahagian hadapan, kita selalunya perlu menggunakan JavaScript untuk memanipulasi XML, seperti menghantar permintaan XML ke pelayan atau menerima respons dalam format XML dalam pembangunan AJAX. Artikel ini akan menumpukan pada cara menggunakan DOM JavaScript untuk mengubah suai XML.

Pengenalan kepada struktur XML

Sebelum mempelajari cara mengubah suai XML dengan DOM, kita perlu terlebih dahulu memahami struktur asas XML. XML ialah teks dengan teg sebagai unit tatabahasa asas Struktur asas XML adalah seperti berikut:

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

Antaranya, dokumen XML mesti bermula dengan pengisytiharan b5f4b4903f55a747b1eeb49700e805ed dan elemen peringkat atas (. unsur akar) dipanggil root , unsur lain dipanggil element. Setiap elemen boleh mempunyai satu atau lebih atribut (seperti attribute1), yang memberikan maklumat deskriptif tentang elemen tersebut. Elemen juga boleh mengandungi elemen lain, dan sarang elemen ini dipanggil hierarki elemen.

Operasi asas pengubahsuaian DOM XML

DOM JavaScript boleh menghuraikan XML dan menukarnya menjadi pepohon nod, membolehkan kami menggunakan JavaScript untuk menulis kod untuk mengubah suai pepohon nod ini.

1. Parse XML

Biar xmlstr menjadi rentetan XML, kita boleh menggunakan DOMParser JavaScript untuk menghuraikannya:

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

Selepas penghuraian selesai, kita boleh Ubah suai yang dihuraikan xmlDoc.

2. Dapatkan nilai elemen

Untuk kandungan elemen dalam XML, kita boleh mendapatkan nilainya melalui atribut nodeValue:

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

Di sini kami menggunakan getElementsByTagName untuk mendapatkan nama Untuk nod elemen element1, childNodes[0] mendapat nod teksnya dan akhirnya menggunakan nodeValue untuk mendapatkan nilainya.

3. Dapatkan dan tetapkan atribut

Untuk atribut elemen dalam XML, kita boleh menggunakan kaedah getAttribute dan setAttribute untuk mendapatkan dan menetapkan nilai atribut:

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

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

Di sini kita menggunakan getAttribute untuk mendapatkan nilai atribut attribute1 bernama element1, dan kemudian menggunakan setAttribute untuk menetapkan nilai baharu attribute1 kepada newvalue. Perlu diingatkan bahawa apabila menetapkan atribut, anda perlu menentukan nod elemen yang dimiliki oleh atribut dan nama atribut.

4. Cipta nod elemen

Kita boleh menggunakan kaedah createElement untuk mencipta nod elemen baharu dalam dokumen XML:

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

Di sini kami mencipta elemen bernama newelement nod elemen baharu.

5. Tambah nod

Kita boleh menggunakan kaedah appendChild untuk menambah nod pada senarai nod anak nod lain:

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

Di sini kami akan mencipta newelement ditambahkan pada senarai nod anak element1.

6. Padam Nod

Kita boleh menggunakan kaedah removeChild untuk memadamkan nod daripada senarai nod anak nod induknya:

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

Di sini kita akan subelement2 daripada nod induk element1 dipadamkan daripada senarai nod anak.

Kod sampel penuh:

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

Perlu diambil perhatian bahawa selepas mengubah suai nod dalam XML, anda perlu menggunakan atribut outerHTML untuk mengeluarkan rentetan XML yang lengkap. Kod contoh di atas akan mengeluarkan kandungan XML yang diubah suai:

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

Kesimpulan

Dengan menggunakan DOM JavaScript untuk mengubah suai XML, kami boleh menambah, memadam dan mengubah suai elemen dan atribut dengan mudah. Perlu diingatkan bahawa struktur XML adalah agak fleksibel dan boleh bersarang pada pelbagai peringkat, jadi apabila mengubah suai XML, operasi nod perlu dilakukan mengikut situasi tertentu. Dengan mempelajari operasi asas pengubahsuaian DOM kepada XML yang diperkenalkan dalam artikel ini, saya percaya pembaca boleh menggunakan JavaScript secara fleksibel untuk mengubah suai XML dan meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci dom mengubah suai javascript xml. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!