Skip to content

Tags

On this page

JavaScript 텍스트 변경하기

수정하기
문서 생성 2021-10-04 12:39:14 최근 수정 2022-05-23 22:27:31

nodeValue

노드 객체의 nodeValue 프로퍼티를 참조하면 노드 객체의 값을 반환한다. 값을 할당하면 텍스트 노드의 값을 변경할 수 있다.

<body>
<button>닫기</button>
<script>
const button = document.getElementsByTagName("BUTTON")[0];
const txt = button.childNodes[0].nodeValue;
console.log(txt); // 닫기
button.childNodes[0].nodeValue = "저장";
console.log(button.childNodes[0].nodeValue); // 저장
</script>
</body>

txtContent

요소 노드의 textContent 프로퍼티를 참조하면 내부의 텍스트를 모두 반환하는데 여기서 마크업은 무시된다. 할당도 마찬가지로 무시된다.

<body>
<div id="foo">Hello <span>world!</span></div>
</body>
<script>
console.log(document.getElementById('foo').textContent); // Hello world!
</script>

비슷한 프로퍼티로 innerText가 있는데 innerText에는 CSS가 반영된다. 즉 CSS에 의해 표시되지 않는 요소( visibility:hidden;)의 텍스트는 반환하지 않기 때문에 CSS를 고려하므로 속도가 느려서 사용하지 않는 것이 좋다. 리플로우가 발생되는 것.

Text 노드 생성하기

createTextNode()를 사용해서 Text 노드를 생성할 수 있다.

const textNode = document.createTextNode('Hello')

LINKS TO THIS PAGE