[JavaScript] Node 제거하기

↓↓↓       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 root = xmlDoc.documentElement;
    var currNode = root.childNodes[1];
    removedNode = currNode.removeChild(currNode.childNodes[1]);
    document.getElementById("demo").innerHTML = "Removed node: " + removedNode.nodeName;
}

↑↑↑       h.html      ↑↑↑

 

 

root = xmlDoc.documentElement;

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

 

 

currNode = root.childNodes[1];

→  Root node의 첫 번째 child node의 또 첫 번째 child node를 반환해줍니다.

→  childNodes[0]은 주석 처리된 부분이기 때문에 1을 반환해줍니다.

 

 

removedNode = currNode.removeChild(currNode.childNodes[1]);

→  removeChild는 child node를 지우는 함수입니다.

→  함수의 parameter로 현재 node의 childNode를 반환하면서 제거해줍니다.

 

 

→  노드를 제거하고 제거된 tag의 name을 출력해줍니다.

 

 

var xmlDoc = xml.responseXML;
var root = xmlDoc.documentElement;
var currNode = root.childNodes[1];
removedNode = currNode.removeChild(currNode.childNodes[1]);
document.getElementById("demo").innerHTML = "Removed node: " + removedNode.nodeName;

◡̈