DOM 요소의 콘텐츠를 조작하는 속성

자바스크립트를 사용하여 DOM(Document Object Model, 문서 객체 모델) 요소의 콘텐츠를 조작하는 속성들에 대해 알아보겠습니다.

세 가지 주요 속성

DOM 요소의 콘텐츠를 조작하는 세 가지 주요 속성
textContent 요소의 텍스트 콘텐츠를 가져오거나 설정
innerText 요소의 텍스트 콘텐츠를 가져오거나 설정
(단, CSS로 숨겨진 요소의 텍스트는 가져오지 못하고 렌더링된 텍스트만 가져옴)
innerHTML 요소의 내부 텍스트를 포함한 HTML 콘텐츠를 가져오거나 설정

textContent vs. innerText vs. innerHTML

innerHTML vs. textContent vs. innerText
속성 HTML 태그 처리 숨겨진 요소의 텍스트 보안(XSS)
textContent 아니오
(단순 텍스트로 변환해서 처리)		 가져올 수 없음
설정할 수 있음		 상대적으로 안전함
innerText 아니오
(단순 텍스트로 변환해서 처리)		 가져올 수 있음
설정할 수 있음		 상대적으로 안전함
innerHTML 예
(HTML 태그로 렌더링)		 가져올 수 있음
설정할 수 있음		 위험 가능성 큼
  • textContent는 요소의 단순 텍스트만 조작할 때 사용합니다.
  • innerText는 렌더링된 요소의 단순 텍스트만을 가져와야할 때 사용합니다. 즉, CSS의 영향을 받는 텍스트가 필요한 경우에만 사용하는 것이 좋습니다.
    이러한 이유로, CSS를 고려해야 하기 때문에 일반적인 상황에서는 추천하지 않습니다.
  • innerHTML은 HTML 태그를 포함한 동적 콘텐츠 생성 시 사용합니다.

textContent

textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

해당 요소 내에 자손이 있다면 자손 태그는 무시하고 텍스트 콘텐츠만 처리합니다.

구문
JavaScript 
/* 가져오기 */
const text = someNode.textContent;

/* 설정하기 */
someOtherNode.textContent = string;
예제

textContent 속성을 사용하면 해당 요소의 텍스트 내용을 가져옵니다.

HTML 
<p id="a">환영합니다!</p>
JavaScript 
const ele = document.getElementById("a");
console.log(ele.textContent); // "환영합니다!"

textContent 속성을 사용하면 해당 요소의 텍스트 내용을 설정합니다.
새로운 텍스트로 설정할 경우, 요소의 기존 자식 요소나 텍스트는 모두 삭제되고 새 텍스트로 대체됩니다.

HTML 
<p id="a"><strong>중요:</strong> 환영합니다!</p>
<button type="button" id="btn">텍스트 내용을 설정</button>
JavaScript 
const ele = document.getElementById("a");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    ele.textContent = "반갑습니다!";
});
실제 적용된 모습 '버튼'을 실제로 클릭해 보세요!

더 자세한 내용과 예제는 자바스크립트 textContent 속성 – 올바른 이해와 사용 방법을 참조하세요.

innerText

innerText 속성은 렌더링된 HTML 요소의 텍스트 콘텐츠를 나타냅니다.
해당 요소 내에 자손이 있다면 자손 태그는 무시하고 텍스트 콘텐츠만 처리합니다.

  • 렌더링된 HTML 요소의 텍스트 콘텐츠를 가져옵니다.
  • 렌더링 여부와 상관없이 HTML 요소의 텍스트 콘텐츠를 설정합니다.
구문
JavaScript 
/* 가져오기 */
const renderedText = htmlElement.innerText;

/* 설정하기 */
htmlElement.innerText = string;
값

HTML 요소의 렌더링된 텍스트 내용을 나타내는 문자열입니다.

innerText 속성은 렌더링된 HTML 요소의 텍스트 콘텐츠만을 인식할 수 있습니다.

요소 자체에 CSS의 visibility 속성이 hidden 또는 collapse으로 설정되어 화면에 숨겨진 텍스트는 가져올 수 없습니다.

요소 자체에 CSS의 visibility 속성이 hidden 또는 collapse으로 설정되어 있지 않더라도 다음의 요소 텍스트는 가져올 수 없습니다.

  • 요소의 자손 요소에 CSS의 display 속성이 none으로 설정된 텍스트
  • 요소의 자손 요소에 HTML의 hidden 속성이 설정된 텍스트
  • 요소의 자손 요소에 CSS의 visibility 속성이 hidden 또는 collapse으로 설정된 텍스트
