[javascript] 요소의 텍스트·HTML 추출 및 변경 속성 (textContent, innerText, innerHTML, value)

요소의 텍스트 추출 및 수정

textContent

• 요소 내부의 모든 텍스트를 가져옴 (공백 포함, 숨겨진 요소 포함)
• HTML 태그는 무시되고 순수한 텍스트만 처리
• 스타일에 상관없이 숨겨진 텍스트도 포함해서 처리됨
• 장점 : 텍스트만 다루고 싶을 때, 보이지 않은 텍스트까지 포함하여 텍스트 추출 가능
• 사용 목적 : 전체 텍스트 가져오기/수정

// [문법]
// 텍스트 추출
요소.textContent;

// 텍스트 수정하기
요소.textContent = "텍스트값"

 

let el = document.querySelector("div");
let txt = el.textContent;
console.log(txt);

---

innerText

• 브라우저에서 실제로 화면에 보이는 텍스트만 가져오거나 수정
• HTML 태그는 무시되고 순수한 텍스트만 처리
• 스타일과 CSS 속성(예: display: none, visibility: hidden, opacity: 0)의 영향을 받음
• 브라우저 렌더링 엔진이 동작한 후에만 정확한 값을 얻을 수 있음
• 사용목적 : 보이는 텍스트 기준으로 제어할 때

// [문법]
// 텍스트 추출
요소.innerText;

// 텍스트 수정하기
요소.innerText = "텍스트값"

let el = document.querySelector("div");
let txt = el.innerText;
console.log(txt);

---

innerHTML

• HTML 구조까지 포함된 문자열을 가져오거나 수정
• 텍스트뿐만 아니라 태그까지 조작 가능
• 텍스트뿐만 아니라 하위 요소를 포함한 전체 구조를 변경 가능
• 구조 기준으로 접근하기 때문에 css 영향을 받지 않고 접근 및 수정 가능
• 사용 목적 : 태그 포함하여 조작할 때

// [문법]
// 텍스트 추출
요소.innerHTML;

// 텍스트 수정하기
요소.innerHTML = "HTML코드포함된텍스트"

let el = document.querySelector("div");
let txt = el.innerText;
console.log(txt);

 

 

---

value (입력 요소 전용)

• <input>, <textarea>, <select> 등의 폼 요소에서 텍스트를 가져오거나 수정할 때 사용
• 사용 목적 : 사용자 입력값 조작

// [문법]
// 텍스트 추출
입력요소.value;

// 텍스트 수정하기
입력요소.value = "텍스트값"

value 속성 요소 목록

요소	설명	예시
<input>	텍스트, 숫자, 날짜 등 여러 타입에서 사용자 입력값 저장	<input type="text" value="기본값">
<textarea>	여러 줄 입력값	<textarea>기본 텍스트</textarea> (JS에서는 .value로 접근)
<select>	드롭다운에서 선택된 옵션의 값	<select><option value="1">One</option></select>
<option>	각 옵션 항목에 설정된 값	<option value="A">Apple</option>
<button>	버튼의 값 (폼 전송 시 사용)	<button value="send">전송</button>
<input type="hidden">	사용자에게 보이지 않는 값	<input type="hidden" value="userId">