[JavaScript] Element의 value 값 바꾸기

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

https://yyyeji.tistory.com/160

[JavaScript] DOM이란?

Node의 값을 바꾸고 싶을 땐 어떻게 할까요?

 

예제로 바로 들어가겠습니다.

 

<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 xmlDoc = xml.responseXML;
    var x;
    x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
    document.getElementById("demo1").innerHTML = x.nodeValue;
    x.nodeValue = "Easy Cooking";
	x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
    document.getElementById("demo2").innerHTML = x.nodeValue;
}

↑↑↑       h.html      ↑↑↑

 

 

x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];

→  title이라는 이름을 가진 Tag의 첫 번째 node의

→  첫 번째 child node를 반환합니다.

 

→  현재 node 값을 출력해주고 노드의 값을 변경해줍니다.

 

x.nodeValue = "Easy Cooking";

→  node의 value를 바꿔줍니다.

 

→  변경된 node의 값도 출력해줍니다.

 

 

x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.getElementById("demo1").innerHTML = x.nodeValue;
x.nodeValue = "Easy Cooking";
x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.getElementById("demo2").innerHTML = x.nodeValue;

◡̈