오늘 배운 내용
DOM 과 Node 두가지 개념을 정확히 익히고 차이점을 알아보자!
⛔️ appendChild() > node 에 접근하는 메소드의 인자로 element가 아닌 노드객체가 와야한다! ⛔️

1️⃣ Dom이란?

• 문서 객체 모델(Document Object Model)
• DOM 은 객체 지향 모델로써 문서(XML,HTML)의 구조화된 표현을 제공
• 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 하는 인터페이스
• HTML DOM : HTML 문서를 조작하고 접근하는 표준화된 방법 (모든 HTML요소는 HTML DOM 을통해 접근)
• Document : 웹페이지를 의미하는 객체, 웹페이지에 존재하는 HTML 요소에 접근하고자한다면 Document객체부터 시작해야한다!

📍Document 메소드

: html요소와 관련된 작업을 도와주는 다양한 메소드 제공

HTML 요소의 선택

HTML의 아이디, 클래스, 태그, 네임을 그대로 작성해준다.

• document.getElementByID()
• 태그,클래스,name은 배열로 반환한다.
  • document.getElementsByClassName()
  • document.getElementsByTagName()
  • document.getElementsByName()

CSS 선택자 작성과 동일하게 사용!

• document.querySelector()
• document.querySelectorAll() : 해당되는 요소의 첫번째 값만 반환한다.

HTML 요소의 생성

• document.createElement() : 지정된 HTML 요소를 생성 > 오브젝트를 넘기는것
• document.write() : HTML 출력 스트림을 통해 텍스트 출력 > 단순 출력

HTML 이벤트 핸들러 추가

• 요소.onclick = function() {}
• function (”click”, function객체)

HTML 객체의 선택

2️⃣ JS와 DOM

• DOM 요소를 선택하여 변수에 저장하여 활용한다!
• DOM 요소의 스타일 변경 (.style 속성 ⇒ bg, color, text,....)
• DOM 요소의 내용 변경 (.innerHTML , .innerText ,textContent 속성)

// 요소 선택
let eleOne = document.getElementById('main');
// 스타일 변경
eleOne.style.backgroundColor = "blue";
// 요소의 내용 변경
let str = document.getElementById("title");
str.innerHTML = "subTitle";

3️⃣ Node 객체

DOM에 계층과 관계를 곁들인,,, 느낌

• 노트 트리란 노드들의 집합으로, 노드간의 관계를 나타낸다.
• JS에서는 html dom을 이용하여 노트드리에 포함된 모든 노드에 접근 가능!
• 노드란 html dom 에서 정보를 저장하는 계층적 단위(모든 노드는 서로 계층적 관계를 맺음→ 자식,부모,형제)

Node의 종류

• 문서 노드 : html 전체 나타내는 노드
• 요소 노드: html요소 노드, 속성 노드를 가지는 유일한 노드 (온갖 태그 생각하면 된다..)
• 주석모드 : 잘사용X
• 속성노드 : html요소의 속성은 속성노드, 요소 노드에 관한 정보를 가짐, 해당 요소 노드의 자식 노드에는 포함X (src,href,style 과같은 속성 생각하면 된다.)
• 텍스트 노드 : html문서의 모든 텍스트는 텍스트 노드! (태그안에있는 텍스트나 그냥 텍스트 생각하면된다.)

Node에 접근하기

• 아래의 프로퍼티를 통해 접근한여 노드에 대한 정보를 알 수 있다.
• nodeName : 이름정보를 알 수 있다. > 변경까지 (text,div,li ...)
• nodeValue : 값 정보를 알 수 있다. > 변경까지 (content에 해당하는)
• nodeType : 타입 정보를 알 수 있다. > 변경까지
  • 요소 노드:1
  • 속성 노드: 2
  • 텍스트 노드: 3
  • 주석 노드: 8
  • 문서 노드: 9
• childNodes : 자식노드들을 모두 확인 할 수 있다.
• childNodes[index] : head~body 태그 안쪽의 엔터나 공백도 노드(텍스트노드)로 들어가는점 유의하기!
• ⛔️⛔️⛔️⛔️appendChild(노드객체) : 해당 노드의 자식에 덧붙히기

// 첫번째 자식이 누구인지 보여주는것
console.log(mom.firstChild); //"sister"
// 첫번째 자식의 값
console.log(mom.firstChild.nodeName);  //#text
console.log(mom.firstChild.nodeType);   //3
console.log(mom.firstChild.nodeValue); //sister

• 노드 객체의 프로퍼티와 메소드 살펴보자!

Node - Web APIs | MDN

4️⃣ DOM 과 이벤트(Event)

• 이벤트란 ?

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

이벤트 타입 (발생 이벤트 종류)

• 폼, 키보드, 마우스, HTML DOM, window 객체 등...

<div class="btn" onclick="changeColor(this)">box1</div>
<script>
	function changeColor (ele) {
		ele.style.color = 'red';
	}
</script>

이벤트 핸들러 (이벤트 처리하는 함수)

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

window.onload = function() {
	
	let one = document.getElementById('one');
  one.innerHTML = "this is one!!";
}

---

• node와 element의 차이에 대해 알고 있어야 여러 노드와 요소를 활용한 코드 작성시 좋을거같다는 생각.. 추가 내용 찾아보고 포스팅해보자!