[웹개발강의] 자바스크립트로 HTML 요소 다루기 (id, class, input)

자바스크립트로 HTML 요소 다루기 (id, class, input)

---

1. HTML 요소 예시

<p id="test">기본 텍스트</p>

<div class="display">여기에 값이 표시됩니다</div>

<input type="text" id="username" placeholder="이름 입력">

---

 

2. 요소를 선택하는 방법

📌 id로 선택: getElementById()

const p = document.getElementById("test");

→ HTML에서 id="test"인 <p> 요소를 가져옵니다.

---

📌 class로 선택: querySelector() 또는 getElementsByClassName()

const div = document.querySelector(".display"); // 첫 번째 요소만
// 또는 여러 개를 모두 가져오려면:
const divs = document.getElementsByClassName("display");

---

📌 input 값을 가져오기: value 사용

const input = document.getElementById("username");
let name = input.value; // 입력한 값 읽기

---

3. 요소의 내용을 바꾸기

📌 텍스트를 넣기

document.getElementById("test").textContent = "바뀐 내용입니다!";

→ <p>의 텍스트가 변경됩니다.

---

📌 class 요소 안의 내용을 바꾸기

document.querySelector(".display").textContent = "결과를 여기에 표시";

---

4. input 요소에서 값을 읽고 다른 요소에 출력해보기

<input type="text" id="username" placeholder="이름 입력">
<button onclick="showName()">확인</button>
<p id="result"></p>

function showName() {
  const name = document.getElementById("username").value;
  document.getElementById("result").textContent = "안녕하세요, " + name + "님!";
}

📌 실행 예시:

• username에 철수를 입력하고 버튼 클릭 → 안녕하세요, 철수님! 이 출력됩니다.

---

 요약표

목적코드

id로 요소 선택	getElementById("id이름")
class로 요소 선택	querySelector(".클래스명")
input 값 읽기	input.value
텍스트 변경	요소.textContent = "내용"
HTML 내용 변경	요소.innerHTML = "<b>굵게</b>"

---

---

input 요소에 값을 넣을 때와,
innerHTML과 textContent의 차이점은 자바스크립트를 제대로 이해하기 위해 꼭 알아야 하는 핵심 개념

---

 1. input 요소의 값을 “넣는” 방법 (쓰기)

📌 예시 HTML

<input type="text" id="username">

📌 자바스크립트로 값을 넣기 (set)

document.getElementById("username").value = "홍길동";

📌 실행 결과:
→ input 칸에 자동으로 "홍길동"이라는 텍스트가 입력됩니다.

---

 2. input 요소의 값을 “불러오기” (읽기)

const name = document.getElementById("username").value;

→ 사용자가 입력한 값을 변수에 저장할 수 있습니다.

---

 3. innerHTML vs textContent 차이

항목innerHTMLtextContent

설명	HTML 태그 포함	텍스트만
태그 처리	태그를 해석함	태그를 글자 그대로 출력함
보안 이슈	XSS(스크립트 삽입) 위험 있음	없음
사용 목적	태그가 들어간 구조 표시	단순한 글자 표시

---

📌 비교 예제

<p id="demo"></p>

// 1. innerHTML 사용
document.getElementById("demo").innerHTML = "<b>굵은 글씨</b>";

// 2. textContent 사용
document.getElementById("demo").textContent = "<b>굵은 글씨</b>";

📌 결과:

• innerHTML → 굵은 글씨 (실제로 굵게 보임)
• textContent → <b>굵은 글씨</b> (그대로 글자로 보임)

---

 언제 어떤 걸 써야 하나요?

목적추천 속성

HTML 태그 포함해서 넣을 때	innerHTML
안전하게 텍스트만 넣을 때	textContent
사용자 입력 등 외부 값 넣을 때	textContent 또는 .value (input)

---

✏️ 정리

• input.value → 입력 값 읽거나 쓰기
• innerHTML → 태그까지 해석해서 HTML 구조를 바꾸고 싶을 때
• textContent → 안전하게 텍스트만 넣고 싶을 때