18.6 DOM 요소 조작
요소를 찾는 방법은 알았는데, 찾은 요소로 무엇을 할 수 있을까요?
콘텐츠 수정부터 시작해봅시다.
모든 요소에는 textContent와 innerHTML 프로퍼티가 있습니다.
이 프로퍼티를 통해 요소의 콘텐츠에 접근하거나 수정할 수 있습니다.
textContent는 HTML 태그를 모두 제거하고 순수한 텍스트 데이터만 제공하며, innerHTML는 HTML 태그를 그대로 제공합니다.
innerHTML을 통해 HTML 태그를 수정하면 DOM이 그에 맞게 변경됩니다.
예제 HTML의 첫 번째 문단에 접근하고 수정해 봅시다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple HTML</title>
<style>
.callout {
border: 1px solid #ff0080;
margin: 2px 4px;
padding: 2px 6px;
}
.code {
background: #ccc;
margin: 1px 2px;
padding: 1px 4px;
font-family: monospace;
}
</style>
</head>
<body>
<header>
<h1>Simple HTML</h1>
</header>
<div id="content">
<p>This is a <i>simple</i> HTML file.</p>
<div class="callout">
<p>This is as fancy as we'll get!</p>
</div>
<p>IDs (such as <span class="code">#content</span>) are unique (there can only be one per page).</p>
<p>Classes (such as <span class="code">.callout</span>) can be used on many elements.</p>
<div id="callout2" class="collout fancy">
<p>A single HTML element can have multiple classes.</p>
</div>
</div>
</body>
</html>
const para1 = document.getElementsByTagName('p')[0];
para1.textContent; // "This is a simple HTML file."
para1.innerHTML; // "This is a simple HTML file."
para1.textContent = "Modified HTML file";
para1.innerHTML = "Modified HTML file";
CAUTION_
textContent나innerHTML을 수정하는 것은 파괴적인 작업입니다.
이 프로퍼티를 수정하면 요소의 원래 콘텐츠는 전부 사라집니다.
예를 들어<body>의innerHTML을 수정하면 페이지 전체 콘텐츠가 바뀝니다.