외곈 World 👽🌏

리액트만 하다보니 자바스크립트 지식이 모두 증발해버린 느낌....

메서드명들을 죄다 까먹어버린 것 같다. 급하게 투두 리스트를 만들어보며 기억해내보기로 했다.

DOM을 조작하기 위한 다양한 메서드 중 어떤 것을 선택해야 할 지 고민이 되었다.

매번 까먹어서 매번 고민하고 매번 검색하고!!! 지겨워... 이번엔 정리해놔야지.

텍스트 콘텐츠를 다루기:  innerText,textContent

📚 innerText

• 요소의 렌더링된 텍스트만 다루기 때문에 스타일이 적용된 후의 텍스트만 가져온다.
• display: none이나 visibility: hidden으로 숨겨진 요소의 텍스트도 textContent로는 접근할 수 있지만, innerText는 숨겨진 요소의 텍스트를 무시한다.
• textContent보다 렌더링 결과에 의존하므로 복잡한 구조에서는 조금 더 까다로울 수 있다.
• innerText는 DOM의 스타일을 계산하므로 textContent보다 약간 느릴 수 있지만, 일반적인 상황에서는 큰 차이가 없다.

📚 textContent

•  요소의 텍스트 내용을 추가하거나 가져온다. HTML 태그는 텍스트로 처리되며, 태그가 렌더링되지 않는다.
• 따라서 태그 없이 순수한 텍스트만 다룰 때 적합하다.
• 성능 측면에서 매우 빠르며, DOM을 다시 렌더링하지 않고 텍스트만 업데이트 하기 때문에 오버헤드가 거의 없다.
• 텍스트만 다루기 때문에 HTML 구조를 고려할 필요가 없어 유지 보수가 쉽다.

HTML 요소를 추가하거나 삽입: innerHTML, appendChild, insertAdjacentHTML

📚 innerHTML 

• 요소 내부의 HTML이나 XML 마크업을 가져오거나 설정한다.
• HTML 마크업을 포함한 문자열을 쉽게 삽입할 수 있다. 속도가 빠르다.
• 대량의 데이터를 처리할 때 성능 저하가 발생할 수 있으며,  크로스 사이트 스크립팅(XSS) 공격에 취약하다.
  • 내용을 변경하지 않고 추가적으로 HTML을 삽입하고자 할 때는 insertAdjacentHTML() 메서드를 사용하는 것이 더 적합하다.
    ..Why🧐?
    innerHTML은 요소의 모든 내용을 다시 렌더링하기 때문에 성능 저하가 발생할 수 있고, 기존의 자식 요소가 손상될 수 있다. 반면, insertAdjacentHTML()은 기존의 DOM 구조를 유지하면서 새로운 HTML을 효율적으로 삽입할 수 있어 성능과 안정성 면에서 유리하다.

📚  insertAdjacentHTML() 

• element.insertAdjacentHTML(position, text)
• 기존 요소를 유지한 채로 지정된 위치(position)에 HTML 문자열을 파싱하여 요소로 삽입한다.
• insertAdjacentHTML은 요소를 다시 파싱하지 않으므로 해당 요소 안의 기존 자식 요소를 손상시키지 않는다.
• HTML을 한 번에 추가하므로 성능이 빠를 수 있지만 보안 문제(XSS: Cross-site scripting)로 인해 외부 입력을 삽입할 때는 주의해야 한다.

const el = document.getElementById('el')
el.insertAdjacentHTML('beforebegin', '<span>Before Begin</span>');// el 이전에 삽입
el.insertAdjacentHTML('afterbegin', '<span>After Begin</span>'); // el의 첫 번째 자식 이전에 삽입
el.insertAdjacentHTML('beforeend', '<span>Before End</span>'); // el의 마지막 자식 이후에 삽입 
el.insertAdjacentHTML('afterend', '<span>After End</span>'); // el 이후에 삽입

<span> --A-- </span>
<span>Before Begin</span> 
<span id="el"> 
	<span>After Begin</span> 
    <span> --B-- </span>
    --C-- 
    <span> --D-- </span> 
    <span>Before End</span> 
 </span> 
 <span>After End</span> 
 <span> --E-- </span>

📚 appendChild()

• 새로 생성된 요소를 기존 DOM의 자식으로 추가한다.
• 코드가 명확하고 직관적이기 때문에 유지 보수와 가독성이 뛰어나다.
• 여러 요소를 한 번에 추가하는 경우 약간의 성능 오버헤드가 있지만, 일반적으로 성능이 양호하다.

✨ 결론

innerText vs textContent

innerText는 렌더링된 텍스트만 다루기 때문에 스타일에 의존적이다. 또한 숨겨진 요소의 텍스트는 무시되므로, 순수한 텍스트 처리에서는 textContent를 사용하는 것이 더욱 빠르고 단순하다. DOM 구조를 다시 렌더링하지 않고 순수 텍스트를 추가하거나 수정할 수 있기 때문에, 성능 오버헤드가 거의 없다. 

innerHTML vs insertAdjacentHTML vs appendChild

innerHTML은 기존의 모든 내용을 덮어쓰기 때문에, 성능이 저하될 수 있다. insertAdjacentHTML은 기존 요소를 유지하면서 새로운 HTML을 추가하므로 더 나은 성능을 제공한다. (자식요소의 파싱과정이 생략되어 더 빠르고 성능⬆)

하지만 insertAdjacentHTML과 innerHTML은 XSS 공격에 취약하기 때문에 가능하다면 appendChild를 사용하는 것이 더 안전하다고 판단하였다. 성능 면에서도 일반적인 사용에서는 충분하다고 생각된다.

🧐 참고
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild