[JS] 인터랙티브 자바스크립트

id로 태그 선택하기

document.getElementById() 라는 내제된 객체 document에 getElementById()라는 메소드를 사용해줘야 함.

const myTag = document.getElementById('내 아이디 이름')

• 만약 존재하지 않는 id를 선택하면, undefined가 아니라null이 출력됨.

class로 태그 선택하기

document.getElementsByClassName('내 클래스 이름') 라는 내제된 객체 document에 getElementsByClassName()라는 메소드를 사용해줘야 함.

const myTags = document.getElementsByClassName('내 클래스 이름')

• 해당하는 모든 요소들이 대괄호로 감싸져서 배열의 형태로 선택됨.
• 그러나 사실 배열의 메소드는 사용할 수 없음. 그러나 LENGTH 프로퍼티가 있고, 인덱스 접근하는 등은 가능. (유사배열. Array-Like Object)
• 배열의 순서는 그냥 코드 위에서부터 차례대로임. 깊이 상관없음.
• 태그가 하나밖에 없는 클래스를 선택하더라도 collection 형태로 출력되기 때문에 해당 태그를 선택하려면 0번 인덱스를 선택해줘야함. ( console.log(myTags[0]) )
• 만약 존재하지 않는 class를 선택하면, HTMLColection [] (비어있는 배열형태)가 출력됨.

CSS 선택자로 태그 선택하기 (querySelector())

• id

document.querySelector('#myNumber') document.getElementById('myNumber')

• class 요소 1개

document.querySelector('.color-btn') document.getElementsByClassName('color-btn')[0]

• class 모든 요소

document.querySelectorAll('.color-btn') → Nodelist Nodelist 로 출력됨document.getElementsByClassName('color-btn') → HTMLColection 로 출력됨

안에 들어가는 내용은 모두 같음.

• 추가 정보
  • 보통 메소드 이름이 더 짧고 id와 class를 같이 사용할 수 있어서 querySelector을 조금 더 선호함.
  • document.querySelectorAll('li') 같이 태그를 선택해도 본문의 li 태그들이 담긴 유사 배열을 리턴할 수 있음.
    • console.log(document.querySelector('#list li')); 이렇게 css에서 처럼 부모요소 자식요소 한번에 설정할 수도 있음

이벤트와 버튼 클릭

const btn = document.querySelector('#myBtn');

// 이벤트 핸들링
btn.onclick = function() { // 이벤트 핸들러(Event Handler)
	console.log('Hello!');
};

btn이라는 변수에 onclick 프로퍼티를 할당해주고, 거기에 특정 함수를 할당해주는 방식.

브라우저

• 우리가 사용하는 브라우저는 window라는 객체로 다룰 수 있음. console(window) 해보면 아주 많은 프로퍼티들 확인할 수 있고, console(window.innerWidth); 이런 식으로 사용도 가능함.
• 전역객체. 브라우저 안에 모든 내장 객체, 내장 함수들이 모두 윈도우 객체에 속해있음. console같은 객체도 이러한 전역객체 중 하나라서 원래는 window.console.log() 이런 식으로 사용해야 하지만 윈도우 객체의 경우 생략이 가능함.

DOM (Document Object Model) - 문서 객체 모델

• 웹 브라우저 안에 나타나는 콘텐츠 부분을 웹 페이지 or 웹 문서라고 부름.
• DOM- 웹페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것. Document 객체를 통해 이 웹 문서의 최상단 객체로 진입할 수 있음.
• document의 타입은 object이지만, console.log(document) 로 출력하면 html 태그 형태로 출력됨. 따라서 각 객체 형태의 프로퍼티들을 확인하고 싶으면 console.dir(document)로 작성
• 이 DOM 개념에 따르면 문서 내의 모든 태그들은 다 각각의 객체.

const myTag = document.querySelector('#list-1');

console.log(myTag);

// 형제 요소 노드
console.log(myTag.previousElementSibling);
console.log(myTag.nextElementSibling);

// 부모 요소 노드
console.log(myTag.parentElement);

// 자식 요소 노드
console.log(myTag.children[1]);
console.log(myTag.firstElementChild);
console.log(myTag.lastElementChild);

