[e4] JS 실용 코드 스터디

1. .querySelector
   html 문서에서 어떤 요소(들)를 선택하기 위해 사용되는 메소드.

// ID를 이용하여 요소를 선택하는 예시
const myDiv = document.querySelector('#myDiv'); // #은 ID 선택자를 의미합니다.
console.log(myDiv); 

// 클래스를 이용하여 요소를 선택하는 예시
const myPara = document.querySelector('.myPara'); // .은 클래스 선택자를 의미합니다.
console.log(myPara); 

2. .addEventListner
   특정 html 요소에 이벤트를 등록하고, 이벤트가 일어났을 때 실행할 함수를 준비해둘 수 있는 메소드.

// element : html의 해당 요소
// event : 이벤트의 종류 ex) click
// listener : 이벤트 발생 시 실행될 함수를 지정하는 매개변수 이 함수를 이벤트 리스너, 핸들러라고 한다.
// option : 일반적으로는 생략. 객체로서의 이벤트 동작을 커스텀 한다고 한다.
element.addEventListener(event, listener[, options]);

3. .getElementById
   html의 특정 id를 가진 요소를 선택하는 선택자이며, 늘 가장 첫번째 id를 반환한다. document 객체에 속하는 메소드다.

<div id="myDiv">
  <p id="myPara">예시 문단</p>
</div>

const myDiv = document.getElementById('myDiv');
console.log(myDiv);
// id가 myDiv인 html 요소를 선택했고, JS에서는 출력을 실행했다.

4. .createElement
   아예 새로운 html 요소를 JS단에서 생성할 때 사용하는 메소드. document 객체에 속해있다. 동적으로 html 요소를 생성하고 웹에 추가할 수 있다.

// 새로운 <div> 요소를 생성합니다.
const newDiv = document.createElement('div');

// 생성한 <div> 요소에 텍스트 내용을 추가합니다.
newDiv.textContent = 'Hello World!';

// <div> 요소를 웹 페이지에 추가합니다.
document.body.appendChild(newDiv);

5. .appendChild
   nodeJS에서 제공되는 메소드. node에는 부모 - 자식 개념이 있는데, 이 경우 부모 노드에 자식 노드를 추가하는 메소드가 된다.

<div id="cardSpread">
  <!-- 여기에 자식 노드가 추가 -->
</div>

// 새로운 <p> 요소를 생성
const newCard = document.createElement('p');
newCard.textContent = 'New Title';

// 부모 노드인 <div> 요소를 선택
const cardSpread = document.getElementById('cardSpread');

// <p> 요소를 <div> 요소의 자식으로 추가
cardSpread.appendChild(newCard);