자바스크립트 공부하기 - DOM, 메서드

아이고 끙끙 어렵다 어려워

한 발자국이 험난한 개발자로의 길.. 

 

---

자바스크립트에서 DOM (Document Object Model)은 웹 페이지의 구조를 다루는 방법이야.

간단하게 말하자면, DOM은 웹 페이지를 자바스크립트로 제어하고 수정할 수 있게 해주는 창구 같은 거야.

 

HTML 문서가 있으면, DOM은 그 문서의 각 요소(제목, 단락, 버튼 등)를 객체로 변환하고,

자바스크립트는 이 객체를 조작해서 페이지의 내용이나 스타일을 변경할 수 있어.

---

💡자바스크립트에서 선택자를 사용할 때, 괄호 안에 작은 따옴표(' ')나 큰 따옴표(" ")는 꼭 써야 한다.

   두 가지 모두 괜찮고, 중요한 건 선택자 문자열을 감싸야 한다는 점 !

   즉, 아이디나 클래스를 선택할 때는 다음처럼 사용합니다:

• getElementById()나 querySelector() 같은 메소드에서 아이디를 사용할 때는 #을 붙이고, 그 뒤에 작은 따옴표나 큰 따옴표를 사용합니다. 예를 들어, getElementById('myId') 또는 querySelector('#myId')처럼요.
• 클래스 선택자는 .을 사용하고 마찬가지로 작은 따옴표나 큰 따옴표를 써야 합니다. 예를 들어, querySelector('.myClass')처럼요.

간단히 말해서, 선택자를 사용할 때는 작은 따옴표나 큰 따옴표는 항상 필요하고, 아이디는 #, 클래스는 .을 앞에 붙여야 합니다. getElementById()는 # 없이 아이디만 넣어도 됩니다, 예를 들어 getElementById('myId')처럼요.

---

 

DOM 요소를 선택하는 메서드

 

document.querySelector

DOM으로 요소 찾기 자바스크립트에서는 웹 페이지의 각 부분을 DOM을 통해 찾을 수 있어. 예를 들어, <h1> 요소를 찾고 싶다면 이렇게 할 수 있어 

> 같은 요소 선택시 먼저 있는 것을 선택 함 (ex p태그가 여러개 일 때 제일 먼저 p태그)

let heading = document.querySelector('h1'); 

    > 이 코드에서 document.querySelector()는 웹 페이지에서 h1 태그를 찾는 거야. 이때 찾은 요소는 heading 변수에 저장돼.

 

querySelectorAll(“”)

document.querySelectorAll()에서는 여러 가지 태그나 선택자를 한 번에 넣을 수 있어요!
이를 통해 여러 요소를 한꺼번에 선택할 수 있죠. 😊

✅ 여러 태그나 선택자를 넣는 방법
여러 가지 태그나 클래스를 쉼표(,)로 구분해서 넣을 수 있어요. 

 

getElementsByClassName() >클래스 모두 선택 (. 안써도 됌)

