如何在HTML页面中提取XML节点？获取食品名称的实现方法

嘿，我来帮你搞定这个XML提取食品名称的需求！你已经写了XMLHttpRequest的开头，接下来只需要补全请求逻辑并在回调里解析XML就行，下面给你两种常见场景的实现：

场景1：从XML文件加载数据 #

如果你的XML内容是存放在单独的文件（比如food.xml）里，完整代码可以这么写：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  // 确保请求成功完成
  if (this.readyState == 4 && this.status == 200) {
    myFunction(this.responseXML);
  }
};
// 打开请求，替换成你的XML文件实际路径
xhttp.open("GET", "food.xml", true);
xhttp.send();

function myFunction(xml) {
  // 方法1：用getElementsByTagName提取
  var nameElement = xml.getElementsByTagName("name")[0];
  if (nameElement) {
    // textContent获取元素内的文本，trim()去掉多余空格换行
    var foodName = nameElement.textContent.trim();
    console.log("提取到的食品名称：", foodName); // 输出 French Toast
  }

  // 方法2：用querySelector更简洁（推荐）
  var foodName = xml.querySelector("food > name").textContent.trim();
  console.log("提取到的食品名称：", foodName);
}

场景2：直接处理XML字符串 #

如果你的XML是直接写在代码里的字符串，不用发请求，直接用DOMParser解析就行：

// 你的XML字符串
var xmlString = `<food> 
  <name>French Toast</name> 
  <price>$4.50</price> 
  <description> Thick slices made from our homemade sourdough bread </description> 
  <calories>600</calories> 
</food>`;

// 解析XML字符串
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");

// 提取名称
var foodName = xmlDoc.querySelector("name").textContent.trim();
console.log("提取到的食品名称：", foodName); // 输出 French Toast

额外提示 #

• 如果XML里有多个<food>元素，你可以用循环遍历处理：

var foodList = xmlDoc.getElementsByTagName("food");
for (let item of foodList) {
  var name = item.querySelector("name").textContent.trim();
  console.log(`食品名称：${name}`);
}

• 记得加判断避免元素不存在导致报错，比如用if (nameElement)检查后再取值。

内容的提问来源于stack exchange，提问作者AleX6Ndru