2017-09-01 59 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

相關問題