📝 오늘 한 것

1. DOM / 노드 트리 / 요소 선택 / 요소의 생성, 수정 및 삭제 / addEventListener() / 이벤트 리스너(핸들러) / 이벤트 객체의 속성 - target, currentTarget / 이벤트 캡쳐링 / 이벤트 버블링 / 이벤트 위임 / event.stopPropagation

📖 학습 자료

1. 사전 학습 가이드 STEP 4 (DOM Introduction ~ Events)

2. MDN 사이트

📚 배운 것

DOM

---

1. 의미와 구조

• DOM(Document Object Model) : HTML 문서를 위한 프로그래밍 인터페이스

💡 DOM ≠ HTML

• HTML : 브라우저가 화면을 그리기 위한 초기 설계도
• 브라우저가 HTML을 이용해 화면을 그림
• DOM : 실제로 화면에 표현된 것
• 자바스크립트를 이용해 DOM에 접근해 화면 조종 가능

→ 즉, DOM을 통해 화면을 수정해도 HTML 문서 자체가 수정되지는 않음

• DOM의 트리 구조 (노드 트리)

💡 node와 element 비교 (node ⊃ element)

• node(노드) : DOM의 계층 구조를 이루는 하나하나의 단위
  ex. < head >, < body >, < a >, text...
• element(요소) : tag로 적은 노드
  ex. < div > (o), text (x)

2. 요소 선택

자바스크립트를 이용하여 DOM에 접근해 요소를 선택하는 방법

1) CSS 선택자 이용

(1) querySelector

• CSS 선택자와 일치하는 '첫 번째 요소' 선택

document.querySelecotr('CSS 선택자');

(2) querySelectorAll

• CSS 선택자와 일치하는 '모든 요소' 선택
• 유사 배열 형태 → 각 요소에는 'index'로 접근 가능, for 반복문 사용 가능, length 속성 있음

const foo = document.querySelectorAll('CSS 선택자');

foo[2].textContent = 'I\'m hungry.';

for (var i = 0; i < foo.length; i++) {
  foo[i].style.backgroundColor = 'red';
}

2) 그 외 방법들

(1) id 이름 이용

• id 자체가 고유한 값이므로 선택되는 요소 또한 하나이다

document.getElementById('id 이름');

(2) class 이름 / tag 이름 이용

• class 이름, tag 이름과 일치하는 '모든 요소' 선택
• 유사 배열 형태 → 각 요소에는 'index'로 접근 가능, for 반복문 사용 가능, length 속성 있음

document.getElementsByClassName('class 이름');
document.getElementByTagName('tag 이름');

3) 선택한 요소의 부모 / 형제 요소 선택하기

(1) 선택한 요소의 부모 요소 선택

var foo = document.querySelector('CSS 선택자');
foo.parentElement; // 부모 요소 선택

(2) 선택한 요소의 (전/후) 형제 요소 선택

var foo = document.querySelector('CSS 선택자');
foo.previousElementSibiling; // 이전 형제 요소 선택
foo.nextElementSibling; // 다음 형제 요소 선택

(3) 선택한 요소의 자식 요소 선택

• 선택한 요소의 '모든 자식 요소' 선택
• 유사 배열 형태 → 각 자식 요소에는 'index'로 접근 가능, for 반복문 사용 가능, length 속성 있음

var foo = document.querySelector('CSS 선택자');
foo.children; / 모든 자식 요소 선택

3. 요소의 생성, 수정 및 삭제

1) 선택한 요소에 class 추가 및 삭제

classList

var foo = document.querySelector('CSS 선택자');
foo.classList.add('추가할 class 이름');
foo.classList.remove('삭제할 class 이름');
foo.classList.toggle('class 이름'); // 없으면 추가, 있으면 삭제
foo.classList.item(class의 index); // 해당 인덱스의 클래스가 무엇인지
foo.classList.contains('class 이름'); // 해당 클래스가 있는지 알려줌
foo.classList.replace('대체될 class', '대체할 class')

2) 새로운 DOM 요소 생성, 수정 및 삭제

var google = document.createElement('a');
// <a> 요소 생성

google.setAttribute('href', 'http://google.com');
// <a> 요소의 속성과 속성값 추가

var ul = document.querySelector('CSS 선택자');
// <a> 요소를 추가하고 싶은 위치의 부모 요소 선택

