간략하게 DOM은 무엇이며, js에서는 어떻게 DOM을 사용하는지 서술하겠다.

DOM (Document Object Model)

Document Object Model(문서 객체 모델)의 약자로, html 문서를 구조화/계층화된 표현으로 나타낸 것을 말한다. 프로그래밍 언어가 html 문서의 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
js에서 DOM은 문서를 객체(object)로 표현한 것을 말한다.

• DOM은 js의 내부 요소가 아니다. 그저 js에서 DOM을 많이 사용하는 것 뿐이다.

구조 : 트리(tree)

DOM은 기본적으로 계층을 가진 트리(tree) 구조를 따른다.

노드(Node)

DOM의 트리 구조에서 각 객체(object)를 노드(Node)라고 부른다.

종류

총 12종류의 노드가 있으나 자주 쓰이는 노드만 설명하겠다.

• 문서 노드 (Document Node) : DOM 트리의 최상위 객체 document를 표현하는 노드. 문서 전체를 나타낸다.
• 요소 노드 (Element Node) : 요소(태그)를 표현하는 노드
• 텍스트 노드 (Text Node) : 문자열을 표현하는 노드
  • 자식 노드를 가질 수 없으므로 리프 노드(Leaf Node)이다.
  • 코드 내의 줄바꿈, 들여쓰기도 각각 별개의 텍스트 노드로 인식하므로 텍스트 노드를 다루고자 할 때는 각별한 유의가 필요하다.
• 코멘트 노드 (Comment Node) : 주석을 표현하는 노드

사용 방법

• html 요소의 속성(attribute)에 접근하려면 [요소].[속성명] 식으로 적어 접근할 수 있다. html 요소의 속성(attribute)은 모두 property이기 때문이다.
  • style 속성(CSS 속성)의 경우 [요소].style.[css속성명] 식으로 작성하여 개별적으로 접근할 수 있다.

Node 접근 방법

js에서 DOM의 최상위 객체에 접근하는 방법은 document를 그대로 쓰면 되고, 다른 하위 요소들은 node의 property나 method를 이용해 요소를 얻어낼 수 있다.
주로 쓰는 property나 method를 아래에 간단하게 적겠다. 각 property/method에 대한 내용은 여기를 참고하라.

• 요소 노드 가져오기
  • property : children, firstElementChild, lastElementChild, parentElement, previousElementSibling, nextElementSibling
  • method : getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), querySelectorAll()
    
    
• 노드 가져오기
  • property : childNodes, firstChild, lastChild, parentNode, previousSibling, nextSibling

Node 추가 방법

1. 새 Node를 만든다.
   • 예시 : createElement()
2. Node를 꾸민다.
3. Node를 추가한다.
   • 예시 : prepend(), append(), before(), after()

속성(attribute) 접근 방법

property

• html 요소의 속성(attribute)에 접근하려면 [요소].[속성명] 식으로 적어 접근할 수 있다. html 요소의 속성(attribute)은 모두 property이기 때문이다.

  • class 속성은 property name이 달라져 className이다. property로 접근할 때 주의하자.
  • html 표준 속성이 아닌 경우에는 property가 아니다.

method

• getAttribute() method를 이용하면 비표준 속성을 포함하여 모든 속성에 접근할 수 있다.

스타일(style) 접근 방법

property

• style 속성(CSS 속성)의 경우 [요소].style.[css속성명] 식으로 작성하여 개별적으로 접근할 수 있다.
  • CSS 속성의 경우엔 property name을 kebab-case에서 camelCase로 바꾸어 주어야 제대로 접근할 수 있다.
  • 다만 이 경우에는 style 속성이 요소의 속성으로 들어간다. 즉, html 파일 내부로 style이 작성된다.