2017-09-01 61 views
0

我是新来这个论坛,我想问一个问题,我怎样才能从一个XML文件的图像使用DOM加载自己?这里是我的代码,我不知道它有什么问题。任何人都可以帮我调试一下吗?谢谢:)是否可以使用DOM从xml文件显示图像?

<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> 
+1

嗨, Stack Overflow是不是一种编程服务。我们不会为你做这些事情,但是当你尝试过的东西不太合适时,引导你。我建议你看看这个页面的开局。如果你无法弄清楚,请回过头来让我们知道你所尝试过的。 https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML –

回答

0

您可以对xml文件执行Ajax请求并获取所需的数据。然后使用基于检索到的数据的正确属性创建一个Image元素,然后将该图像元素附加到DOM中。

1

是的,这是可能的只是按照下面的代码,你会很容易地得到你需要做的。这是我的代码是从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

相关问题