DOM_Node

0l0l·2021년 3월 25일
0

DOM(Document Object Model)

Node

자바스크립트 입장에서 '.html'은 '문자열' 데이터로 보임 (문자열로써 할 수 있는 것이 length 등 한정적임)
html 문서를 유용하게 자바스크립트가 이해할 수 있는 형태로 바꿔주는 것이 DOM이다.
DOM에서는 document를 html 이라고 생각한다!

※ 즉, 문자일 뿐인 html을 자바스크립트가 이해할 수 있는 것이 객체이므로, DOM이 자바스크립트가 이해할 수 있게 의미있는 Object (Node 객체)형태로 바꾸어 nodeType, nodeName, childNode, attributes 등으로 정보를 정리하여 자바스크립트가 의미있게 조작할 수 있도록 해주는 것이다.

문자열인 html을 자바스크립트가 이해할 수 있는 (node)형태로 바꿔주는 작업을 프로그래밍 언어에서 'parse'라는 말을 사용하는데 문자를 의미있는 객체 형태로 바꾸는 것을 'parsing'이라고 하며, 위의 작업은 DOM에서 일어난다.

DOM은 문자열을 세세하게 구분하여 유사한 계열로 노드를 나눔
공백도 Text node로 분류되며, 주석도 node이다.
자바스크립트가 한다는 것은 '원하는 요소를 선택해서 조작하는 것'을 말한다.

노드를 다루기 위한 속성 및 메소드는 트리의 관계(부모, 자식, 형제...)에 관한 것들이다.
html 자체가 마크업이 트리구조(중첩구조/A⊃B⊃C)로 되어 있기 때문에 구조의 성격이 반영되어 이러한 메소드들을 공통적으로 가질 수 밖에 없다.
html은 그냥 코드에 작성이 가능하지만 자바스크립트에서는 불가하기 때문에 정보의 형태로 정리하여, html에서 작성할 수 있도록 도와주는 '메소드'와 상태를 볼 수 있는 '속성'들이 필요한 것이다!

기본 상식!인 속성과 메소드

<Node 속성>

  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • parentNode
  • previousSibling

<Node 메서드>

  • appendChild()
  • removeChild()

<Document 메서드>

  • document.createElement()

<HTML*Element 속성>

  • innerHTML
  • innerText

Document Nodes

document는 문서의 '시작, 근간'이 되는 것이라 생각한다.
html 문서 전반에 대한 정보를 가지고 있다.

기본 상식! 메소드

  • document.querySelector()

※ document로 element를 만들고, 내가 원하는 요소를 찾는 정도만 하는 역할이다.


Element Nodes (실용적인 파트)

Element라는 개념을 기억하자! / element(요소) = html의 '태그'
기본적으로 모든 엘리먼트 노드라면 다 사용할 수 있는 속성과 메소드이다.

기억해야할! 메소드

  • getAttribute()
  • setAttribute()
  • removeAttribute()
  • classList()

classList의 대표적인 메소드

  • toggle()
  • add()
  • remove()
  • contains()

DOM이 'main'이기 때문에 element(요소)는 반드시 classList라는 것을 갖게 된다!!
clasList 자체는 클래스를 다루고 있는 메소드이기 때문에 속성값에 .(점)을 붙이지 않아도 된다. (ex. parent.classList.add('hello'))

★ DOM에서 중요한 부분은 조작 방법(document node, element node), 이벤트 핸들링(정적인 페이지에서 이벤트를 발생시키기 위해 조작)

*'DOM을 깨우치다' 책과 김버그님 영상을 참고함

profile
천방지축 빙글빙글

0개의 댓글