HTML 속성 다루기

HTML 속성 중 요소 노드의 프로퍼티로 생성되지는 않음.

예를들어 ol 태그에 href 태그를 추가하는 건 HTML표준이 아님. 이렇 경우 비표준 속성에 접근할 수 있는 방법이 필요함.

// elem.getAttribute('속성'): 속성 접근하기
console.log(item.getAttribute('class'));

// elem.setAttribute('속성', '값'): 속성 추가(수정)하기
tomorrow.setAttribute('class', 'list'); 

// elem.removeAttribute('속성'): 속성 제거하기
tomorrow.removeAttribute('class');

표준, 비표준 속성에 모두 접근 가능.

이벤트 살펴보기

이벤트 핸들러 등록하기

Element.addEventListener('type', 'handler')

이벤트 핸들러 삭제하기

Element.removeEventListner('type', 'handler')

이벤트 객체

웹페이지에서 이벤트가 발생하면 관련된 정보를 담은 이벤트 객체가 만들어지고 이벤트 핸들러의 첫번째 파라미터로 전달됨.

이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다름

// 이벤트 객체 (Event Object)
const myInput = document.querySelector('#myInput');
const myBtn = document.querySelector('#myBtn');

function printEvent(event) {
  console.log(event);  
		// 이렇게 하면 첫번째 파라미터인 EVENT에 담긴 이벤트 정보를 프로퍼티 형태로 확인할 수 있음
		// 해당 정보를 콘솔로 확인하면서 아래같이 필요한 정보 쓰면 됨.
	event.target.style.color = 'red';
}

myInput.addEventListener('keydown', printEvent);
myBtn.addEventListener('click', printEvent);

이벤트 버블링

• 이벤트 버블링
  • 자식 요소에서 이벤트가 발생했을 때, 발생한 요소에서 존재하는 핸들러만 작동하는 것이 아니라 점점 커지는 버블처럼 그 상위요소에 지정된 핸들러까지 함께 작동하는 것
• 버블링을 멈추는 법: event.stopPropagation() (아무런 값도 전달할 필요 x)
  • 그러나 버블링이 막혀있는 구간이 존재하면 상위 요소에서 큰 범위로 지정하는 이벤드 핸들링도 그 구간에서 막히므로 꼭 필요하지 않다면 사용 지양할 것.

✅ DOM 이벤트에서 정의하는 이벤트 흐름 3가지
1. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계

원래는 캡쳐링 단계에서는 이벤트를 발생시키지 않지만, 특수한 경우 캡쳐링 단계에서도 이벤트를 발생시킬 수 있음.
→ addEventListener에 세번째 프로퍼티에 true 또는 { capture:true }를 전달

for (let elem of document.querySelectorAll('*')) {
elem.addEventListener("click", e => alert(캡쳐링 단계: ${elem.tagName}), true);
elem.addEventListener("click", e => alert(버블링 단계: ${elem.tagName}));
}

이벤트 위임(event delegation)

• 이벤트 버블링 사용하여 부모 요소에 이벤트 핸들러 하나만 등록해도 모든 자식요소에 이벤트 발생시킬 수 있음.
• 그러나 이럴 경우 부모요소에서도 이벤트 핸들러가 작동하기 때문에 내가 원하는 요소에서만 핸들러가 작동할 수 있도록 따로 처리를 해줘야 함.
  • ( if(e.target.tagName === ‘LI’) , **if(e.target.classList.contains(’item’)**등등 if문 사용하면 쉬움)

브라우저의 기본 동작

• 브라우저에는 각 태그별 혹은 상황별로 기본적으로 약속된 동작들을 가지고 있음.

• 태그마다 지정된 브라우저 기본 동작을 지우고 싶다면? (예를 들면 마우스 우클릭 방지)

• preventDefault() →파라미터로 아무런 값도 전달하지 않고 그냥 소괄호 만으로 메소드 호출

(하지만 각 HTML 태그들이 가지고 있는 고유한 역할과 의미를 훼손하게 될 수도 있기 때문에 꼭 필요한 경우에만 주의해서 사용해야 함)