it79.egloos.com

Enjoy 프로그래밍

포토로그 마이가든

프로필

Java, Oracle, Javascript, XML, HTML, CSS 등의 웹프로그래밍을 학습하는 공간입니다.by 주상전하

카테고리

메뉴릿

라이프로그

[자바스크립트] XML DOM 처리(이미지 정보를 이미지로 표현하기) Javascript

※ File명 : domTest02.html -  - carList.xml 파일을 웹브라우저에 출력

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
        <title>Insert title here</title>
        <script type="text/javascript">
            //이벤트 등록 방법1
            //window 객체에서 load 이벤트가 발생하면 main 함수 호출 예정
            //객체.이벤트핸들러 = 함수명;
            window.onload = main;
           
/-             //이벤트 등록 방법2
            //해야 할 일이 여러가지일 때 주로 사용.
            window.onload = function()
            {
                main();
                //...
            }; *-

            function main()
            {
                //IE 전용
                var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.load("carList.xml");
               
                var rootNode = xmlDoc.documentElement;
                 var vNodes = rootNode.getElementsByTagName("VEHICLE");
                
                var str = "<table><tr><td>MAKE</td><td>MODEL</td><td>PICTURE</td><td>PRICE</td></tr>";
               
                for(var i=0; i<vNodes.length; i++)
                {
                    str += "<tr>";
                    str += "<td>" + vNodes[i].getElementsByTagName("MAKE")[0].text + "</td>";
                    str += "<td>" + vNodes[i].getElementsByTagName("MODEL")[0].text +  "</td>";
                    str += "<td>"
                                + "<img src=cars_list_img/" + vNodes[i].getElementsByTagName("PICTURE")[0].text + " alt='' width='100' height='100'>"
                                + "</td>";
                               
                    str += "<td>" + vNodes[i].getElementsByTagName("PRICE")[0].text +"</td></tr>";
                }
               
                document.getElementById("result").innerHTML = str;
             }
           
        </script>
   
    </head>
   
    <body>
        <div id="result">
           
        </div>
    </body>
</html>


※ File명 :carList.xml

<?xml version="1.0" encoding="UTF-8"?>

