html string을 dom으로 간혹 만들어야 하는 경우가 있을 것이다.
예를 들면
1. ckEditor와 같이 게시판을 만들때, 에디터를 적용 해야 하는 경우, html을 검색을 하게 하는게 아니라, 해당 내용에 적혀 있는 텍스트만을 기준으로 해야 하기 때문에 html에서 태그를 제외한 내용을 따로 저장을 해둬야 하는 경우도 있다.
2. html string을 분석하여 특정 처리를 해야하는 경우도 있을 것이다. 예를 들면 검색후 매칭 되는 글자의 하이라이트 처리나, 해당 html 문자열이 단 하나의 부모만 있는지 등...
뭐 위의 내용 말고도 필요한 경우는 있을 것이다. 뭐 옛날에는 xml을 파싱 해야 했을 때도 있었지만...
innerHtml
function htmlStringToNodeList(htmlString) {
const tempNode = document.createElement('div')
tempNode.innerHTML = htmlString
return tempNode.childNodes
}
위 처럼 현재 document에 문서에 연결되지 않은 dom을 하나 생성 후 innerHTML로 htmlString을 세팅을 하게 되면, 모든 자손을 제거하고 htmlString을 html로 파싱하고, 생성된 노드로 대체 되는 특성을 사용 한 것이다. 사용법이 매우 심플하고, 널리 쓰고 있는 방법이기에 꽤 추천 하는 코드이다.
* 텍스트만 뽑고 싶다면 아래 처럼 return만 변경 해주면 된다.
return tempNode.innerText
출처: https://developer.mozilla.org/
DOMParser
function htmlStringToNodeList(htmlString) {
return (new DOMParser())
.parseFromString(htmlString, 'text/html')
.body.childNodes
}
위의 코드는 DOMParser.parseFromString을 이용한 코드이다. 위의 코드에서 맘에 안드는 부분이 하나 있는데, body 저 부분이다. 굳이 생성하지 않은 코드이지만 위의 text/html의 파싱 결과가 HTMLDocument이며 기본적인 <html><head></head><body></body><html>을 가지고 있는 형태이기에, 꽤 신경써야 하는 부분이 들어나는 기분이다.
또한, script를 파싱 한다고 생각해보자.
위처럼 body가 아닌 head에서 찾아야 한다. 위의 innerHTML을 사용 한 방식 보다. 불편함을 감수해야하는 방식이다.
parseFromString(string, mimeType)
참고로 parseFromString의 파라미터는 위와 같고, string을 파싱할 데이터, mimeType을 string 파싱할 방식이라고 보면 된다.
mimeType: 파싱할 방식이며 파싱 방식에따라 리턴되는 값이 달라진다.
=> "<span>test</span><span>test</span>"를 html로 파싱하면 가능 하지만 xml의 경우 루트 엘리먼트가 하나여야 하므로 파싱이 되지 않는다.
- text/html : HTMLDocument를 리턴한다. html 파싱 방식을 따른다.
- text/xml : XMLDocument를 리턴한다. xml 파싱 방식을 따른다.
- application/xml : XMLDocument를 리턴한다. xml 파싱 방식을 따른다.
- application/xhtml+xml : XMLDocument를 리턴한다. xml 파싱 방식을 따른다.
- image/svg+xml : XMLDocument를 리턴한다. xml 파싱 방식을 따른다.
 |
| 출처: https://developer.mozilla.org/ |
innerHtml vs DOMParser
위의 내용만 보면 innerHTML DOMParser보다 더 뛰어난 것처럼 얘기를 하고 있다. 그렇다면 왜 innerHTML만 설명 하면 되지 왜 DOMParser는 설명 하고 있을까?
아래의 코드를 확인하자.
function innerHTMLParser(htmlString) {
const tempNode = document.createElement('div')
tempNode.innerHTML = htmlString
return tempNode.childNodes
}
innerHTMLParser('<img src="innerHTMLParser">')
function domParser(htmlString) {
return (new DOMParser())
.parseFromString(htmlString, 'text/html')
.body.childNodes
}
domParser('<img src="domParser">')
우리가 파싱 해야하는 컨텐츠의 종류는 우리가 만든 html이 아니라는 것이다.
innerHTML의 경우 img태그의 src지정된 경로의 파일을 요청을 하게 된다. 하지만 DOMParser의 경우 말 그대로 파서이기 때문에 따로 요청한다거나 하지는 않는다.
위에서 innerHTML방식이 널리쓰이고, 추천하는 방식이라고는 했지만, onload, onerror등 이벤 핸들러의 실행도 되니, 사용에 주의 하자. 해당 방식이 찝찝하다면 해석만 가능한 DOMParser 방식을 사용하는 것이 좋다.
참고로 성능을 확인해보았는데, 큰 차이를 보이진 않았지만, 대체로 DOMParser가 빠른 것으로 보였다.
댓글
댓글 쓰기