[JavaScript] DOM - element와 node/ property, method 들의 차이점

Hannahhh·2022년 7월 16일

목록 보기

21/47

✔ innerHTML vs innerText vs textContent

innerHTML(HTMLelement property)

이름 그대로 HTML 전체 내용을 반환한다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 우수하다.

innerText(element property)

요소와 그 자식의 "유저가 읽을 수 있는" 텍스트 콘텐츠를 나타낸다. 따라서 css에서 display:none으로 정의된 텍스트는 보여지지 않는다. 이와 같이 스타일링을 고려하기 때문에 innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. (리플로우 계산은 비싸므로 가능하면 피해야 한다.)

textContent(node property)

innerText기 "사람이 읽을 수 있는" 요소만 처리하는 반면 textContent는<script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져온다.

또한,innerText는 스타일링을 고려하기 때문에 "숨겨진" 요소의 텍스트는 반환하지 않는 반면에 textContent는 노드의 모든 요소를 반환한다.

✔ element와 node의 차이

node는 DOM 객체 중 하나로, 여러 가지 DOM 타입들이 상속하는 인터페이스이다. 그 타입들 중 하나가 바로 element로, node는 element의 상위 개념이다. 즉, element는 node안에 속해있는 자식이며 구체적으로, node는 태그 노드와 텍스트 노드(주석포함) 전체를 가리키며 element는 텍스트 노드를 제외한 태그(

)만을 가리킨다.

children과 childNodes의 차이

children(element property) :
현재 요소의 자식 요소가 포함된 HTMLCollection을 반환하며, 요소 노드만 포함한다.

childNodes(node property) :
주어진 요소의 자식 노드 모음(Node List)을 반환하며, 요소 노드뿐만 아니라 Non-element(주석, 텍스트 등)노드를 포함한다.

remove와 removeChild의 차이(node method)

remove()(element method) :
노드를 메모리에서 삭제하고 종료한다.

removeChild(node method) : 노드를 삭제하는 것이 아니라, 메모리에 해당 노드는 그대로 존재하지만 부모 노드와의 부모 - 자식 관계를 끊어 DOM 트리에서 해제한다. 최종적으로 관계를 끊은 해당 노드의 참조를 반환한다.
반환값을 변수에 저장하지않으면 삭제하는 노드의 참조가 더이상 없기 때문에, 자바스크립트 엔진의 GC(Garbage Collection)에 의해 잠시 후 메모리에서 삭제된다. 반환된 노드 참조를 변수에 담아 다른 DOM 위치에 붙일 수 있다.

같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?(node method)

Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킨다.(복사 x)