ul.appendChild(google);
// 선택한 요소의 마지막 자식 요소로 <a> 요소 추가

google.textContent = 'google'; // <a> 요소에 텍스트 추가
google.style.color = 'blue'; // <a> 요소 스타일 수정 

google.remove(); // <a> 요소 삭제

💡 createElement가 for 반복문의 안/밖 어디에 있는가?

  const something = document.createElement("p");

  for (let i = 0; i < 5; i++) {
    something.textContent = i;
    document.body.appendChild(something);
  }
  // 4

→ < p > 요소가 for 반복문 밖에 이미 떡하니 생성되었기 때문에 for 반복문을 실행함에 따라 < p > 요소의 텍스트 값이 바뀔 뿐이다
(< p >의 위치는 i = 0 일 때 처음 문서의 끝에 추가되고, 이후로는 변화x)

  for (let i = 0; i < 5; i++) {
    const something = document.createElement("p");
    something.textContent = i;
    document.body.appendChild(something);
  }
  // 0
  // 1
  // 2
  // 3
  // 4

→ < p > 요소가 for 반복문 안에 정의되어 있기 때문에 for 반복문을 실행함에 따라 매번 새로이 생성된 < p > 요소에 각각의 텍스트 값이 설정되고 문서의 마지막에 추가된다

3) 요소 안에 포함된 HTML 읽어오기 및 설정

• 요소의 HTML 콘텐츠 읽어오기

요소.indexHTML;

• 요소의 콘텐츠 대체하기
  새로운 내용이 기존 내용을 아예 대체한다

요소.indexHTML = '새로운 내용';
document.body.indexHTML = ''; // 문서 전체 내용 삭제

💡 innerHTML / innerText / textContent 비교 (innerHTML, innerText, textContent 차이점 참고)

• innerHTML : 해당 요소의 HTML, XML / 읽어오기 및 설정 가능
• innerText : 사용자에게 '보여지는' 텍스트 값 / 읽어오기 및 설정 가능
• textContent : < script >나 < style > 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값 / 읽어오기 및 설정 가능

cf. innerHTML과 innerText는 '요소'의 속성이고, textContent는 '노드'의 속성이다

cf. createElement VS innerHTML 중 무엇을 쓸까?

• 한번 만든 후에 다시 변경할 거라면, createElement 사용
• 한번 만든 후에 다시 변경할 일이 없다면, innerHTML 사용

4) 요소의 style 확인 및 설정

(1) 요소의 style 확인

• 인라인 스타일만 확인 가능

요소.style.확인하고자 하는 CSS 속성 이름;

• 내부 스타일시트 혹은 외부 스타일시트에 정의된 style 확인 가능

요소.getComputedStyle.확인하고자 하는 CSS 속성 이름;

(2) 요소의 style 설정 및 변경

요소.style.설정하고 싶은 CSS 속성 이름 = '~속성값';

※ 주의!
getComputedStyle은 오로지 style 읽기 전용이기 때문에 style을 설정하거나 변경할 수는 없다.

4. 이벤트(Events) 등록

1) addEventListener()

(1) 구문

• 요소에 지정된 유형의 이벤트가 발생했을 때 함수가 실행된다

요소.addEventListener('이벤트 유형', 이벤트 리스너)

• 예시

요소.addEventListener('mouseover', function() {
  alert(요소.textContent);
});

※ 원래 addEventListener()는 '이벤트를 지원하는 모든 객체'를 대상으로 하지만, 여기선 이해를 위해 '요소'라고 표현했음

(2) 매개변수

• 이벤트 유형

  감지하고자 하는 이벤트 이름 ex) mouseover, click, dbclick...

• 이벤트 리스너(=이벤트 핸들러)

  이벤트 발생이 감지된 후 실행할 내용을 담은 '함수'

(3) 이벤트 객체

'이벤트 리스너'의 매개변수
발생한 이벤트에 대한 상세 정보가 담겨 있다

💡 이벤트 객체의 속성

• target

  실제로 이벤트가 발생한 타깃 요소
  캡쳐링과 버블링 단계에서 변하지 않는다

• currentTarget

  현재 요소로, 현재 실행 중인 리스너가 할당된 요소

📌 활용 예시 1

