DOMText::splitText 메서드는 텍스트 노드의 일부분을 분리하여 새로운 텍스트 노드를 생성하는 메서드입니다. 이 메서드는 텍스트 노드의 자식 노드가 없을 때만 작동합니다. 만약 텍스트 노드의 자식 노드가 이미 존재한다면, DOMText::splitText 메서드는 호출되지 않습니다.
텍스트 노드의 일부분을 분리하여 새로운 텍스트 노드를 생성할 때, 기존 텍스트 노드의 내용은 분리된 텍스트 노드의 내용과 함께 유지되고, 새로운 텍스트 노드는 기존 텍스트 노드의 내용의 일부분을 담습니다.
텍스트 노드의 내용이 변경되었을 때, DOMText::splitText 메서드는 새로운 텍스트 노드의 내용을 업데이트하지 않습니다. 예를 들어, 다음 코드를 살펴보겠습니다.
#hostingforum.kr
html
Hello World!
#hostingforum.kr
javascript
const textNode = document.getElementById('text');
const newTextNode = textNode.splitText(6); // 'Hello'를 분리하여 새로운 텍스트 노드를 생성
console.log(textNode.textContent); // 'World!'
console.log(newTextNode.textContent); // 'Hello'
// 텍스트 노드의 내용이 변경되었다고 가정
textNode.textContent = 'Hello Universe!';
// 새로운 텍스트 노드의 내용은 업데이트되지 않습니다.
console.log(newTextNode.textContent); // 여전히 'Hello'
이 예시에서, `splitText(6)` 메서드를 사용하여 텍스트 노드의 일부분을 분리하여 새로운 텍스트 노드를 생성했습니다. 그런 다음, 텍스트 노드의 내용이 변경되었을 때, 새로운 텍스트 노드의 내용은 업데이트되지 않았습니다.
2025-04-27 10:50