[개발자 면접준비] DOM 과 XML은 무엇인가 ?

 

XML은 데이터를 저장하고 전달할 목적으로 만들어졌으며 저장되는 구조를 기술하기 위한 언어이다.

XML은  EXtensible(확장 가능한) Markup Language의 약자로 수많은 응용 분야에서 데이터를 저장하고 전달하는 중요한 역할을 맡고 있다.

 

마크업이란?  문서의 형식 및 출력 방식과 같이 추가적인 정보를 넣을 수 있는데 이러한 일련의 문자들 혹은 기호들을 마크업이라 한다.

body font 같은 내용의 형식을 나타내어주는 태그가 마크업에 해당하고 이런 정보를 포함하는 문서를 마크업 문서라고 한다.

 

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

<programming_languages>

    <language>

        <name>HTML</name>

        <category>web</category>

        <developer>W3C</developer>

        <version status="working draft">5.1</version>

        <priority rating="1">high</priority>

    </language>

    <language>

        <name>CSS</name>

        <category>web</category>

        <developer>W3C</developer>

        <version status="stable">3.0</version>

        <priority rating="3">middle</priority>

    </language>

    <language>

        <name korean="자바">Java</name>

        <category>application</category>

        <developer>Oracle</developer>

        <version status="stable">8.91</version>

        <priority rating="2">high</priority>

    </language>

    <language>

        <name korean="파이썬">Python</name>

        <category>application</category>

        <developer>Python</developer>

        <version status="stable">3.52</version>

        <priority rating="4">middle</priority>

    </language>

</programming_languages>

 

XML 구조

XML 문서는 HTML 문서와 마찬가지로 트리(tree) 형태의 계층 구조를 가진다.

XML 트리는 하나뿐인 루트(root) 요소부터 시작하여, 각각의 자식(child) 요소에 차례대로 연결된다.

XML 트리 구조에 포함되는 모든 요소는 자신만의 자식(child) 요소를 가질 수 있다.

 

 

XML 트리

http://www.tcpschool.com/xml/xml_basic_structure

 

부모(parent) 요소는 여러 개의 자식(child) 요소를 가질 수 있다

자식(child) 요소는 단 하나의 부모(parent) 요소만을 가진다.

형제(sibling) 요소는 같은 트리 레벨(tree level)에 존재하는 요소를 가리킨다.

즉, 형제 요소란 같은 부모(parent) 요소를 가지는 자식 요소 간의 관계를 나타낸다

 

 

XML 문서 구조 

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

<shop city="서울" type="마트">

    <food>

        <name>귤</name>

        <sort>과일</sort>

        <cost>3000</cost>

    </food>

    <food>

        <name>상추</name>

        <sort>야채</sort>

        <cost>2000</cost>

    </food>

</shop>

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

xml 문서임을 명시해 줘야 한다.

위의 예제에서 루트 요소는 자식(child) 요소로 두 개의 <food> 요소를 가진다.

 

첫 번째 <food> 요소는 <name> 요소, <sort> 요소, <cost> 요소의 총 세 개의 자식 요소를 가진다

<food>

    <name>귤</name>

    <sort>과일</sort>

    <cost>3000</cost>

</food>

 

<food> 요소를 생성하고 XML 문서가 끝난다.

<food>

    <name>상추</name>

    <sort>야채</sort>

    <cost>2000</cost>

</food>

XML 문서에서 요소의 이름은 저장하고 있는 데이터의 내용을 명확히 알려준다.

요소의 이름만으로도 데이터의 내용을 짐작할 수 있다

 

노드란?

XML 문서 내의 모든 것은 노드(node)라고 불리는 계층적 단위에 정보를 담고 있다.

XML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할

 

노드 트리(node tree)

ML 문서의 정보는 노드 트리라고 불리는 계층적 구조에 저장된다.

노드 트리는 노드들의 집합으로, 노드 간의 관계를 나타낸다.

 

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

<programming_languages>

    <language>

        <name>CSS</name>

        <category>web</category>

        <developer>W3C</developer>

        <version status="stable">3.0</version>

        <priority rating="3">high</priority>

    </language>

</programming_languages>

 

XML 파일을 노드 트리로 표현한 그림

http://www.tcpschool.com/xml/xml_basic_structure

 

노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.

