从 HTML 操作 XML 上的文本节点

编程新手，所以这可能是大多数人的简单解决方法。话虽如此，我在通过 HTML 代码操作 XML 节点时遇到了麻烦，以下是我试图完成的任务。

将"比利时华夫饼"替换为"英式松饼"，并用新值更改价格、描述和卡路里。
现在，通过实施删除节点和添加新节点方法，将每个食品的价格降低 5%。

我的函数只是没有操作从XML文件加载的现有数据，我不太确定如何进行第二步。

XML 文件

<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
<food>
    <name id="waffle">Belgian Waffles</name>
    <price>$5.95</price>
    <description>
   Two of our famous Belgian Waffles with plenty of real maple syrup
   </description>
    <calories>650</calories>
</food>
<food>
    <name>Strawberry Belgian Waffles</name>
    <price>$7.95</price>
    <description>
    Light Belgian waffles covered with strawberries and whipped cream
    </description>
    <calories>900</calories>
</food>
<food>
    <name>Berry-Berry Belgian Waffles</name>
    <price>$8.95</price>
    <description>
    Belgian waffles covered with assorted fresh berries and whipped cream
    </description>
    <calories>900</calories>
</food>
<food>
    <name>French Toast</name>
    <price>$4.50</price>
    <description>
    Thick slices made from our homemade sourdough bread
    </description>
    <calories>600</calories>
</food>
<food>
    <name>Homestyle Breakfast</name>
    <price>$6.95</price>
    <description>
    Two eggs, bacon or sausage, toast, and our ever-popular hash browns
    </description>
    <calories>950</calories>
</food>
</breakfast_menu>

网页文件

<!DOCTYPE html>
<html>
<body>
	<div id="one">
<p id="demo"></p>
	</div>
<form>
	<input type="button" onclick="myFunction()" value="Change Item">
</form>
<script>
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","breakfast.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<div id='one'>");
var x=xmlDoc.getElementsByTagName("food");
for (i=0;i<x.length;i++)
  { 
  document.write("<p>");
  document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
  document.write("</p><p>");
  document.write("Price: ", x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
  document.write("</p><p>");
  document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
  document.write("</p><p>");
  document.write("Calories: ", x[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue);
  document.write("</p></br><p id='two'>");
  } 
document.write("</div>");
  
function replace(xml) {
	var textnode = document.createTextNode("English Muffin");
	var x=xmlDoc.getElementsById("waffle").childNodes[0];
	item.replaceChild(textnode, item.childNodes[0]).innerHTML;
}
function two(xml) { 
	xmlDoc.getElementsById("waffle")[0].childNodes[0].nodeValue = "English Muffin";
}
function myFunction(xml) {
    var x, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsById("waffle")[0].childNodes[0];
    txt = x.nodeValue + "<br>";
    x.nodeValue="English Muffin";
    txt += x.nodeValue;
    document.getElementById("demo").innerHTML = txt
}
</script>
</body>
</html>

这样的事情会让你更接近，你需要向 xmlhttprequest 添加一个事件侦听器来捕获加载事件。触发加载事件后，可以对要执行的 XML 进行处理。

<!DOCTYPE html>
<html>
<body>
	<div id="one">
<p id="demo"></p>
	</div>
<form>
	<input type="button" onclick="myFunction()" value="Change Item">
</form>
<script>
if (window.XMLHttpRequest)
{
  xmlhttp=new XMLHttpRequest();
}else{
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
  xmlhttp.open("GET","breakfast.xml",false);
  // this only sends out the request, it does not get populated with a response
  xmlhttp.send();
  // to get the file contents you need to add event listener for load event
  xmlhttp.addEventListener("load", function(evt){
   
    xmlDoc=xmlhttp.responseXML;
    document.write("<div id='one'>");
    var x=xmlDoc.getElementsByTagName("food");
    for (i=0;i<x.length;i++)
    { 
      document.write("<p>");
      document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
      document.write("</p><p>");
      document.write("Price: ", x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
      document.write("</p><p>");
      document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
      document.write("</p><p>");
      document.write("Calories: ", x[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue);
      document.write("</p></br><p id='two'>");
    } 
      document.write("</div>");
});
function replace(xml) {
	var textnode = document.createTextNode("English Muffin");
	var x=xmlDoc.getElementsById("waffle").childNodes[0];
	item.replaceChild(textnode, item.childNodes[0]).innerHTML;
}
function two(xml) { 
	xmlDoc.getElementsById("waffle")[0].childNodes[0].nodeValue = "English Muffin";
}
function myFunction(xml) {
    var x, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsById("waffle")[0].childNodes[0];
    txt = x.nodeValue + "<br>";
    x.nodeValue="English Muffin";
    txt += x.nodeValue;
    document.getElementById("demo").innerHTML = txt
}
</script>
</body>
</html>

您没有正确配置 XMLHttpRequest 对象。您尚未设置"成功"回调函数，相反，在发送请求后，您的代码会立即尝试访问结果，而无需等待请求处理，因此此时没有返回值。

XHR 请求是异步的，这意味着我们不知道它们需要多长时间才能返回。我们必须设置一个可以在发生这种情况时调用的回调。

设置 XHR 的一般方法如下：

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","breakfast.xml",false);
// Set up callback functions to handle the outcomes of the request
xmlhttp.addEventListener("load", transferComplete);
xmlhttp.addEventListener("error", transferFailed);
// Only after the XHR has been completely configured can you send the request    
xmlhttp.send();
// This function will be called when there is a successful
// response from the request.
function transferComplete(evt){
   // Only when this function is called (automatically by the XHR)
   // is it safe to access: xmlhttp.responseXML and only from within
   // this function can you call it (unless you assign it to a higher
   // scoped variable, but that wouldn't be a good idea because outside
   // of this function, you can't be sure that the assignment has taken place.
   // Also, instead of multiple document.write() statements, just
   // populate an existing DOM element with the contents of
   // the response.
}
// This function will be called when there is an error
function transferFailed(evt){
  console.log("Something went wrong!");
}

有关设置 XMLHttpRequest 的更多详细信息，请参阅此处。

笔记：

所有浏览器都本机支持 XMLHttpRequest 对象很多年了。除非您仍支持 IE 8，否则您可以删除整个 if 语句并仅使用：xmlhttp=new XMLHttpRequest(); .
document.write()仅在将动态内容写入新内容时使用窗。相反，只需修改现有 DOM 元素的内容。

相关内容

最新更新

热门标签：