2021.06.01(Tue.) <DOM>

1. DOM(Document Object Model)

• 별다른 의미가 없는 문자열 같은 정보를 HTML 이 알아들을 수 있도록 바꿔주는 것이다!(parse) => 이걸 Node로 한다
• 그래서 스트링이 의미가 생겼으니 하나하나 다 쪼개버린다. 심지어 빈칸까지 자른다.
• 자바스크립트는 원하는 요소를 '조작' 하는 것에 의의가 있으니까, DOM은 의미 있는 부분으로 잘라서 선택을 해주는 역할을 담당하게 된다.
• 예시를 들면, 이렇게 쓸 수 있다.

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

• 왜 body의 마지막에 넣나 :
  • html로 뼈대를 짜고 그 위에 기능을 넣는 것이 script이다. html은 script를 만나면 기능을 멈춘다. 그러므로 틀이 다 짜인 body를 넘어서 script가 들어가는 것이 옳다.
• 이 정도는 알아두자 '노드 프로퍼티'
  • childNodes
  • firstChild
  • lastChild
  • parentNode
  • previousSibling
• 이정도는 알아두자 '노드 메서드'
  • appendChild
  • renoveChild
• 이 정도는 알아두자 '도큐먼트 메서드
  • document.createElement()
• 이 정도는 알아두자 'HTML 엘리먼트 프로퍼티'
  • innerText
  • innerHTML
  ! : 기능은 해석해 보면 알 수 있다! 단어와 기능을 연결 지어 외우려고 하지 말고, 일단 보자!

2. 상속

• 부모는 자식에게 '상속'을 해 줄 수 있다.
• HTML이 '트리 구조'로 되어 있기 때문에 윗단계의 부모가 자식에게 상속이 가능하다.

3. DOM을 이용해 HTML의 구조를 확인하는 법

• console.dir : console.log 와 다르게 DOM을 객체의 모습으로 출력한다.
• 그래서 간단하게 어떠한 태그를 찾고 싶으면 document. 부모 태그. 자식 태그 순으로 다 찾을 수 있다.

4. DOM 사용 시 주의할 만한 사항

• 이벤트 속성에 이벤트 핸들러를 등록할 때, 함수 그 자체를 써야 한다. 실행한답시고, ()를 넣으면 안 된다!
• value 값으로 여러 가지 엘리먼트의 '입력값'을 얻어 낼 수 있다.
• classList 쓸 때,.(닷) 안 찍고 그냥 넣어도 된다. 이미 클래스에 대해 다루고 있다고 이름이 설명하고 있다.

5. document node

• HTML 문서 전체의 정보를 가진 녀석
• document. 바디, 헤드, 타이틀 같은 큰 태그들 : 바로 접근 가능
• document.querySelector : 한 태그 바로 찍어버림

6. HTML Element Object Propperties and Methods

• HTML Element Object : HTML의 요소 전체에 정보를 가진 녀석
• createElement()
• tagName
• getAttribut()
• setArrtibut()
• hasAttribut()
• removeAttribute()
• classList

　결론 : DOM은 정말 흥미롭다, 유저와 의사소통 혹은, 자바스크립트의 반응까지 필요하고 원하는 곳에 넣고 빼고, 다 한다!
그래서 사실 진짜 중요한 것은, '내가 원하는 곳에 접근하려면 어디에서 어떤 값을 빼내야 하는가?'이다.
그다음에 중요한 것이 DOM의 상태를 조작하면 되는 것이다!
　여담 : 그래서, 다양하고 최신화된 명령들을 받아 내려고 하다 보니, 구형 브라우저들은 알아먹지 못하는 경우가 있다. 이때 필요한 것이 jQuery 이다. 그 브라우저가 알아먹지 못 하는 명령을 알아들을 수 있는 대체 명령으로 바꿔 주는 이쁜 짓을 한다. 그래서 명령이 하도 많아서 무겁고, 많은 이들에게 널리 널리 오랜 기간 '사랑받아(퇴물 취급이 없지 않다 카더라...)' 왔다.
　여담 2 : DOM 은 충분히 안 직관적이다. 걱정마라 '리 엑트'가 도와준다고 한다. 오늘은 아니야... 흑흑