예제

innerText 속성을 사용하면 렌더링된 해당 요소의 텍스트 내용을 가져옵니다.

HTML 
<p id="a">환영합니다!</p>
JavaScript 
const ele = document.getElementById("a");
console.log(ele.innerText); // "환영합니다!"

innerText 속성을 사용하면 해당 요소의 텍스트 내용을 설정합니다.
새로운 텍스트로 설정할 경우, 요소의 기존 자식 요소나 텍스트는 모두 삭제되고 새 텍스트로 교체됩니다.

HTML 
<p id="a"><strong>중요:</strong> 환영합니다!</p>
<button type="button" id="btn">텍스트 내용을 설정</button>
JavaScript 
const ele = document.getElementById("a");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    ele.innerText = "반갑습니다!";
});
실제 적용된 모습 '버튼'을 실제로 클릭해 보세요!

더 자세한 내용과 예제는 자바스크립트 innerText 속성 – 올바른 이해와 사용 방법을 참조하세요.

innerHTML

innerHTML 속성은 HTML 요소의 내부 HTML 콘텐츠를 가져오거나 설정합니다.

해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 읽어오거나 새롭게 변경할 수 있습니다.

innerHTML 속성은 특정 요소 내에 단순 콘텐츠를 동적으로 집어넣는 경우에 편리하고 유용합니다.

구문
JavaScript 
/* 가져오기 */
const content = element.innerHTML;

/* 설정하기 */
element.innerHTML = htmlString;
예제

해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 가져옵니다.
해당 요소에 텍스트 노드만 있으면 텍스트를 가져옵니다.

다음은 노드(Node) 용어에 대한 간단한 부연설명입니다.
노드(Node)
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
요소는 오직 "요소 노드"만을 의미합니다.
HTML 
<p id="a">환영합니다!</p>
JavaScript 해당 요소에 텍스트 노드만 있으면 텍스트를 가져옵니다. 
const ele = document.getElementById("a");
console.log(ele.innerHTML); // "환영합니다!"

해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 설정합니다.
innerHTML 속성으로 설정할 경우 요소의 자식 요소, 텍스트 노드, 주석 등을 포함 모든 콘텐츠는 삭제되고 설정한 콘텐츠로 대체됩니다.

HTML 
<ul id="food">
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
</ul>
<button type="button" id="btn">메뉴 바꾸기</button>
JavaScript 
const food = document.getElementById("food");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    food.innerHTML = `
        <li>짜장면</li>
        <li>짬뽕</li>
        <li>우동</li>
    `;
});
실제 적용된 모습 '버튼'을 실제로 클릭해 보세요!

더 자세한 내용과 예제는 자바스크립트 innerHTML 속성 – 올바른 이해와 사용 방법을 참조하세요.

정리

  • textContent는 요소의 모든 텍스트를 조작할 때 사용합니다. 요소에 포함된 텍스트뿐만 아니라 CSS로 숨겨진 요소의 텍스트도 포함하여 가져오거나 설정할 수 있습니다. 텍스트를 가져올 때 HTML 태그는 모두 무시됩니다.
  • innerText는 렌더링된 텍스트만을 다룰 수 사용하는 것이 좋습니다. 즉, 화면에 표시되는 텍스트만을 가져오거나 설정할 때 사용해야 합니다. CSS에 의해 숨겨진 텍스트는 가져올 때 무시됩니다. 일반적으로는 innerText는 CSS의 영향을 받는 요소의 텍스트가 필요한 경우에만 사용하는 것이 좋습니다.
  • innerHTML은 요소의 HTML 콘텐츠를 포함한 동적 콘텐츠를 생성할 때 사용합니다. HTML 태그를 포함하여 요소의 구조까지 변경할 수 있으므로 강력하지만, 보안적인 측면을 고려해야 합니다. 따라서 사용자 입력을 직접 삽입하는 경우에는 주의가 필요합니다.

브라우저 호환성

DOM 요소의 콘텐츠를 조작하는 세 가지 주요 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
textContent 1 12 1 3
innerText 1 12 45 1
innerHTML 1 12 1 1

같이 보기

명세서

DOM 요소의 콘텐츠를 조작하는 세 가지 주요 속성의 명세서 사양
명세서 사양
textContent DOM Standard
#dom-node-textcontent
innerText DOM Standard
#the-innertext-idl-attribute
innerHTML DOM Standard
#dom-element-innerhtml

참고문헌