XML DOM을 이용하면 노드 트리에 포함된 모든 노드에 접근할 수 있다.

 

노드 간의 관계

노드 트리의 모든 노드들은 서로 계층적 관계를 맺고 있다.

 

http://www.tcpschool.com/xml/xml_basic_structure

노드 트리의 최상위에는 단 하나의 루트 노드(root node)만이 존재

 

노드로의 접근

XML DOM을 이용하면 노드 트리에 포함된 모든 노드에 접근

 

1. getElementsByTagName() 메서드를 이용하는 방법

2. 노드 트리를 연속적으로 탐색하여 접근하는 방법

3. 노드 간의 관계를 이용하여 접근하는 방법

 

노드 이름. getElementsByTagName("태그 이름")

 

노드 트리를 연속적으로 탐색하여 접근하는 방법

노드 트리 전체를 연속적으로 탐색하여 원하는 노드에 접근할 수도 있다.

xmlObj = xmlHttp.responseXML;                 // 요청한 데이터를 XML DOM 객체로 반환함.

nodeList = xmlObj.documentElement.childNodes; // XML 문서 노드의 자식 노드를 반환함.

result = "XML 문서 노드의 자식 요소 노드<br>";

for(idx = 0; idx < nodeList.length; idx++) {

    if(nodeList[idx].nodeType == 1) {         // 요소 노드만을 출력함.

        result += nodeList[idx].nodeName + "<br>";

    }

}

document.getElementById("text").innerHTML = result;

위와 같은 속성들을 이용하여 원하는 노드에 손쉽게 접근할 수 있다.

 

 

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

firstLang = xmlObj.getElementsByTagName("language")[0]; // 첫 번째 <language>요소를 반환함.

node = firstLang.firstChild;  // 첫 번째 <language>요소의 첫 번째 자식 노드를 반환함.

result = "language 요소의 모든 자식 요소 노드<br>";

for(idx = 0; idx < firstLang.childNodes.length; idx++) {

    if(node.nodeType == 1) {  // 요소 노드만을 출력함.

        result += node.nodeName + "<br>";

    }

    node = node.nextSibling;  // 현재 노드의 바로 다음 형제 노드를 반환함.

}

document.getElementById("text").innerHTML = result;

 

 

문서 객체 모델(DOM)이란?

 

XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공

 

http://www.tcpschool.com/xml/xml_basic_structure

 

DOM의 종류

W3C DOM 표준은 세 가지 모델로 구분된다.

1. Core DOM : 모든 문서 타입을 위한 DOM 모델

2. HTML DOM : HTML 문서를 위한 DOM 모델

3. XML DOM : XML 문서를 위한 DOM 모델

 

Document 객체란?

Document 객체는 웹 페이지 그 자체를 의미한다.

 

웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.

 

HTML 요소의 선택

HTML 요소를 선택하기 위해 제공되는 메서드는 다음과 같다.

메소드	설명
document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택함.
document.getElementById(아이디)	해당 아이디의 요소를 선택함.
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택함.
document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택함.

 

HTML 요소의 생성

 

새로운 HTML 요소를 생성하기 위해 제공되는 메소드는 다음과 같다.

메소드	설명
document.createElement(HTML요소)	지정된 HTML 요소를 생성함.
document.write(텍스트)	HTML 출력 스트림을 통해 텍스트를 출력함.

 

요약정리

DOM은 HTML 문서에 대한 인터페이스이다.

첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용된다.
DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있다.

• 항상 유효한 HTML 형식이다.
• 자바스크립트에 수정될 수 있는 동적 모델이어야 한다.
• 가상 요소를 포함하지 않는다. (Ex. ::after)
• 보이지 않는 요소를 포함한다. (Ex. display: none)

 

 

 

참고자료

 

https://developer.mozilla.org/ko/docs/Gecko_DOM_Reference/%EC%86%8C%EA%B0%9C

 

 

 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=no1rogue&logNo=30084306472 

마크업(MarkUp)...이란?

http://www.tcpschool.com/xml/intro

코딩교육 티씨피스쿨

http://www.tcpschool.com/xml/xml_basic_structure

코딩교육 티씨피스쿨

https://wit.nts-corp.com/2019/02/14/5522

DOM은 정확히 무엇일까? | WIT블로그