[엘리스 AI트랙] 02-03-01 ~ 02-03-02 자바스크립트 2

WIL은 한 주간 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

 

1. DOM(Document Object Mode, 문서 객체 모델)

• 객체 지향 모델로써 구조화된 문서를 표현하는 방식
• 트리 구조
• XML이나 HTML 문서의 프로그래밍 인터페이스
• 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함
• 종류: Core Dom(for 모든 문서 타입), HTML Dom, XML Dom

(1) Document 객체

• 웹 페이지를 의미
• 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야함

(2) HTML 요소의 선택 - 새로운 HTML 요소 선택을 위해 제공되는 메서드

메서드	설명
document.getElementById()	해당 아이디의 요소를 선택
document.getElementsByClassName()	해당 클래스에 속한 요소를 선택
document.getElementsByTagName()	해당 태그 요소를 선택
document.getElementsByName()	해당 name 속성값을 가지는 요소를 선택
document.querySelectorAll()	해당 선택자로 선택되는 요소를 모두 선택
document.querySelector()	해당 선택자로 선택되는 요소를 1개 선택

(3) HTML 요소의 생성 - HTML 요소를 생성하기 위해 제공되는 메서드

메서드	설명
document.createElement()	지정된 HTML 요소를 생성
document.write()	HTML 출력 스트림을 통해 텍스트를 출력

 

2. Node 객체

(1) 노드의 종류

• 문서 노드(document node): HTML 문서 전체를 나타내는 노드
• 요소 노드(element node): 모든 HTML 요소는 요소 노드로, 유일하게 속성 노드를 가질 수 있음
• 주석 노드(comment node)
• 속성 노드(attribute node): 요소 노드에 관한 정보를 가지지만 해당 요소 노드의 자식 노드에는 포함되지 않음
• 텍스트 노드(text node)

(2) 노드의 값

• 노드에 대한 정보는 nodeName(이름), nodeValue(값), nodeType(타입)으로 접근 가능

 

3. 이벤트

• 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생

//마우스 클릭 이벤트 예시
<p onclick=“changeText(this)”/>
// 여기서의 this는 p 태그 자기자신을 의미

 

---

그 외의 메서드

// 특정 지점으로 스크롤링
window.scrollTo({
	'behavior': 'smooth', // 부드럽게 이동
    'top': xxx.offsetTop
}): // 특정 영역 위에서의 좌표값
  
  
// 애니메이션 실행
zzz.animate({ keyframes }, {
	duration: 500,
    easing: "ease",
    iterations: 1,
    fill: "both"
 })


// 이전 요소 선택
zzz.previousElementSibling; // <-> zzz.nextElementSibling;

// 부모 요소 선택
zzz.parentElement;

// 첫번째 자식 요소 선택
zzz.firstElementChild; // <-> zzz.lastElementChild;