js_DOM

자바스크립트 입장에서,
HTML은 문자열이다.

js는 html, css 를 컨트롤하는 입장임.

여튼
js 로 html 문자열을 다루는건
랭쓰, 슬라이스
정도인데,

DOM을 컨트롤하면 많은걸 할 수 있다.

그래서

자바스크립트 입장에서는

html 문서는 그냥 문서기떄문에,

나름대로 정의를 하고싶다.
객체화를 해서
즉,

지금
html 문서에

자바스크립트는 어떻게 받아들이냐면,

const child1 = {
nodeType: 1,
nodeName: 'div',
childNode: [

],
attributes: 

}

노드의 타입은 한개이고,
노드의 이름은 div 이고,
노드의 자식은 뭐가있고,
이 디브의 속성은 뭐다 라고
이런식으로

정의를 하고싶었던 거에요
자바스크립트는,,

뭐 그래서 결국 정의하고 추가하고 수정하는 작업을 하는게 자바스크립트의 역활인데,
속성을 추가하는것
등등

그거를 돔으로 작업을 한다 라는 것입니다.

정리하자면,

문자열인 HTML 을,
자바스크립트가
이해할 수 있는 형태로 바꾸는 작업을
프로그래밍 표현으로
Parse 라고 하는데,
문자를 뭔가 의미있는 객체 형태로 바꾸는것
그래서

노드로 바꾸는것이다.

즉,

자바스크립트가
HTML 을
컨트롤 하려면
노드형태로 바꿔서 parse 해서
다루는 거다.

DOM은
문자열 뿐인 HTML을
의미있는 객체 = 노드객체라는 형태로 바꿔서

우리가 추가적인 작업을 할 수있는 기능을 제공하는 녀석이다.

자바스크립트로
html 을 조작하는 가장 기본은
요소를 선택을 하는것이다.

DOM 이란것은
HTML에 있는 내용을,
자바스크립트가 알아듣기위한 형태로 바꾸는거고,
그 바꾸는 과정에서 html이 기본적으로 중첩구조로 되어있으니까,
구조의 성격이 자연스럽게 반영될수밖에 없다.
결국
자바스크립트로 할 수 있는 일이.
html css 를 조작하는건데,
조작을 하려면
내가 어떤 녀석을 조작하고 싶은지를 찾고,
그녀석의 뭐든 조작을하고 수정 추가를하는 작업의 메소드를 제공하는게 바로 DOM 이란 녀석이다.

우리가 HTML 을 작성 할때에는 그냥 작성하면되지만,
자바스크립트는 바로 작성을 할 수없다.그래서
작성을 할 수 있게 도와주는 메소드로써
도구가 필요한데,

html 의 상태를 우리는 그냥 보면 되지만,
자바스크립트는 상태를 볼수있는 장치가 필요하기때문에,
그런 보기위한 속성들을 DOM이 제공을 해줘서
DOM으로 볼 수가 있고 조작을 할 수 가 있는것이다.

DOM은 조작장치, 연결고리 인것이다.

차일드 노드가 있냐,
칠드런이 있냐
이런 정보의 형태로 제공을 해주는거다.

DOM 에서 제공하는 것들은,

프로퍼티들은,
childNode
firstChild
lastChild
nextSibling
parentNode

메소드들은,
appendChild() 이거 많이씀
cloneNode()
contains()
hasChildNodes()
isEqualNode()
removeChild()
replaceChild()

도큐먼트 메서드들은,
document.createElement() 많이쓰고
document.createTextNode()

HTML 엘리먼트 프로퍼트들은,
innerHTML
outerHTML
textContent
innerText
outerText
firstElementChild
lastElementChild
nextElementChild
preciousElementChild
children

등등 있다.

자주 쓰는거 만 대충 알면된다.

이걸로 노드를 선택을 해서
자바스크립트로 뭘~하는것이다.

주로
다큐먼트 크리에이트 해서 만들고
쿼리셀렉터해서 원하는 요소 찾고

이 두개밖에 거의 사용하는게 다다...

Element Nodes
엘레멘트 즉, 태그 노드

HTML Element object 프로퍼티즈 메서드들,

createElement()
tagName
children
getAttribute() 자주씀
setAttribute() 자주슴
hasAttribute()
removeAttribute() 자주슴
classList() 자주씀
dataset
attributes

예를들어
속성들 가져올때

console.log(atts.getAttribute('href'));

그리고
클래스를 달아주고싶을때,

let parent = document.querySelector('.parent');
parent.classList.add('hello');
하면
확인해보면 hello 클래스가 달려있다.

옛날에는
클래스 달려면
parent.setAttribute('class', 'hello');
막 이렇게 달아주고 했는데 이거는 기존의 클래스들이 덮어씌워져서 별로안쓰는 기능이고,

요즘엔 classList 를 쓴다.
아무튼 그래서

parent.classList.remove('hello');
parent.classList.add('bye');
parent.classList.toggle('bye'); // bye 가 있으면 bye를 없애주고, bye가 없으면 붙여주는 기능.

우리가 HTML 은 작성하면 끝이고, 올려버리면 끝인데,
그걸 우리가 상태(로그인 했으면 로그인 했다는 표시 해주고 이런상태 ,
메세지가 왔으면 메세지를 보여줘야되는 그런상태들)에 따라서,
이 상태를 계속 바꿔야된다.

즉, 웹페이지는 한번 던져졌으면 끝나는데,
사용자가 뭘클릭했냐, 뭘입력했냐, 사용자가 입력을 잘못했냐, 사용자가 이상한짓을 하느냐
를 다 파악해서 그 케이스마다 다다닥 상태를 바꿔서 UI를 다르게 보여줘야하고,
그렇게 할려면, 누군가가 이 정적인 HTML에 끼어들어서 ,이런 상태가 변경된걸 바꿔줘야한다.
그 바꿔줄때 필요한게 바로 DOM 이고,
이 DOM의 조작 방법(매서드,프로퍼티 등등)을
자바스크립트로 이용해서 바꿔주는 것이다.

예를들어,

let parent = document.querySelector('.parent');

이제 유저가 볼필요가없는 텍스트 자료를 없애려면,

HTML태그를 수정하고 할떄는,,
parent.innerHTML = '