웹 개발에서 DOM (Document Object Model)은 HTML, XML 문서의 구조화된 표현을 제공하고, 이를 프로그래밍 언어로 수정하기 위한 인터페이스를 제공합니다. 이번 블로그에서는 DOM을 이용하여 텍스트 노드를 조작하는 방법에 대해 다루겠습니다.

텍스트 노드 생성하기

자바스크립트를 사용하여 새로운 텍스트 노드를 생성하려면 다음과 같이 createTextNode 메서드를 사용합니다.

const newText = document.createTextNode('새로운 텍스트 노드');

텍스트 노드에 접근하기

특정 요소의 자식 노드 중에서 텍스트 노드에 접근하려면 childNodes나 firstChild와 같은 속성을 사용합니다.

const textNode = document.getElementById('exampleElement').firstChild;

텍스트 노드 수정하기

텍스트 노드를 수정할 때에는 nodeValue 속성을 사용합니다.

textNode.nodeValue = '수정된 텍스트 내용';

텍스트 노드 삭제하기

텍스트 노드를 삭제하려면 해당 노드를 선택한 후 부모 노드에서 removeChild 메서드를 사용합니다.

const textNode = document.getElementById('exampleElement').firstChild;
textNode.parentNode.removeChild(textNode);

위의 방법들을 활용하여 DOM의 텍스트 노드를 생성, 수정, 삭제하는 방법에 대해 알아보았습니다. 이러한 방법들을 응용하여 웹 페이지에서 동적으로 텍스트를 조작할 수 있습니다.

더 많은 정보는 MDN web docs에서 확인할 수 있습니다.

수정된 블로그 포스트에 대한 피드백이 있으면 언제든지 알려주세요!