Question

我是这个论坛的新手，我想问一个问题，如何从xml文件中创建图像以使用DOM加载自身？这是我的代码，我不知道它的错误。有人可以帮我调试吗？谢谢:)

<html>
<head>
<script language="javascript" type="text/javascript">
    function showImage(){
        var xmlimg = document.getElementById("myphoto");
        var photo=xmlimg.getElementsByTagName("photo");


        var showImg =document.createElement("div");
        showImg.createElement("IMG");
        showImg.setAttribute("src","sunset.jpg");

        var getImage=document.createElement("div");
        getImage.setAttribute("class","fileko");

        showImg.appendChild(getImage);

        var viewimage= document.createTextNode(photo.getElementsByTagName("fileko")[0].firstChild.data);
        getImage.appendChild(viewimage);

        getImage.appendChild(viewimage);

        var getAttr=document.createElement("div");
        getAttr.getAttribute("stolen");
        showImg.appendChild(getAttr);


       document.getElementsByTagName("body")[0].appendChild(showImg); 

    }
</script>

    </head>
    <body onload="showimage()" style="display:none">
    <xml id="myphoto" >
    <photo kind="stolen">
    <fileko>sunset.jpg</fileko>
    <desc>Sunrise</desc>
    </photo>
    </xml>
    </body>
</html>

Answer 1

您可以对xml文件执行Ajax请求并获取所需的数据。然后基于检索到的数据创建具有适当属性的Image元素，然后将该image元素附加到DOM中。

Answer 2

是的，可以按照以下代码进行操作，您将轻松获得所需的操作。这是我从xml文件中获取数据的代码

<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

我的xml看起来像这样 xml file

是否可以使用DOM显示xml文件中的图像？

2 个答案: