YYYEJI

[JavaScript] 문자열 합치기 본문

HTML(or XML) & CSS & JavaScript

[JavaScript] 문자열 합치기

YEJI ⍢ 2022. 11. 5. 00:07
728x90

↓↓↓       DOM 개념 알아보기      ↓↓↓

https://yyyeji.tistory.com/160

 

[JavaScript] DOM이란?

DOM 이란? Document object Model의 줄임말로써, XML 문서의 메모리 내 표현이고 DOM을 사용하여 XML 문서를 프로그래밍 방식으로 element를 생성, 조회, 갱신, 삭제할 수 있습니다. Method 생성 - document.createElem

yyyeji.tistory.com

 

문자열 합치기

문자열을 합칠 때 일반 코딩과 비슷하게 하시면 됩니다.

string 변수를 생성하고 "+" 또는 "+="를 이용해서 문자열을 합칩니다.

 

 

W3School에 나오는 Books.xml을 살펴보겠습니다.

 

 

<bookstore>
    <book category="cooking">
      <title lang ="en"> Everyday Italian</title>
      <author>Giada De Laurentiis</author>
      <year>2005</year>
      <price>30.00</price>
    </book>
    
    <book category="children">
      <title lang = 'en'> Harry Potter </title>
      <author>J K.Rowling</author>
      <year>2005</year>
      <price>29.99</price>
    </book>

    <book category="web">
      <title lang = 'en'> XQuery Kick Start </title>
      <author>James McGovern</author>
      <author>Per Bothner</author>
      <author>Kurt Cagle</author>
      <author>James Linn</author>
      <year>2003</year>
      <price>49.99</price>
    </book>

    <book category="web" cover="paperback">
      <title lang = 'en'> Learning XML </title>
      <author>Erik T. Ray</author>
      <year>2003</year>
      <price>39.95</price>
    </book>
</bookstore>

↑↑↑       Books.xml      ↑↑↑

 

function myFunction(xml){
    var x, i, txt, xmlDoc;
    xmlDoc = xml.responseXML;
    txt="";
    
    x = xmlDoc.getElementsByTagName("title");
    for(i = 0; i<x.length; i++){
        txt += x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
}

↑↑↑       h.html      ↑↑↑

 

Function 부분인

①  txt="";

②  x = xmlDoc.getElementsByTageName("title");

③  txt += x[i].childNodes[0].nodeValue+"<br>";

살펴보겠습니다.

 

txt="";

→  빈 문자열 변수를 생성합니다.

 

 x = xmlDoc.getElementsByTageName("title");

→  x에 title node의 List가 반환됩니다.

 

 txt += x[i].childNodes[0].nodeValue+"<br>";

→  title node List의 index i 번째를 반환합니다.

 txt += x[i].childNodes[0].nodeValue+"<br>";

→  title node의 child node 0번째를 반환합니다.

 txt += x[i].childNodes[0].nodeValue+"<br>";

→  title node List의 index i번째의 값(value)를 반환합니다.

 txt += x[i].childNodes[0].nodeValue+"<br>";

→  줄바꿈을 합니다.

 

 

 앞서 생성해준 빈 문자열 변수인 txt에 문자열을 더해주고 있습니다.

 

 

txt="";
x = xmlDoc.getElementsByTagName("title");
for(i = 0; i<x.length; i++){
    txt += x[i].childNodes[0].nodeValue + "<br>";
}

◡̈