DOM 노드 수정하기: HTML 요소와 속성 변경 방법 및 사용 예제
웹 개발에서 DOM(Document Object Model)은 웹 페이지의 구조와 내용을 조작하는 핵심적인 역할을 합니다. DOM을 이해하고 활용하면 웹 페이지의 동적인 특성을 구현할 수 있으며 사용자와 상호작용하는 다양한 기능을 제공할 수 있습니다. 이번 글에서는 HTML 요소의 내용과 속성을 변경하는 방법에 대해 알아보겠습니다.
1. 요소 변경: innerHTML, innerText, textContent 속성 사용
innerHTML, innerText, 그리고 textContent는 DOM 노드의 내용을 수정할 때 사용되는 속성입니다.
| 메서드/속성 | 설명 |
|---|---|
| innerHTML | HTML 구조를 포함한 문자열로 요소의 내용을 변경합니다. |
| innerText | 순수한 텍스트 문자열로 요소의 내용을 변경하며, CSS 스타일에 따른 가시성을 고려합니다. |
| textContent | 순수한 텍스트 문자열로 요소의 내용을 변경하며, CSS 스타일에 따른 가시성을 고려하지 않습니다. |
예제 1: innerHTML, innerText, textContent 사용하기
1. 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>DOM 노드 수정하기</title>
</head>
<body>
<p id="innerHTML"></p>
<p id="innerText"></p>
<p id="textContent"></p>
<script>
window.onload = function() {
document.getElementById("innerHTML").innerHTML = "<strong>새로운</strong> 내용입니다.";
document.getElementById("innerText").innerText = "<strong>새로운</strong> 내용입니다.";
document.getElementById("textContent").textContent = "<strong>새로운</strong> 내용입니다.";
};
</script>
</body>
</html>
이 예제에서는 innerHTML, innerText, 그리고 textContent를 사용하여 각 문단의 내용을 수정합니다. 결과로 각 메서드/속성에 따라 텍스트가 다르게 표시됩니다.
2. 실행 결과 화면
예제 2: innerText와 textContent의 차이 보여주기
1. 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>DOM 노드 수정하기</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<p id="sample">
이것은 <span class="hidden">숨겨진</span> 텍스트입니다.
</p>
<p id="innerText"></p>
<p id="textContent"></p>
<script>
window.onload = function() {
var sample = document.getElementById("sample");
document.getElementById("innerText").innerText = "innerText 결과: " + sample.innerText;
document.getElementById("textContent").textContent = "textContent 결과: " + sample.textContent;
};
</script>
</body>
</html>
이 예제에서는 innerText와 textContent의 차이를 보여주기 위해 CSS를 사용하여 문단의 일부 내용을 숨깁니다. innerText는 CSS 스타일에 따른 가시성을 고려하기 때문에 숨겨진 요소를 포함하지 않습니다. 반면 textContent는 가시성과 관계없이 모든 텍스트를 가져옵니다.
2. 실행 결과 화면
2. 속성 변경: setAttribute, removeAttribute 메서드 사용
setAttribute와 removeAttribute는 HTML 요소의 속성을 변경하거나 제거하는 데 사용됩니다.
| 메서드 | 설명 |
|---|---|
| setAttribute | 지정한 속성을 추가하거나 변경합니다. |
| removeAttribute | 지정한 속성을 제거합니다. |
1. 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>DOM 노드 수정하기</title>
</head>
<body>
<a id="myLink" href="https://www.google.com" title="구글">구글</a>
<script>
window.onload = function() {
// 속성값 변경
document.getElementById("myLink").setAttribute("href", "https://blueshare.tistory.com");
document.getElementById("myLink").setAttribute("target", "_blank");
document.getElementById("myLink").innerText = "BlueShare 블로그"
// 속성값 삭제
document.getElementById("myLink").removeAttribute("title");;
};
</script>
</body>
</html>2. 실행 결과 화면
함께 보면 좋은 게시글
- DOM 노드 선택하기: Document 객체 이해 및 HTML 요소 찾기
- DOM 노드 추가 및 삭제하기: 웹 페이지 구조 조작 및 사용 예제
- 자바스크립트로 input, textarea 값 가져오기와 넘기기
- 자바스크립트 이벤트 처리: 이벤트 종류, 이벤트 리스너, 이벤트 객체
- 자바스크립트 배열: 생성부터 검색까지 사용법 및 예제
이 글이 도움이 되셨다면 공유 부탁 드립니다.
