1. 기술소개

1. 특정 기능 정지 메소드(이벤트 핸들러)

e.preventDefault();

2. 1개의 태그를 css 선택자 기반으로 가져온다.

xxx.querySelector('#intro');

3. 여러개의 태그를 css 선택자 기반으로 가져온다.

xxx.querySelectorAll('a');

4. 특정 태그가 갖고 있는 속성의 속성값을 가져온다.

xxx.getAttribute('href');

5. 특정 지점으로 스크롤링

window.scrollTo({
		'behavior':'smooth',
        'top':xxx.offsetTop
});

6. 0000 마이크로 초 간격으로 반복적으로 코드 실행

setInterval( function(){
	함수내용
}, 0000)

7. 애니메이션 실행

애니매이션 post

xxx.animate({
	marginLeft : ['0px', '1024px']	// [시작 지점, 끝 지점]
}, {
	duration : 500,				// 500ms(0.5초) 동안
    easing : 'ease',			// 애니메이션의 속도를 설정하는 것.
    iterations : 1,				// 몇번 반복할지
    fill : 'both'				// 어떻게 채울지
})

8. 요소에서 특정 클래스 추가 및 제거

추가 : xxx.classList.add(클래스 명)
제거 : xxx.classList.remove(클래스 명)

9. 배열의 모든 요소에 코드 적용

nodeList.forEach(function(item){
	console.log(item)
})

10. 요소 선택

1. 이전 요소 선택

xxx.previousElementSibling;

2. 다음 요소 선택

xxx.nextElementSibling;

3. 부모 요소 선택

xxx.parentElement;

4. 첫번째 자식 요소 선택

xxx.firstElementChild;

5. 마지막 번째 자식 요소 선택

xxx.lastElementChild;