NODE 객체

node - HTML DOM에서 정보를 저장하는 계층적 단위

문서 노드(document node)

HTML 문서 전체를 나타내는 노드

요소 노드(element node)

모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드

속성 노드(attribute node)

모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다.
하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않는다.

텍스트 노드(text node)

HTML 문서의 모든 텍스트는 텍스트 노드

주석 노드(comment node)

HTML 문서의 모든 주석은 주석 노드

노드의 값

nodeName 노드 이름
nodeValue 노드 값
nodeType 노드 타입

event

웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생
자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

이벤트 핸들러

이벤트가 발생했을 때 그 처리를 담당하는 함수
지정된 이벤트가 발생하면, 웹브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다.

nav bar 기능 구현시 사용되는 기능

e.preventDefault(); 		//특정 기능 정지 메서드
xxx.querySelectorAll("a");  //여러 개의 태그를 css선택자 기반으로 가져온다.
xxx.getAttribute("href");	//특정 태그가 갖고 있는 속성의 속성값을 가져옴
window.scrollTo({
  		'behavior':'smooth', //부드럽게 이동
  		'top':xxx.offsetTop //특정 영역 위에서의 좌표값
});

이미지 슬라이드(자동)에서 사용되는 기능

setInterval(function(){
  ...}, 3000); //3초 간격으로 반복적으로 코드 식행
  
xxx.animate({
  marginLeft:["시작(0px)", "끝(1024px)"]
}, {
  duration: 500,
  easing: " ease",
  iterations: 1, 
  fill:"both"
})//애니메이션 실행

탭버튼에서 사용되는 기능

xxx.classList.remove(className)	//요소에서 특정 클래스 제거
xxx.classList.add(className)	//요소에 클래스명 추가
Array.forEach(function(item){	//배열의 모든 요소에 코드 적용
  console.log(itme)
})

이미지 슬라이드(클릭기능)에서 사용되는 기능

xxx.previousElementSibling;	//형제 중 이전 요소 선택
xxx.nextElementSibling;		//형제 중 다음 요소 선택
xxx.parentElement;			//부모 요소 선택
xxx.firstElementChild;		//첫번째 자식 요소 선택
xxx.lastElementChild;		//마지막 자식 요소 선택