[JavaScript] BOM과 HTML 계층구조

BOM, Browser Object Model

     - 초창기 모델, 현재까지 계속 사용한다.

     - HTML 문서 구조를 미리 정해진 트리 구조에 따라 접근하는 모델

     - 선택적 모델 > 일부 태그만 포함, 일부 태그만 조작 가능하다.

 

DOM, Document Object Model

     - 발전 모델, 현재까지 계속 사용한다.

     - BOM + a

     - 전역 모델 > 모든 태그를 포함, 모든 태그를 조작 가능하다.

     - name, id, class 모두 인식 가능하다.

 

HTML 계층 구조

HTML 문서의 소스를 계층 구조화 하는 모델

CSS는 선택자로 태그를 찾고 > HTML을 검색 > 접근 > 조작한다. JavaScript는 선택자가 없기에 아래의 구조 순서대로 찾는다.

HTML 계층 구조

반드시 window부터 찾아 내려가야 하고, 이 구조는 항상 고정이다.

단점은, 모든 태그가 이 모델에 포함이 되어있지는 않다. (span, div 등...) 선택적 모델이기에 일부 태그만 조작할 수 있다. 조작할 수 있는 태그의 수는 한정되어있다. > 이미지, 링크, 폼 태그