<VEHICLES>
    <LAST_INVENTORY_NUMBER>11</LAST_INVENTORY_NUMBER>
    <VEHICLE>
        <INVENTORY_NUMBER>1</INVENTORY_NUMBER>
        <MAKE>Dodge</MAKE>
        <MODEL>Durango</MODEL>
        <YEAR>1998</YEAR>
        <PICTURE>DodgeDurango.jpg</PICTURE>
        <STYLE>Sport Utility</STYLE>
        <DOORS>4</DOORS>
        <PRICE>18000</PRICE>
        <MILEAGE>32000</MILEAGE>
        <OPTIONS>
            <Power_Locks>Yes</Power_Locks>
            <Power_Window>Yes</Power_Window>
            <Stereo>Radio/Cassette/CD</Stereo>
            <Air_Conditioning>Yes</Air_Conditioning>
            <Automatic>Yes</Automatic>
            <Four_Wheel_Drive>Full/Partial</Four_Wheel_Drive>
            <Note>Very clean</Note>
        </OPTIONS>
        <OWNER>
            <NAME>Douglas Briggs </NAME>
            <EMAIL>DBriggs@aDomain.Com</EMAIL>
            <PHONE>781 781 7811</PHONE>
        </OWNER>
    </VEHICLE>
    <VEHICLE>
        <INVENTORY_NUMBER>2</INVENTORY_NUMBER>
        <MAKE>Honda</MAKE>
        <MODEL>Civic</MODEL>
        <YEAR>1997</YEAR>
        <PICTURE>HondaCivic.jpg</PICTURE>
        <PRICE_YEN>20000000</PRICE_YEN>
        <STYLE>Sedan</STYLE>
        <DOORS>4</DOORS>
        <PRICE>8000</PRICE>
        <MILEAGE>56000</MILEAGE>
        <OPTIONS>
            <Power_Locks>Yes</Power_Locks>
            <Power_Window>Yes</Power_Window>
            <Stereo>Radio/Cassette</Stereo>
            <Automatic>Yes</Automatic>
            <Note>Like New</Note>
        </OPTIONS>
        <OWNER>
            <NAME>Israel Hodgson </NAME>
            <EMAIL>IHodgson@aDomain.Com</EMAIL>
            <PHONE>781 781 782</PHONE>
        </OWNER>
    </VEHICLE>
    <VEHICLE>
        <INVENTORY_NUMBER>3</INVENTORY_NUMBER>
        <MAKE>Dodge</MAKE>
        <MODEL>Neon</MODEL>
        <YEAR>1996</YEAR>
        <PICTURE>DodgeNeon.jpg</PICTURE>
        <STYLE>Sedan</STYLE>
        <DOORS>4</DOORS>
        <PRICE>7000</PRICE>
        <MILEAGE>55000</MILEAGE>
        <OPTIONS>
            <Stereo>Radio/Cassette</Stereo>
            <Automatic>Yes</Automatic>
            <Note>Need minor body works</Note>
        </OPTIONS>
        <OWNER>
            <NAME>Arthur Shin </NAME>
            <EMAIL>IHodgson@aDomain.Com</EMAIL>
            <PHONE>781 781 782</PHONE>
        </OWNER>
    </VEHICLE>
    <VEHICLE>
        <INVENTORY_NUMBER>4</INVENTORY_NUMBER>
        <MAKE>Ferrari</MAKE>
        <MODEL>F355</MODEL>
        <YEAR>1995</YEAR>
        <PICTURE>FerrariF355.jpg</PICTURE>
        <STYLE>Sport</STYLE>
        <DOORS>2</DOORS>
        <PRICE>45000</PRICE>
        <MILEAGE>63000</MILEAGE>
        <OPTIONS>
            <Power_Locks>Yes</Power_Locks>
            <Power_Window>Yes</Power_Window>
            <Stereo>Radio/Cassette/CD</Stereo>
            <Air_Conditioning>Yes</Air_Conditioning>
            <Note>Luxury car</Note>
        </OPTIONS>
        <OWNER>
            <NAME>Jungchul Frye</NAME>
            <EMAIL>JFrye@aDomain.Com</EMAIL>
            <PHONE>781 781 782</PHONE>
        </OWNER>
    </VEHICLE>
    <VEHICLE>
        <INVENTORY_NUMBER>5</INVENTORY_NUMBER>
        <MAKE>BMW</MAKE>
        <MODEL>3 Series</MODEL>
        <YEAR>1998</YEAR>
        <PICTURE>BMWSeries3.jpg</PICTURE>
        <STYLE>Sedan</STYLE>
        <DOORS>4</DOORS>
        <PRICE>40000</PRICE>
        <MILEAGE>12000</MILEAGE>
        <OPTIONS>
            <Power_Locks>Yes</Power_Locks>
            <Power_Window>Yes</Power_Window>
            <Interiors>Leather</Interiors>
            <Stereo>Radio/Cassette/CD</Stereo>
            <Air_Conditioning>Yes</Air_Conditioning>
            <Note>Pre-owned</Note>
        </OPTIONS>
        <OWNER>
            <NAME>Bill Pease</NAME>
            <EMAIL>BPease@aDomain.Com</EMAIL>
            <PHONE>781 781 782</PHONE>
        </OWNER>
    </VEHICLE>
    <VEHICLE>
        <INVENTORY_NUMBER>6</INVENTORY_NUMBER>
        <MAKE>BMW</MAKE>
        <MODEL>Z3</MODEL>
        <YEAR>1998</YEAR>
        <PICTURE>BMWZ3.jpg</PICTURE>
        <STYLE>Convertible</STYLE>
        <DOORS>2</DOORS>
        <PRICE>33000</PRICE>
        <MILEAGE>24000</MILEAGE>
        <OPTIONS>
            <Cover_Material>Plastic</Cover_Material>
            <Power_Locks>Yes</Power_Locks>
            <Power_Window>Yes</Power_Window>
            <Alarm>Yes</Alarm>
            <Interiors>Fabric</Interiors>
            <Stereo>Radio/Cassette/CD</Stereo>
            <Air_Conditioning>Yes</Air_Conditioning>
            <Note>Pre-owned, very clean</Note>
        </OPTIONS>
        <OWNER>
            <NAME>Scott Tufo</NAME>
            <EMAIL>STufo@aDomain.Com</EMAIL>
            <PHONE>781 781 783</PHONE>
        </OWNER>
    </VEHICLE>
    <VEHICLE>
        <INVENTORY_NUMBER>7</INVENTORY_NUMBER>
        <MAKE>Dodge</MAKE>
        <MODEL>RAM</MODEL>
        <YEAR>1997</YEAR>
        <PICTURE>DodgeRAM1500.jpg</PICTURE>
        <STYLE>Truck</STYLE>
        <DOORS>2</DOORS>
        <PRICE>22000</PRICE>
        <MILEAGE>45000</MILEAGE>
        <OPTIONS>
            <Stereo>Radio</Stereo>
            <Max_Load>1500</Max_Load>
            <Note>Heavy duty Vehicle</Note>
        </OPTIONS>
        <OWNER>
            <NAME>Dealer</NAME>
        </OWNER>
    </VEHICLE>
    <VEHICLE>
        <INVENTORY_NUMBER>8</INVENTORY_NUMBER>
        <MAKE>Honda</MAKE>
        <MODEL>Accord</MODEL>
        <YEAR>1995</YEAR>
        <PICTURE>HondaAccord.jpg</PICTURE>
        <PRICE_YEN>25000000</PRICE_YEN>
        <STYLE>Sedan</STYLE>
        <DOORS>4</DOORS>
        <PRICE>8500</PRICE>
        <MILEAGE>145000</MILEAGE>
        <OPTIONS>
            <Power_Locks>Yes</Power_Locks>
            <Stereo>Radio/Cassette</Stereo>
            <Automatic>Yes</Automatic>
        </OPTIONS>
        <OWNER>
            <NAME>Bob Johnson</NAME>
            <PHONE>781 781 783</PHONE>
        </OWNER>
    </VEHICLE>
    <VEHICLE>
        <INVENTORY_NUMBER>9</INVENTORY_NUMBER>
        <MAKE>Dodge</MAKE>
        <MODEL>RAM 2500</MODEL>
        <YEAR>1996</YEAR>
        <PICTURE>DodgeRAM2500.jpg</PICTURE>
        <STYLE>Truck</STYLE>
        <DOORS>2</DOORS>
        <PRICE>25000</PRICE>
        <MILEAGE>23000</MILEAGE>
        <OPTIONS>
            <Stereo>Radio/Cassette</Stereo>
            <Max_Load>2500</Max_Load>
            <Note>Heavy duty truck</Note>
        </OPTIONS>
        <OWNER>
            <NAME>Pia Kinnear</NAME>
            <EMAIL>PKinnearo@aDomain.Com</EMAIL>
            <PHONE>781 781 784</PHONE>
        </OWNER>
    </VEHICLE>
    <VEHICLE>
        <INVENTORY_NUMBER>10</INVENTORY_NUMBER>
        <MAKE>Ford</MAKE>
        <MODEL>Explorer</MODEL>
        <YEAR>1996</YEAR>
        <PICTURE>FordExplorer.jpg</PICTURE>
        <STYLE>Sport Utility</STYLE>
        <DOORS>4</DOORS>
        <PRICE>18000</PRICE>
        <MILEAGE>105000</MILEAGE>
        <OPTIONS>
            <Power_Locks>Yes</Power_Locks>
            <Stereo>Radio/Cassette</Stereo>
            <Automatic>Yes</Automatic>
            <Interiors>Fabric</Interiors>
            <Air_Conditioning>Yes</Air_Conditioning>
            <Note>Pre-owned, very clean</Note>
        </OPTIONS>
        <OWNER>
            <NAME>Shawn Denoncour</NAME>
            <EMAIL>SDenoncour@aDomain.Com</EMAIL>
            <PHONE>781 781 785</PHONE>
        </OWNER>
    </VEHICLE>
</VEHICLES>


-----------------------------------------------------------------------------------------------------------------

<결과 화면>
태그 : , ,

포스트 메타 정보

자동 검색 관련글

퍼블리싱 및 추천

같은 카테고리의 글

트랙백(0) 덧글(0)

트랙백

이 글과 관련된 글 쓰기 (트랙백 보내기)
TrackbackURL : http://it79.egloos.com/tb/92268 [도움말]

덧글

댓글 입력 영역
it79.egloos.com is powered by Egloos. Subscribe to RSS Skin design by egloos.