개발자 데뷔!

07. [FE] DOM Tree 기본 본문

웹/Front End

07. [FE] DOM Tree 기본

물꼮이 2022. 1. 16. 19:21

DOM

: 문서 객체 모델 (Document Object Model)

 

XML, HTML 문서의 각 항목을 계층으로 표현해 

생성, 변형, 삭제할 수 있도록 돕는 인터페이스. (W3C 표준)

  •   HTML 문서의 요소를 tree 구조로 표현한다.
  •   웹브라우저는 HTML 문서를 읽고 DOMTree를 생성한다.

 

 

직관적으로 위의 DOM Tree 그림은 다음과 같은 html 코드로 부터 생성된 것이다.

<html>
<head>
    <title>My title</title>
</head>
<body>
    <h1>A heading</h1>
    <a href="www.naver.com">Link text</a>
</body>
</html>

이를 liveserver로 실행시키면 다음과 같은 화면이 뜬다.

 

DOMTree 기본 -실행화면

DOMTree 요소 접근하기

위의 기본 코드에, <script>태그를 추가해, DOMTree 요소에 접근해보았다. 

* <script>내부는, JavaScript 를 사용하므로, 문법이 <html>태그 내부와 다르다.

위 <html>태그 구조의 요소에, .children 으로 접근할 수 있다.

 document.children[0].children[1]

위 코드는, document의 .children[0], 즉 0 번째 자식 = <html> 

의 .children[1], 즉 1번째 자식 = <body>이므로,

<body>를 가리킨다.

 이 요소의 값에 접근하면 다음과 같이, 값을 읽고, 수정할 수 있다.

<html>
<head>
    <title>My title</title>
</head>
<body>
    <h1>A heading</h1>
    <a href="mcdonald.co.kr">Link text</a>
</body>
<script>
	/* Dom Tree 요소 접근*/
    let a = document.children[0].children[1].children[0].textContent;
    alert(a);
    let b = document.children[0].children[1].children[1];
    b.textContent = "HIHI";
</script>
</html>

위 코드에서 변수 a는 body의 첫번째 자식의 content, 즉 <h1>태그를 가리키는 것이고,

변수 b는 body의 두번째 자식의 content, 즉 <a>태그를 가리킨다. 

변수a(=<h1>)는 alert 창으로 띄우고, 

변수b(= <a>)는 값을 HIHI로 변경했으므로,

liveserver로 가동하면, 다음과 같은 창이 차례로 나타난다. 

 

 

1. let a 를 alert창으로 띄움
2. let b 값을 HIHI로 변경

 

다음과 같이 크롬창에서, 개발자도구(F12)를 열어 Console창에 입력해서 확인할 수 있다. 
개발자도구 탭의 가장 상단, 가장 왼쪽 포인터아이콘을 클릭한 후, 마우스를 웹브라우저화면에 가져다대면,
각 구성부가 어떤 element인지 간단히 확인할 수 있다.

 

 

Script 태그의 위치

<body>태그 내부 코드는, 화면을 구성하는 요소(html)들을 띄워준다.

<script>태그 내부 코드는, html요소들 사이에서의 상호작용이 동작한다.

즉, <body>태그와 <script>태그의 상대적인 위치에 따라, user 입장에서 체감하는 속도가 달라질 수 있다. 

코드는 위에서부터 아래로 읽히므로, user가 직접 보는 페이지(브라우저 렌더링)가 먼저 뜨도록, <body>를 <script>앞에 두는것이 좋다.

 

1. Head에 Script태그 삽입

  • Script가 모두 동작한 후, 브라우저 렌더링 시작
  • 페이지 뜨는 속도 느려짐
  • 즉, head에 script삽입은 최대한 지양한다.
  • 단, 문서초기화, 설정 등의 가벼운 script만 삽입한다.
  • = Body 가장 위쪽에 Script 를 넣는것과 비슷

2. Body 가장 아래에 Script태그 삽입

  • 브라우저가 화면에 노출된 후, Script 동작
  • Dom Tree 완성 후 Script 실행

Defer 속성 

 그래서, <script>태그가 <head>내부에 위치하더라도, 

 <body>에서 DOMTree를 완성하고 브라우저 렌더링으로 화면까지 띄운 후, <script>를 실행하도록 지정하는 속성이 defer 속성이다. 다음과 같이 script 태그에 추가해 사용한다. 

<script defer src="/test.js">   </script>
  • HTML parsing과 동시에 script를 로드하고, HTML parsing이 끝난 후, 바로 로드 된 script를 실행한다.
  • 대부분 성능면에서 가장 유리한 방법

'웹 > Front End' 카테고리의 다른 글

02. [FE] 브라우저에서 개발자도구 열기  (0) 2022.01.15
06. [FE] CSS Display 디스플레이 요소  (0) 2022.01.12
04. [FE] CSS 기본  (0) 2022.01.12
03. [FE] HTML 기본  (0) 2022.01.12
01. [FE] VS code 기본 & 시작하기  (0) 2022.01.12
'웹/Front End' Related Articles more