Node.textContent (TIL 39일차)

"너무나도 빡센 하루였어요..."

두둥! 주어진 문제를 다 못 푸는 날이 언젠가 올 거라곤 생각했지만, 그게 바로 오늘이었네요. ㅠㅠ

그런 김에 오늘은 최대한 간단하게 블로깅할 수 있는 주제를 가져왔습니다. Node.textContent 에 관해 다뤄볼 꺼에요.

DOM 을 활용해 자바스크립트로 HTML 의 조작이 가능하죠. 이 때 textContent 를 활용하면 텍스트 콘텐츠를 가져오거나 반대로 텍스트 콘텐츠를 설정할 수 있게 됩니다.

let createUl = document.createElement('ul');
createUl.setAttribute('id', 'hello');
document.body.append(createUl);
createUl.textContent = 'hello world';  
// ul 태그에 'hello world' 설정

let text = document.getElementById('hello').textContent;  
// hello 를 id로 갖는 요소의 textContent 가져오기

textContent 를 사용할 때 유의해야 할 것이 하나 있습니다. textContent 는 모든 자식을 지우고 텍스트 노드로 대치한다는 점입니다.

mdn 공식문서에 보면 설명 제일 마지막 줄에 (innerText 와의 차이점 바로 위) 다음과 같은 문장이 있습니다.

노드의 textContent 를 설정하면, 노드의 모든 자식을 주어진 문자열로 이루어진 하나의 텍스트 노드로 대치합니다.

예를 들자면 이렇습니다.

let createUl = document.createElement('ul');
createUl.setAttribute('id', 'hello');
document.body.append(createUl);
// Ul 은 body 의 자식요소

let createLi = document.createElement('li');
let createSpan = document.createElement('span');
let createInput = document.createElement('input');
createUl.append(createLi);
createUl.append(createSpan);
createUl.append(createInput);
// li, span, input 은 ul 의 자식요소

createUl.textContent = 'hello world';
// textContent 를 ul 에 설정하는 순간 li, span, input 이 사라짐

Ul 을 만들고 그 자식 요소로 li, span, input 을 append 했지만, 제일 마지막에서 Ul 의 textContent 를 설정했습니다. 그러면 li, span, input 이 사라지게 됩니다.

"개발자 도구에 복붙해보니 li, span, input 이 애초에 append 되지 않은 것 같은데요?" 연산 속도가 빨라서 그런 것처럼 보이지만, 마지막 줄을 제외한 나머지를 먼저 붙여넣고 Elements 를 확인해보면 분명 정상적으로 다 생성되는 것을 알 수 있습니다. textContent 를 그 이후에 붙여넣어보면 사라지는 것도 확인하실 수 있구요.

늘 그렇듯 다시 한 번 공식문서가 가장 먼저라는 진리를 깨닫게 되었습니다. 앞으로도 모르는 것이 생기면 일단 공식문서부터 꼼꼼히 훑어보려고 합니다.