[JS / ECMAScript] DOMParser에 대하여 알아보자.

얼마전 팀원들끼리 스프린트로 DOM visualizer를 하기로 하였는데, 나는 이 주제를 2주 안에 구현하는데 실패하였다...(진짜로 시간이 없었다. 진짜로...)

 

이에 대한 참회의 의미로 DOM에 관련된 글을 작성하기로 하였고, 나는 DOM 관련 주제로 DOMParser API에 대하여 간단하게 설명하고자 한다. 가보자 가보자!

 

DOMParser에 대하여 알아보자.

1. DOMParser API

DOMParser API는 HTML 혹은 XML 소스 코드를 DOM으로 분석하고 파싱할 수 있는 API의 묶음이다. 다른 말로, DOMParser를 이용하면 문자열 꼴로 이루어진 XML, HTML 소스코드를 DOM 구조로 변환할 수 있다는 이야기이다. 반대로 DOM tree를 XML이나 HTML로 바꾸려면 XMLSerializer를 활용하면 된다!

 

DOMParser는 생성자를 활용하여 DOMParser 객체를 생성하고, 메소드로는 parseFromString() 단 하나 존재한다.

 

2.  parseFromString() 

parseFromString 메서드는 두 가지 인자를 받는다. 첫 번째 인자를 String 타입으로 파싱할 문자열을 넣어주면 되고, 두 번째는 String 타입의 document 종류를 입력하여주면 된다. 더 구체적으로 하면 다음과 같이 설명할 수 있다.

 

2-1. string

파싱할 문자열을 넣는 인자. HTML, xml, xhtml & xml, svg document 형태가 들어가면 된다.

 

2-2 mimeType

파싱할 문자열이 HTML 형태인지 XML 형태인지 지정해주는 인자. 다음과 같은 값이 매개변수로 주어져야 한다.

• text/html
• text/xml
• application/xml
• application/xhtml+xml
• image/svg+xml

첫 번째 text/html의 경우 HTML 파서를 호출하고, 메서드에 대한 반환값으로 HTMLDocument을 반환한다. 다른 값이 매개변수로 주어질 경우 XML 파서를 호출하고, 메서드에 대한 반환값으로 XMLDocument을 반환한다. 

 

다음과 같이 DOMParser 예제코드를 작성할 수 있다.

DOMparser 사용 예시

 

만약 XML 파서가 형식에 맞지 않는 XML 문자열을 만난다면, parseFromString을 통해 반환된 XMLDocument는 parsing error 메시지를 띄우는 노드 <parsererror>를 포함한다.

 

DOMParser 에러 예시

DOMParser API를 사용할 수 있는지에 대한 것은 이 링크에서 확인할 수 있다. 이외에도 여러 기능들을 추가한 npm 라이브러리가 많으니 니 요구 조건에 맞춰서 각자가 알맞은 API를 사용하면 될 듯 하다.