DOM 이해하기

Dom은 xml 과 html을 위한 프로그래밍 인터페이스다. 인터페이스는 해당 타입에 어떤 속성과 메소드들이 존재해야하는지 기술만 하고 실제 구현은 각 구현체에서 다르게 구현 할 수 있게끔 약속을 해놓은것이다. DOM은 인터페이스이고 크롬, 인터넷 익스플로어, 파이어폭스와 같은 브라우저에서 해당 인터페이스를 구현한다. 이렇게 인터페이스를 어떻게 구현했는지 몰라도 해당 기능을 사용 할 수 있게 된다.

 

DOM은 노드의 트리 구조를 가진다.

 

노드들은 트리 구조이기 때문에 부모, 자식 그리고 형제로 서로 관계를 설정한다.

https://www.geeksread.com/dom-methods-in-javascript/

위 그림에서 li는 서로 형제 관계이고 , ul은 부모 노드가 된다. text 노드들은 자식 노드가 된다.

 

하지만 <li>태그는 node 타입이기도 하고 실제로 HTMLIElement 타입이기도 한다. HTMLLIElement는 HTMLElement를 상속하고 HTMLElement는 Element를 상속하고 Element는 node를 상속한다.