TIL - 21.07.04 👨‍💻 - Js. DOM

성훈·2021년 7월 4일

DOM JavaScript TIL

TIL

목록 보기

20/59

TIL - 21.07.04 👨‍💻

Document Object Model ( 문서 객체 모델 )

DOM, 돔은 웹페이지의 컨텐츠를 수정 가능한 객체로 나타내준다.
이때 모델은 객체의 트리로 구성되는데 이를 DOM tree 라고 한다.

그리고 이 수정 가능한 객체(돔)가 수정되면 사용자가 보는 내용도 수정되며 이때 돔을 수정하는 프로퍼티, 메소드들을 DOM API라고 한다.

브라우저가 작성된 코드를 메모리에 페이징하는 과정에서 <script>를 만나면 브라우저는 페이징을 멈추고 <script> 요소를 실행한다.
이때 <script>요소는 등장과 동시에 실행되기에 <head> 태그 안에 있을때와 <body> 태그 안에 있을때 코드의 결과물이 달라진다.

Browser Object Model ( 브라우저 객체 모델 )

BOM은 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체이다.

주로 사용하는 객체는 navigator와 location이 있다.

navigator는 브라우저와 운영체제에 대한 정보를 제공하는 객체이며 유명한 프로퍼티는 현재 접속중인 브라우저 정보를 알려주는 navigator.userAgent와 브라우저가 실행중인 운영체제를 알려주는 navigator.platform등이 있다.
location은 location.href = 'http://link.likethis'와 같은 방식으로 웹페이지를 이동할때 사용한다.

DOM tree

돔에서 요소, 속성, 텍스트를 포함한 모든 HTML 요소는 객체이고 HTML 태그 중 다른 태그가 감싸고 있는 자식 태그를 중첩태그라고 한다.

돔 트리는 4종류 주요 노드(Node)로 구성된다.

문서 노드 ( Document Node )
트리 최상위에 있으며 다른 노드들에 접근하려면 문서 노드를 통해야하는, 돔 트리 접근의 시작점(entry point)이다.
요소 노드 ( Element Node )
요소 노드는 HTML 요소를 표현한다.
HTML 요소는 중첩으로 부자관계를 가지는데 이를 통해 정보를 구조화한다.
후술할 속성 노드와 텍스트 노드에 접근하려면 해당 노드들의 상위인 요소 노드를 찾아야한다.
속성 노드 ( Attribute Node )
속성 노드는 HTML 요소의 속성을 표현한다.
속성 노드는 상위인 요소 노드의 자식이 아닌 '일부'로 표현되며 요소 노드를 찾으면 속성 노드를 수정할 수 있다.
텍스트 노드 ( Text Node )
텍스트 노드는 HTML 요소의 문자를 표현하며 자신의 자식 노드를 가질 수 없다.
즉, 돔 트리의 최하단은 텍스트 노드이다.

텍스트 노드는 줄을 바꿀때도 돔 트리 상에 표현되며 ↵(\n)과 ␣␣ 띄어쓰기 특수문자로 표현된다.
다만 이 생성의 두가지 예외가 있다.

head 태그 이전의 공백과 새 줄은 무시된다.
body 태그의 닫는 태그 이후에 작성되는 컨텐츠는 body태그의 안으로 옮겨진다.

이외
주석 같은 것도 텍스트 노드가 아닌 별도 노드로 표현된다.

GOOD 😉

돔과 돔을 이용해 자바스크립트로 HTML 문서를 수정하는 법을 익혔다.

BAD 😥

겉핥기로 배워 숙련이 많이 필요하다.

TO DO 🔥

DOM 숙련
이벤트
고차함수
react
node.js

Retrospect 🧐

정말 사람이 간사한 것 같다.
평일엔 시간에 쫓기며 공부하기에 주말은 꼭 복습이 아닌 예습 위주로 학습해야겠다 다짐했는데, 주말이라고 퍼져서 뒹굴뒹굴 해버리다니..

그나마 제사가 평일이 아니라 주말이라 평일을 안 날렸다는게 조그마한 위안일까.

10일 후면 HA인데 긴장이 필요한 듯 하다ㅠ
앞으로 하루에 한시간은 리액트 겉을 핥는 시간을 가져야겠다.

Reference 🙇

https://ko.javascript.info/
https://poiemaweb.com/

성훈

어떻게 이걸 풀어낼 수 있을까

이전 포스트

TIL - 21.07.03👨‍💻 - Js

다음 포스트