[JavaScript] DOM, Document, Node란?

DOM (Document Object Model)

객체 지향 모델로써 구조화된 문서를 표현하는 방식으로, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

 

Document 객체

웹 페이지를 의미하며, 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 사용한다.

 

메소드	설명
document.createElement()	요소 생성
document.getElementById()	id 요소 선택
document.getElementsByClassName()	class 요소 선택
document.getElementsByName()	name 속성값 요소 선택
document.getElementsByTagName()	tag 요소 선택
document.getAttribute()	특정 태그가 갖고 있는 속성값 가져오기
document.querySelectorAll()	css 선택자 기반으로 여러 개의 태그 가져오기
document.querySelector()	css 선택자 기반으로 1개의 태그 가져오기

코드 예시

var even = document.getElementById("even");		// 아이디가 "even"인 요소를 선택
selectedItem.style.color = "red";			// 선택된 요소의 텍스트 색상을 변경

var str = document.getElementById("text");		// 아이디가 "text"인 요소를 선택
str.innerHTML = "Hello";				// 선택된 요소의 내용을 변경

 

Node 객체

HTML DOM에서 정보를 저장하는 계층적 단위로써, 노드 트리에 포함된 모든 노드에 접근 할 수 있다.

노드의 종류

문서 노드(document node), 요소 노드(element node), 주석 노드(comment node), 속성 노드(attribute node), 텍스트 노드(text node)

코드 예시

el.childNodes				// 요소의 모든 자식 노드
el.childNodes[0]			// 요소의 모든 자식 노드 중에서 첫 번째 노드
el.firstChild				// 요소의 첫 번째 자식 노드

el.nodeName				// 노드의 이름
el.nodeValue				// 노드값
el.nodeType				// 노드의 타입

 

그 외 기능

클래스 추가/제거

el.classList.add(class-name)
el.classList.remove(class-name)

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

list.forEach(function(item) {...})

특정 기능 정지 메서드

e.preventDefault();

특정 지점으로 스크롤링

window.scrollTo({
    'behavior': 'smooth',	// 'auto', 'smooth'
    'top': el.offsetTop,	// 'top', 'left'
    						// offsetTop: 특정 영역의 위에서의 좌표값, offsetLeft
});

1초 간격으로 반복 코드 실행

setInterval(function(){...}, 1000); 

애니메이션 실행

el.animate({
    marginLeft: ["0px", "1024px"]
}, {
    duration: 500,
    easing: "ease",
    iterations: 1,
    fill: "both"
})