[J.S_DOM] 3. 요소의 내용/속성 변경하기 (textContent, innerHTML, setAttribute 등)

3.0 요소 조작하기 

DOM 요소를 자바스크립트로 다루는 핵심:

요소를 "선택"하고, 내용을 변경하거나, 구조를 바꾸고, 스타일을 조작

이 파트에서는 DOM 요소를 조작하는 주요 방법들을 분류별 알아보자

3.1 텍스트 및 HTML 내용 조작하기

HTML 요소 내부의 텍스트 또는 HTML구조를 읽거나 수정이 가능

속성	설명
textContent	요소 안의 모든 텍스트를 가져오거나 설정 HTML 태그를 그대로 문자열로 취급 (숨겨진 텍스트도 포함)
innerText	요소 안의 표시되는 텍스트만 호출 Css에 따라 숨겨진 텍스트는 제외   브라우저가 렌더링한 내용을 기반으로 동작
innerHTML	요소 안의 HTML 코드 전체를 가져오거나 설정 HTML 태그까지 포함하여 조작 위험 XSS 취약 가능성이 있음

 

🔍  실제 사용 예시 상황

 

• 사용자가 입력한 내용을 다른 위치에 출력 할 때 ⇒ textContent
• 요소의 내용을 HTML 구조와 함께 동적으로 바뀌어야 할 때 ⇒ innerHTML
• 시각적으로 보여지는 텍스트만 기준으로 동작할 때 ⇒ innerText

3.2 스타일 변경 하기 (DOM 요소의 CSS 조작)

HTML 요소의 속성은 자바스크립트를 통해 일거나 변경 삭제가 가능

src(이미지), href(링크), disable(버튼), placeholder(입력) 등이 모두 속성에 포함

메서드 / 속성	설명
getAttribute(name)	특정 속성의 값을 가져옵니다.
setAttribute(name, value)	특정 속성의 값을 설정합니다. (기존 속성이 없으면 생성됨)
removeAttribute(name)	속성을 제거합니다.
hasAttribute(name)	속성이 존재하는지 true/false로 반환합니다.
element.id, element.src 등	자주 쓰이는 속성은 점 표기법으로 바로 접근할 수 있습니다.

 

🔍  실제 사용 예시 상황

• 이미지 주소를 동적으로 변경 ⇒ img.setAttribute("src", newUrl)
• 링크의 주소 바꾸기 ⇒ a.href = "https://..."

3.3 클래스 조작하기 (classList)

CSS 클래스를 추가/제거/토글/확인 하기 위해 사용하는 속성

스타일을 직접 건드리지 않고 다양한 상태 변화를 줄 수 있음. 

메서드	설명
.add("클래스명")	클래스 추가
.remove("클래스명")	클래스 제거
.toggle("클래스명")	클래스가 있으면 제거, 없으면 추가
.contains("클래스명")	해당 클래스가 있는지 true/false 반환
.replace("기존", "새로운")	클래스 이름 교체

 

🔍  실제 사용 예시 상황

• 토글 버튼 클릭 시 스타일 바꾸기
• 유효성 검사 후, 성공/에러 클래스 추가
• 특정 상태에 따라 스타일 전환

3.4 스타일(style) 조작 하기

HTML 요소에 직접 스타일을 지정할 수 있음

자바스크립트에서 CSS를 변경 시, 가장 직접적인 방식

방법	설명
element.style	요소의 인라인 스타일을 조작하는 객체
element.style.color = "red"	직접 스타일 속성을 설정 (속성명은 camelCase 사용)
getComputedStyle(element)	요소에 브라우저가 실제로 적용한 최종 스타일을 읽을 수 있음 (읽기 전용)

 

🔍  실제 사용 예시 상황

• 버튼 클릭 시 배경색 변경
• 특정 조건에 따라 폰트 크기, 색상 조정
• 애니메이션 중 일시적으로 스타일 조작

⚠️ .style로 적용하는 스타일은 CSS보다 우선순위가 높지만,
CSS 클래스를 사용하는 것이 유지보수와 재사용 측면에서 더 좋음
.style은 자바스크립트로 요소 하나의 인라인 스타일을 직접 수정 하는 방식
CSS는 여러 요소에 공통 스타일을 정의하고 적용하는 방식

 

📌 참고로, 자주 혼동되는 것

개념	설명
.className	전체 클래스 문자열을 가져오거나 설정
.classList	클래스 하나하나를 배열처럼 다룰 수 있는 객체
.style	요소의 인라인 스타일을 조작하는 객체
<style> 태그	HTML 문서 내에서 CSS를 정의하는 방식
.css 파일	외부 스타일시트 파일로 CSS를 분리하는 방식