getElementById() > 아이디 선택 (#안써도 됌)

---

선택한 요소의 속성에 접근하는 메서드

접근이라 함은. 크게 두가지 ! 읽기와(출력) 수정(변경값)

 

 *textContent*

찾은 요소 수정하기 이제 찾은 요소를 수정할 수 있어. 예를 들어, h1 태그에 있는 텍스트를 바꿀 수 있어

heading.textContent = '반갑습니다!';

   > 코드는 h1 태그 안에 있는 텍스트를 "반갑습니다!"로 바꿔.

 

>>  textContent는 텍스트를 가져오는 역할도 하지만, 텍스트를 수정하는 역할도 해!
즉, 읽기도 가능하고 수정도 가능해! 🎯✨

*보여주는 역할을 하는 기능과 유사한 innerText와의 차이

textContent → HTML에 있는 모든 텍스트(공백 포함) 가져옴 
innerText → 화면에 보이는 텍스트만 가져옴

👉 그래서 보이지 않는 텍스트까지 다 포함해서 가져오고 싶다면 textContent를 쓰는 게 좋아!
👉 반대로, 화면에 보이는 텍스트만 필요하다면 innerText가 적절해!

이제 차이를 확실히 알겠지? 😆

 

 

 *value*

- textContent와의 차이점 :

value는 사용자가 화면이 만들어진 그 이후에 작성 한 그 내용에 . 직접 입력한 그 값에 접근하고 싶을 때

그리고 읽기 (출력)과 수정 둘 다 가능.

 

- 폼 요소(<input>, <textarea>, <select>)의 값을 가져오거나 변경할 때 사용돼.

 

📌 실무 TIP:

• 사용자 입력값을 읽거나 수정할 때 사용
• innerHTML이나 textContent는 input 태그에서는 사용 불가! value를 써야 함

 

*innerHTML*

innerHTML은 HTML 요소 안에 들어있는 내용을 가져오거나 수정하는 속성이야. 예를 들어, 웹페이지에서 어떤 요소 안에 들어있는 텍스트나 HTML 구조를 변경할 수 있게 해.

 

innerHTML과 textContext의 차이 

  1.  innerHTML → HTML 구조 유지, 공백 압축됨 / textContent → HTML 태그는 제거되지만 공백 유지됨

🔹 innerHTML 출력 결과:

<div id="test">
    안녕      세계!   <b>굵게</b>
</div>

<script>
    console.log(document.getElementById("test").innerHTML);
</script>

"안녕 세계! <b>굵게</b>"​

✅ 공백이 하나로 압축되고, <b> 태그 유지됨.

 

🔹 innerHTML 출력 결과:

<div id="test">
    안녕      세계!   <b>굵게</b>
</div>

<script>
    console.log(document.getElementById("test").textContent);
</script>

"    안녕      세계!   굵게"

✅ 모든 공백과 줄 바꿈이 그대로 유지됨.
✅ HTML 태그는 제거되고 텍스트만 남음.

 

 

   2.

✅ 예제

<div id="myDiv"><b>안녕하세요!</b></div>
<script>
    console.log(document.getElementById("myDiv").innerHTML);  // "<b>안녕하세요!</b>"
    console.log(document.getElementById("myDiv").textContent); // "안녕하세요!"
</script>

• innerHTML → HTML 태그 포함
• textContent → HTML 태그 제외, 순수 텍스트만 반환

👉 실무에서 사용할 때 주의할 점:

• textContent를 쓰면 공백이 그대로 유지되기 때문에 코드에서 예상보다 길게 보일 수도 있어!
• innerHTML은 공백을 자동으로 정리하지만, 보안 문제(XSS 공격) 때문에 사용자 입력에는 적절하지 않음.

📌 실무 TIP:

• 사용자 입력을 받을 때는 **textContent**를 쓰는 게 더 안전해! (innerHTML은 보안상 위험, XSS 공격 가능성 있음)

 

 

💟*getAttribute() - 속성 값 가져오기*

• element.getAttribute("속성명")
• 특정 속성 값을 가져올 때 사용

쉽게 말하면, HTML 요소에 있는 속성의 값을 가져오는 역할을 해!

 

📌 getAttribute()는 언제 사용할까?

👉 특정 HTML 요소의 속성 값이 무엇인지 알고 싶을 때 사용해.
👉 id, href, src, alt, data-* 같은 속성 값을 가져올 수 있어!

👉HTML에 설정된 원래 값만 가져오고, 변경된 값은 반영되지 않음!

 

<img id="myImage" src="image.jpg" alt="이미지 설명">
<script>
    let img = document.getElementById("myImage");
    console.log(img.getAttribute("src"));  // "image.jpg"
    console.log(img.getAttribute("alt"));  // "이미지 설명"
</script>

🔹 getAttribute("src") → image.jpg
🔹 getAttribute("alt") → 이미지 설명

 

💟*setAttribute() - 속성 값 설정*

• element.setAttribute("속성명", "값")
• 기존 속성을 변경하거나 새로운 속성을 추가할 때 사용

<img id="myImage" src="image.jpg" alt="이미지 설명">
<script>
    let img = document.getElementById("myImage");
    img.setAttribute("src", "new-image.jpg");  // 이미지 변경
    img.setAttribute("alt", "새로운 이미지 설명"); // 대체 텍스트 변경
</script>

🔹 setAttribute("src", "new-image.jpg") → src 속성 변경됨
🔹 setAttribute("alt", "새로운 이미지 설명") → alt 속성 변경됨

---

새로운 HTML 요소(노드)를 생성하는 메서드

document.createElement('태그명')은 새로운 HTML 요소(노드)를 생성하는 메서드야.

하지만 생성만 할 뿐, 아직 화면에는 추가되지 않아.

> 따라서 appendChild 또는 insertBefore 같은 메서드를 사용해서 실제 DOM에 추가해야 해.

const newDiv = document.createElement('div'); // <div> 요소 생성
newDiv.textContent = "안녕하세요!"; // 요소 안에 텍스트 추가
document.body.appendChild(newDiv); // 생성한 요소를 실제 화면에 추가

 

🖥️ append**랑 **appendChild**는 둘 다 HTML 요소를 추가하는 기능을 하지만, 차이가 있어!

append()appendChild()

	append	appendChild
📌 추가할 수 있는 것	텍스트 + 요소 (둘 다 가능)	요소만 가능
🔄 여러 개 추가 가능?	가능 (여러 요소, 텍스트 동시에 추가 가능)	❌ 불가능 (한 번에 하나씩만 추가 가능)
🎈 반환값	없음 (undefined)	추가된 요소 반환
⚠ 브라우저 지원	최신 브라우저만 지원	오래된 브라우저도 지원

>>> "텍스트를 추가할 수 있다"는 건, HTML 요소뿐만 아니라 문자열(텍스트)도 함께 넣을 수 있다는 의미

 

🔹 appendChild()는 요소만 추가할 수 있어

const box = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = "안녕하세요!";
box.appendChild(newDiv);  // ✅ 요소 추가 가능
box.appendChild("추가할 텍스트");  // ❌ 오류 발생! (텍스트 직접 추가 불가능)

 

🔹 append()는 요소 + 텍스트 둘 다 추가할 수 있어!

const box = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = "안녕하세요!";
box.append(newDiv, " 추가할 텍스트");  // ✅ 요소 + 텍스트 동시에 추가 가능!

→ append()는 "추가할 텍스트"처럼 그냥 텍스트도 추가할 수 있어!
→ "추가할 텍스트"는 <div> 안이 아니라, box의 자식 요소로 직접 추가돼!

 

✨ 결과 화면 예시

appendChild('')

<div id="container">
  <div>안녕하세요!</div>  <!-- ✅ 요소만 추가됨 -->
</div>

append('')

<div id="container">
  <div>안녕하세요!</div> 추가할 텍스트  <!-- ✅ 요소 + 텍스트 함께 추가됨 -->
</div>

 

텍스트가 <div> 안으로 들어가지 않고 옆에 추가되는 이유는, append()가 부모 요소의 자식으로 텍스트를 추가하기 때문이야.

HTML에서 텍스트 노드는 자동으로 인식되기 때문에, 따로 <p> 같은 태그를 만들지 않아도 브라우저가 바로 표시해 줘.

Q아무튼 쉽게 말하면, 자동으로 글로 인식이 된다는거지 ?

A맞아! 😄 자동으로 글로 인식된다는 말이 정확해! 📝

 

 

아하, 이제 경로를 어떻게 설정해야 하는지에 대해 궁금한 거구나! 😊
**append()**와 **appendChild()**를 사용할 때, 어디에 추가할 것인지를 지정하는 "경로"를 잘 설정해야 해. 이 경로는 어떤 요소에 추가할지를 결정하는 부분인데, 간단히 말해서 대상 요소를 지정하는 거야.

📌 append()와 appendChild()의 사용법

append()와 appendChild()는 모두 어떤 요소를 다른 요소에 추가할 때 사용해.

1. append() 사용법:

• **append()**는 여러 개의 자식 요소를 추가할 수 있어. **append()**는 부모 요소에 대해 호출해야 해.
• **append()**는 부모 요소에 대해 **"자식 요소"**를 추가하는 메서드야.
• 부모 요소가 무엇인지 이해하는 게 중요해! 부모 요소는, 예를 들어 **<div id="container">**처럼 다른 요소를 포함할 수 있는 상위 요소야.

예시를 통해 이해해볼게!

1. 부모 요소가 있고 그 안에 자식 요소를 추가한다고 상상해 보자:

<div id="container">
  <p>기존 텍스트</p>
</div>

위에서 **<div id="container">**가 부모 요소야. 이 안에 자식 요소들(예를 들어, <p>, <div> 등)을 추가하는 거야.

 

2. 자바스크립트 코드로 자식 요소를 추가하는 방법

// 1. 부모 요소를 선택
const box = document.getElementById('container');  // 'container'라는 id를 가진 요소가 부모 요소야

// 2. 자식 요소 생성
const newDiv = document.createElement('div');  // 새로운 div 요소 생성
newDiv.textContent = "추가된 새로운 div";  // div 안에 텍스트 추가

// 3. 부모 요소에 자식 요소 추가
box.append(newDiv);  // 부모 요소인 'container'에 newDiv를 추가

👀 중요한 포인트 2: append()는 여러 개의 자식 요소를 한 번에 추가할 수 있다

• **append()**는 여러 개의 자식 요소나 텍스트를 한 번에 추가할 수 있어.
• 여러 자식 요소를 한 번에 추가할 수 있다는 뜻은, 아래처럼 한 번에 여러 개의 항목을 부모 요소에 넣을 수 있다는 거야.

예시 2: 여러 자식 요소 한 번에 추가하기

const box = document.getElementById('container');  // 부모 요소

// 자식 요소들 만들기
const newDiv1 = document.createElement('div');
newDiv1.textContent = "첫 번째 div";

const newDiv2 = document.createElement('div');
newDiv2.textContent = "두 번째 div";

// 여러 개의 자식 요소를 한 번에 추가
box.append(newDiv1, newDiv2);  // 'container'라는 부모 요소에 두 개의 div를 추가

결과는 이렇게 될 거야:

 

>

<div id="container">
  <p>기존 텍스트</p>
  <div>첫 번째 div</div>
  <div>두 번째 div</div>
</div>

결론 ! append 나 appendChild 모두 경로는 부모 요소 > 자식 요소 라는 구조로 생각할 수 있어. 😊

 

 

공부하며 궁금했던 점.
경로를 설정할 때, 경로가 길면 (ex: body안에 container가 있고 그 안에 div가 있고 또 그 안에 div가 있을 땐,

경로를 추가할 때 쭈욱 길어지는걸까 .. ? 

 

> NO !

 

경로가 길어진다고 document.body.container.innerDiv.append(...) 이런 식으로 쓸 필요는 없어~!
그냥 한 단계씩 변수에 저장하면서 작업하면 돼.

---

요소에 class를 제어하는 classList

 

자바스크립트 공부하기 - DOM part의 classList

 

---

 CSS 선택자가 뭐야?

CSS 선택자는 HTML에서 특정한 요소(태그)를 선택해서 스타일(색, 크기, 위치 등)을 적용할 수 있도록 하는 거야!

예를 들어, 우리 집에서 강아지만 선택해서 간식을 주고 싶다면?

 

Q. 그래서 자바스크립트를 할때, 쿼리셀렉터같은 부분에 ("") 여기 이 부분에 css선택자를 넣는다는 건, html의 일부 태그를 가져 오는 건데, 그게 css에서 지정할 때 처럼 class는 .을 붙이고 id는 #을 붙이는 이런 방법 때문에 그렇게 불리는거야 ?

A. 정확해! 🎯✨
자바스크립트에서 document.querySelector() 같은 함수에서 ("") 안에 CSS 선택자를 넣는 이유는, 
CSS에서 요소를 선택하는 방식과 동일하게  HTML 요소를 찾기 위해서야!

 

📌 왜 CSS 선택자 방식을 그대로 사용할까?

자바스크립트에서 HTML 요소를 찾을 때 CSS에서 스타일을 지정하는 방식과 같다면, 개발자가 더 직관적으로 이해할 수 있기 때문이야!

👉 CSS에서 스타일을 적용할 때처럼, 자바스크립트에서도 같은 방식으로 요소를 찾을 수 있어! 😆🎉

---