요소.addEventListener('click', function(ev) {
  ev.currentTarget.innerHTML = '<div>123</div>';
});

📌 활용 예시 2

두 개의 button 부분을 클릭했을 때만 경고창이 뜨도록 만들어라

<!-- HTML -->
<div>
  <p>이 버튼을 누르면 경고창이 뜹니다.</p>
  <button>경고 1 버튼</button>
  <button>경고 2 버튼</button>
</div>

💡 주의 💡

이벤트 등록은 DOM 요소 단위로 이루어지기 때문에 한번에 유사 배열 형태의 요소'들'에는 이벤트를 등록할 수 없다. 다시 말해서,

const buttons = document.querySelectorAll('button');

buttons.addEventListener('click', function () {
  alert('경고!!');
});

라고 할 수 없고,

const button1 = document.querySelectorAll('button')[0];
const button2 = document.querySelectorAll('button')[1];

button1.addEventsListener('click', function () {
  alert('경고!!');
});
button2.addEventsListener('click', function () {
  alert('경고!!');
});

라고 해야 한다.
그러나 이것은 중복된 부분이 많기 때문에 좀 더 코드를 줄이기 위한 방법을 구한다면,

🔎 최종 답안 🔎

const div = document.querySelector('div'); // div 요소 선택

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'P') {
    return; // p 태그를 눌렀을 땐 경고창이 뜨지 않도록
  }

  alert('경고!!')
});

※ tagName : 요소(element)의 읽기 전용 속성, 태그 명이 명시된 문자열을 가져온다

2) 이벤트의 동작 원리

이벤트 입문 MDN 사이트 / 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지 / ✔ 버블링과 캡처링 / ✔ 이벤트 버블링, 캡쳐, 이벤트 취소하기 참고

부모 요소를 가지고 있는 요소에서 이벤트가 발생했을 때 브라우저는 두 가지 다른 단계를 실행한다

(1) 이벤트 캡쳐링

• 부모 → 자식 방향으로 이벤트 전파

• 실제로 선택된 요소의 상위 요소 중 이벤트 리스너가 있는지를 검사하고, 있다면 그 요소부터 코드를 실행한다. 그 후 그 하위 요소로 이동하면서 실제로 선택된 요소에 닿을 때까지 계속한다.

요소.addEventListener('이벤트 유형', function () {
  // 이벤트 발생 시 실행하고픈 내용
}, true);

(2) 이벤트 버블링

• 자식 → 부모 방향으로 이벤트 전파

• 실제로 선택된 요소에 이벤트 리스너가 있는지를 검사하고, 있다면 그 요소부터 코드를 실행한다. 그 후 그 상위 요소로 이동하면서 가장 상위 요소인 < html > 요소에 닿을 때까지 계속한다.

요소.addEventListener('이벤트 유형', function () {
   // 이벤트 발생 시 실행하고픈 내용
}, false); // false가 기본값이다

• 이벤트 위임 (Event Delegation)

  이벤트 버블링은 다수의 자식 요소들 중 하나만 선택했을 때도 부모 요소에서 코드를 실행할 수 있도록 한다. 즉, 모든 자식 요소에 개별적으로 이벤트 리스너를 설정할 필요가 없다. 이벤트 리스너를 부모 요소에 설정하면 자식 요소들에서 일어난 이벤트가 부모 요소에게까지 올라오게 할 수 있다.

💡 하나의 요소에 캡쳐링과 버블링, 두 타입의 이벤트 리스너가 모두 존재한다면?

캡쳐링이 먼저 실행되고, 이어서 버블링이 실행된다.

(3) 이벤트 전파를 막는 방법 (이벤트 차단) 🔥

ev.stopPropagation();

• 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막는다. (stopPropagation()이 설정된 요소에 할당되어 있는 이벤트 리스너까지는 실행된다.)
• 이벤트가 상위 혹은 하위로 전파되지 않도록 중단한다.

🙋‍♀️ 질문

1. 사전학습 가이드 STEP 4 Events 마지막 예제에서 #c를 눌렀을 때 왜 console.log가 저렇게 찍히는지 모르겠다 → 이해했다 (210909)

✨ 내일 할 것

1. 사전 학습 가이드 STEP 4 (Background Changer, Carousel)

2. 프로그래머스 알고리즘 문제 풀이 및 오답 분석