如何使用 DOM 解析器解析 JavaScript 中的 XML 資料？-js教程-PHP中文網

如何使用 DOM 解析器解析 JavaScript 中的 XML 資料？

Patricia Arquette

發布： 2024-12-05 11:59:15

原創

690 人瀏覽過

How to Parse XML Data in JavaScript Using the DOM Parser?

使用 JavaScript 解析 XML

使用 JavaScript 解析 XML 涉及將 XML 資料轉換為更易於管理的格式進行處理。要在沒有外部框架的情況下解析 XML，我們可以利用大多數現代瀏覽器中提供的文件物件模型 (DOM)。

考慮儲存在字串變數中的以下 XML：

<address>
  <street>Roble Ave</street>
  <streetNumber>649</streetNumber>
  <lat>37.45127</lat>
  <lng>-122.18032</lng>
  <distance>0.04</distance>
  <postalcode>94025</postalcode>
  <placename>Menlo Park</placename>
  <adminCode2>081</adminCode2>
  <adminName2>San Mateo</adminName2>
  <adminCode1>CA</adminCode1>
  <adminName1>California</adminName1>
  <countryCode>US</countryCode>
</address>

登入後複製

解析這個 XML 使用 DOM，我們可以按照以下步驟操作：

if (window.DOMParser) {
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(txt, "text/xml");
} else { // Internet Explorer
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.loadXML(txt);
}

登入後複製

解析 XML之後，我們可以從節點：

// Gets house address number
console.log(xmlDoc.getElementsByTagName("streetNumber")[0].childNodes[0].nodeValue);

// Gets Street name
console.log(xmlDoc.getElementsByTagName("street")[0].childNodes[0].nodeValue);

// Gets Postal Code
console.log(xmlDoc.getElementsByTagName("postalcode")[0].childNodes[0].nodeValue);

登入後複製

此外，如果XML包含命名空間前綴，則請求命名空間時不應包含前綴：

// XML with Namespace prefixes
txt = `

  Roble Ave
  649
  94025
`;

// Parse with Namespace prefixes
if (window.DOMParser) {
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(txt, "text/xml");
} else { // Internet Explorer
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.loadXML(txt);
}

// Gets "streetNumber" (note there is no prefix of "sn")
console.log(xmlDoc.getElementsByTagName("streetNumber")[0].childNodes[0].nodeValue);

// Gets Street name
console.log(xmlDoc.getElementsByTagName("street")[0].childNodes[0].nodeValue);

// Gets Postal Code
console.log(xmlDoc.getElementsByTagName("postalcode")[0].childNodes[0].nodeValue);

登入後複製

以上是如何使用 DOM 解析器解析 JavaScript 中的 XML 資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！