Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

평행우주 : world 1

[JS] DOM 기초 이해하기 본문

텃밭 2 : FE/JavaScript

[JS] DOM 기초 이해하기

parallelworlds 2022. 1. 5. 05:49

 

What is the DOM?

 
  • DOM은 Document Object Model의 약자
  • HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model
  • 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작 가능
  • DOM은 프로그래머 관점에서 바라 본 HTML 
  • DOM을 이해하고 조작할 수 있으면, HTML을 단순한 문서에서 웹 앱으로 업그레이드 가능
  • DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작
  • HTML 문서에 이미 작성되어 있는 엘리먼트 접근, 새로운 엘리먼트를 생성 또는 삭제 가능

 

 

 

 

HTML에 JavaScript 적용하기

 

HTML 문서에 포함되는 script 요소

<script src="myScriptFile.js"></script>

 


  • 웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 정지함
  • HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행
  • <script> 요소는 등장과 함께 실행

 

 

 

  • <script> 태그를 추가하는 두 가지 대표적인 사례가 존재
  • 하나는 <head> 태그에 추가하는 방법
  • 다른 하나는 </body> 가 끝나기 전에 추가하는 방법

 

 

2021.12.29 - [텃밭 2 : FE/HTML,CSS] - [HTML/JS] HTML에서의 효율적인 JS 포함 방법

 

[HTML/JS] HTML에서의 효율적인 JS 포함 방법

html에서 js를 포함할 때 어떻게 해야 효율적일까요? 안에 가 있는 경우 parsing html > blocked (fetching js > executing js) > parsing html(page is ready) 스크립트를 헤드에 포함하게 되면 사용자가 웹사이..

1parallelworlds.tistory.com

 

 

 

 

  

  

Q1 - 자식 엘리먼트 찾기

 

  • 자바스크립트에서 DOM은 document 객체에 구현
  • 브라우저에서 작동되는 자바스크립트 코드는, 어디에서나 document 객체 조회 가능

 

 

 

 

다음 예시에서 body 엘리먼트의 자식 엘리먼트는 총 3개

(id가 nav, news-contents, footer 인 3가지 엘리먼트)

 

 

 

 

 

 

 

 

 

 

 

 

[크롬 개발자도구에서 document.body 조회]

 

 

DOM 구조를 조회할 때에는 console.dir 이 유용.

console.dir 은 console.log 와 달리 DOM을 객체 모습으로 출력.

HTML 엘리먼트에 지정할 수 있었던 다양한 속성이 이미 객채 내에 존재하기 때문에

console.dir 을 이용해 document.body를 조회하면 아주 많은 속성이 나타난다.

 

 

 

 

 

 

 

 

[console.dir(document.body)에서 children 조회]

 

console.dir(document.body) 를 통해 출력된 객체에서,

children 속성을 찾을 수 있습니다.

children 속성에 nav, news-contents, footer 가

자식으로 있는 것을 확인할 수 있습니다.

 

 

 

 

 

 

[document.body.children 조회]

 

 

 

 

 

 

 

 

Q2 - 부모 엘리먼트 찾기

 

 

 

 

[id가 news-contents인 div 엘리먼트와 body엘레먼크의 관계] 

 

id가 news-contents 인 div 엘리먼트는 body 엘리먼트의 자식 엘리먼트

반대로 body 엘리먼트는 id가 news-contents div 엘리먼트의 부모 엘리먼트

 

 

 

 

 

 

 

 

 

 

[id가 news-contents인 div 엘리먼트]

 

document.body 의 children를 따로 변수로 선언하면,

주소를 참조하기때문에 언제든지 접근하기 쉬움. 

변수 newsContents 를 따로 선언하여

id가 news-contents 인 엘리먼트를 할당

 

 

 

 

 

 

 

 

[body 엘리먼트의 자식요소 변수 할당]

 

 

 

 

 

 

Q3 - DOM 순회하기

 

 

[회사 조직도]

 

DOM 구조와 회사의 조직도의 유사성. body가 가장 상위에 있고,

아래에 여러 구성요소가 부모-자식 관계를 이룸. 

 

 

 

[DOM 관계도]

 

트리 구조. 트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 점. 즉, 부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성하는 경우, 여러 번 반복해서 실행하는 코드가 필요

 

 

 

 

 

엘리먼트를 조회하는 코드를 작성하기 위한 수도코드

function consoleLogAllElement(element){
// nav의 class 이름을 console.log 합니다.
// nav의 자식 엘리먼트가 있는지 검색합니다. (logo, menu-wrapper)
  //logo의 class 이름을 console.log 합니다.
  //logo의 자식 엘리먼트가 있는지 검색합니다. (없음)
  //menu-wrapper의 class 이름을 console.log 합니다.
  //menu-wrapper의 자식 엘리먼트가 있는지 검색합니다. (menu, menu, menu, profile-photo)
    //첫 번째 menu의 class 이름을 console.log 합니다.
    //첫 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)
    //두 번째 menu의 class 이름을 console.log 합니다.
    //두 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)
    //세 번째 menu의 class 이름을 console.log 합니다.
    //세 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)
    //profile-photo의 class 이름을 console.log 합니다.
    //profile-photo의 자식 엘리먼트가 있는지 검색합니다 (없음)
 //자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
}

 

 

'텃밭 2 : FE > JavaScript' 카테고리의 다른 글

[용어정리] 값, 문, 표현식에 대하여  (0) 2022.01.08
[JS] 변수 hoisting과 값의 할당  (0) 2022.01.08
[JS] const 에 object를 선언하는 경우  (0) 2022.01.06
[JS] DOM으로 HTML 조작하기 (CRUD+A)  (0) 2022.01.05
[JS] Vanila JS 엄격하게 사용하는 방법  (0) 2021.12.29
'텃밭 2 : FE/JavaScript' Related Articles more
Comments