[ 06.01 ] DOM (문서 객체 모델)

[Achievement Goal]

객체 지향언어인 DOM 의 개념 및 구조 파악하기

DOM 으로 HTML 접근하기
-> 부모,자식 엘리먼트를 찾을 수 있어야 한다.

DOM 을 HTML 파일로 불러올 때 주의할 점
-> < script > 가 적용되는 위치의 중요성에 대해 알아본다.

1. DOM 의 개념 및 구조 파악하기

DOM 이란 ?
프로그래밍 언어는 아니지만 자바스크립트와 html 간의 연결고리를 해주는 객체지향 언어라고 할 수 있다.
돔이 없다면 자바스크립트는 html의 태그, 요소들에 접근하기 힘들다.

자바스크립트가 돔에 접근하기 위해서

  <script src = '../domPractice.js'></script>
  <!-- <script src = '경로이름'></script>-->

🧐 헷갈리는 DOM

스크립트는 보통 head 또는 body 가 끝나기 전에 추가한다.
이 스크립트가 적용되는 위치에 따라 html의 동작순서는 달라진다.

html에서 작성된 코드를 해석하는 과정에서 script 를 만나면 웹 브라우저는 html 해석을 잠시 멈추고 script 에 있는 자바스크립트를 실행하게 된다.

head 와 /body 에 script 넣은 후 비교

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
  <!--head 에 script 위치했을 때 -->
  <script src = './practice.js'></script>
</head>
<body>

    
//js file context
console.log('javascript is hell') // 'javascript is hell'
let title = document.querySelector('.title')
console.log(title)  // null

head 에 삽입하는 경우 : 바로 스크립트가 실행이 되어 html 문서까지 도달하지 않기 떄문에 DOM 과 연결된 경우 null 이 뜨게 된다.

  
  <body>
  <div id = 'container'>
    <div class = 'title'>돔DOM돔</div>
  </div>
    <!--body 태그 끝에 위치했을때 -->
  <script src = './practice.js'></script>
</body>

  
//js file context
console.log('javascript is hell') 
let title = document.querySelector('.title')
console.log(title)

한번 HTML 파일요소를 훑고 바디 끝으로 내려온 script 가 진행되어
콘솔창에 dom 요소가 잘 찍힌다.

2. DOM 으로 HTML 접근하기

자바스크립트가 접근하는 방법은 여러가지가 있다.
그 중, 자식요소와 부모요소를 통해 접근하는 방법을 작성 해 보겠다.

  <div id = 'container'>
  <header id = 'header'>
    <h1>첫번째 자식</h1>
    <nav>head-1</nav>
    <nav>head-2</nav>
    <nav>head-3</nav>
  </header>
  <section id = 'section'>
    <h1>두번째 자식</h1>
    <ul>
      <li>section-1</li>
      <li>section-2</li>
      <li>section-3</li>
    </ul>
  </section>
  <footer id = 'footer'>
    <h1>세번째 자식</h1>
    <p>footer-1</p>
  </footer>
</div>

여기 최종보스 부모인 container 의 자식들인 header,section,footer 형제들이 있다.
이 형제들의 자식들을 또 나누자면
header -> h1, nav 형제들
section -> h1, ul -> ul의 자식인 li 형제들
footer -> h1,p

이렇게 구성되어 있다.

🧐 미리 알고가기

console.dir : dom 의 속성을 찾고 싶을때 유용한 코드.

console 에도 수많은 속성이 있다.
그 중 우리에게 익숙한 console.log, console.clear
배열요소를 표로 파악할 수 있는 console.table 등 있었다면
console.dir 은 dom 의 속성을 알고 싶을 때 유용한 코드가 된다.

dom 은 객체지향 언어이기 때문에 최종보스인 document.body 를 console.dir 로 출력하면 객체의 형태로 나타난다.

(1) 자식 엘리먼트 찾기

먼저, console.dir 로 부모를 조회했을 때 수많은 속성들이 나오는데
그 중 children 이라는 속성이 있다. 말그대로 자식들만 보여주는 속성이다.

// 컨테이너 이하의 모든자식 선택해보기.

const container = document.getElementById('container')
console.log(container.children)

// 컨테이너 각 자식의 노드 선택하기
const firstChild = container.children[0]
const secondChild = container.children[1]
const thirdChild = container.children[2]

console.log(firstChild)
console.log(secondChild)
console.log(thirdChild)

콘솔에 찍으면 다음과 같이 container 의 자식태그들을 나타낸다.

  
function border(select){
  select.style.border = '3px solid'
}
border(thirdChild)

이렇게 함수식을 넣어 응용할 수도 있다.

(2) 부모 엘리먼트 찾기

child 와 마찬가지로 console.dir 를 해보면 parentElement 속성이 있는것을 볼 수 있다.

console.log(firstChild.parentElement)

아까 작성했던 firstChlid(==header) 의 부모인 container 가 나오는 것을 볼 수 있다.

Author And Source

이 문제에 관하여([ 06.01 ] DOM (문서 객체 모델)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@22soook00/06.01-DOM-문서-객체-모델

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)