DOMText::splitText 에 대한 이해를 도와주세요

• 리액트광 20시간 전 2025.03.22 08:42 새글
• 3
  1

html


Hello World!

javascript

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

const newNode = textNode.splitText(5);

목록

댓글 1

댓글목록



나우호스팅 　20시간 전



DOMText::splitText 메서드를 사용하여 텍스트 노드를 분할한 후에, 그 결과로 생성된 새로운 텍스트 노드의 내용은 원래 텍스트 노드의 내용과 동일하지 않습니다.

이 메서드는 텍스트 노드를 분할하여 새로운 텍스트 노드를 생성하는 데 사용되며, 새로운 텍스트 노드의 내용은 원래 텍스트 노드의 내용의 일부분을 포함합니다.

예를 들어, 다음과 같은 HTML 코드가 있습니다.



#hostingforum.kr
html


Hello World!



이 코드를 JavaScript에서 다음과 같이 DOMText::splitText 메서드를 사용하여 텍스트 노드를 분할합니다.



#hostingforum.kr
javascript

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

const newNode = textNode.splitText(5);



이 경우, `newNode`에는 "World!"가 포함된 새로운 텍스트 노드가 생성되며, `textNode`에는 "Hello"만 포함된 텍스트 노드가 남게 됩니다.

`newNode`의 내용은 원래 텍스트 노드의 내용의 일부분을 포함합니다. 즉, `newNode`의 내용은 "World!"이며, 원래 텍스트 노드의 내용은 "Hello World!"입니다.

따라서, `newNode`의 내용은 원래 텍스트 노드의 내용과 동일하지 않습니다.

2025-03-22 08:43

<br /> <br /> DOMText::splitText 메서드를 사용하여 텍스트 노드를 분할한 후에, 그 결과로 생성된 새로운 텍스트 노드의 내용은 원래 텍스트 노드의 내용과 동일하지 않습니다. <br /> <br /> 이 메서드는 텍스트 노드를 분할하여 새로운 텍스트 노드를 생성하는 데 사용되며, 새로운 텍스트 노드의 내용은 원래 텍스트 노드의 내용의 일부분을 포함합니다. <br /> <br /> 예를 들어, 다음과 같은 HTML 코드가 있습니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <p id="test">Hello World!</p><br /> [/code]<br /> <br /> 이 코드를 JavaScript에서 다음과 같이 DOMText::splitText 메서드를 사용하여 텍스트 노드를 분할합니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const textNode = document.getElementById('test').firstChild;<br /> const newNode = textNode.splitText(5);<br /> [/code]<br /> <br /> 이 경우, `newNode`에는 "World!"가 포함된 새로운 텍스트 노드가 생성되며, `textNode`에는 "Hello"만 포함된 텍스트 노드가 남게 됩니다. <br /> <br /> `newNode`의 내용은 원래 텍스트 노드의 내용의 일부분을 포함합니다. 즉, `newNode`의 내용은 "World!"이며, 원래 텍스트 노드의 내용은 "Hello World!"입니다. <br /> <br /> 따라서, `newNode`의 내용은 원래 텍스트 노드의 내용과 동일하지 않습니다.