DOM (Document Object Model)

DOM의 중요성

개발자가 되어서 크고 작은 여러가지의 기능들을 개발, 유지보수를 하였다. 물론 현업에 뛰어든지는 얼마되지도 않았고 기능들도 간단한 기능에 불과하다. 하지만 BUT DOM을 몰랐으면 아마 아직도 하고 있을 지도 몰랐다. 그리고 지금 간단한 기능이라고 적었지만 아마 간단한 기능이라고 말 못할 수 도 있었다. 그 이유는 현재 회사에서는 JSP를 쓰고 있는데 JSP에서는 JSTL을 이용하여 커스텀 태그가 많이 있다. 그래서 당연히 개발자도구를 이용해서 확인을 하면 많은 코드가 축약이 되어 있다. 간단히 예를 들자면 JS에서 forEach와 같이 생긴 1줄 짜리 코드가 개발자도구에서는 길게는 수 십줄이 되어서 나타날 때가 있다. 이 때 우리가 개발 및 유지보수에서 필요한 것은 그 수 십줄 중 소수의 코드이다. 그 소수의 코드를 받아서 필요에 맞게 조건을 걸 수 도 있고, 또는 핸들링해서 사용해야 하는데 실제코드에서는 1~2 줄로 축약이 되어있어서 접근하기가 어렵다. 하지만 BUT 이 때 바로 DOM을 이용해서 접근을 할 수 있다.

사용한 DOM 문법 정리

• children, children.length, childNodes

let isFile = document.getElementById('idValue')
const fileCount = isFile.children.length

fileArray.push(isFile.children[0].children[1].textContent

• childNodes VS children

<div>
	<!-- 주석(comment) -->
    <p>여기는 p 태그</p>
    <span> 여기는 span! </span>
</div>

childNodes : 자식노드에 접근
현재 요소의 자식노드가 포함된 NodeList를 반환한다. childNodes는 노드 뿐만 아니라 주석 노드와 같은 비 요소 노드를 포함시킨다.

document.querySelector("div").childNodes

NodeList(7) [text, comment, text, p, text, span, text]

children : 자식 요소에 접근
현재 요소의 자식 요소가 포함된 HTMLCollection을 반환한다. 비 요소 노드는 모두 제외

document.querySelector("div").children

HTMLCollection(2) [p, span]

• children.length

말그대로 반환된 값 (배열)의 길이를 나타낸다.
단순히 별거 없어 보이지만 포스팅 한 이유는 count의 기준이 된다. 예를 들어 클라이언트가 파일을 업로드 하는 상황이 있다. 그런데 파일 업로드의 개수가 5개 제한이면 length의 길이로 제한을 하는 코드를 작성해야 하고, 또 다른 제한으로 업로드 하는 파일들의 갯 수에 무관하게 제한된 크기가 있다면 역시 파일크기의 합을 구할 때 갯 수가 필요할 수 있다.(반복문 알고리즘) 그 외에 그 파일들을 갯 수를 이용해 반복문을 작성해야하는 경우가 많기 때문에 갯 수를 불러오는 중요한 코드라고 생각한다.

• textContent VS innerHTML VS innerText
  노드의 text를 불러오기 위한 코드
  하지만 BUT
  서로 다른 점이 있으며 현재 사용을 지양하는 것과 지향하는 것이 확실히 정해져 있다. (마치 코드 컨벤션과 비슷하다.)

사진 출처: https://velog.io/@raram2/%EB%8B%B9%EC%8B%A0%EC%9D%B4-innerHTML%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

textContent : 자기 자신과 자식 태그들의 텍스트 뿐만 아니라 줄바꿈, 띄워쓰기와 같은 스타일링 정보까지 가져온다.
textContent의 값은 식별자 노드의 내부 컨텐츠를 text/plain으로 파싱한 결과, 해당 요소 내부의 원시 텍스트 (Raw text)
-> 그래서 빠르다.

innerText : textContent와 반대로 스타일링 정보는 제외하고 가져온다.
textContent와 파싱은 똑같이 된다. (text/plain) 하지만 위에 처럼 스타일링은 제외가 된 모습.

더욱 자세한 내용은 : https://kellegous.com/j/2013/02/27/innertext-vs-textcontent/

innerHTML : 자기 자신은 텍스트 값, 자식들은 텍스트와 태그 값까지 모두 가져온다.
innerHTML 프로퍼티 값은 text/html으로 파싱한 결과 값
-> 상대적으로 느리며 XSS 공격에 취약하다.
현재 HTML5를 대부분 사용하고 있으며 innerHTML이 삽입된 <script> 태그는 실행이 되지 않도록 지정했지만, 다른 공격 루트들은 방어를 못한다. 그래서 보안 점검을 거치게 되는 경우, innerHTML의 코드는 거부가 될 가능성이 높다.

innerHTML VS textContent VS innerText의 결론은 !!! 그냥 textContent를 쓰자! 성능과 보안적인 면이 innerHTML보다 우수하다.그리고 상황에 맞게 innerText를 사용하면 된다.