[JS/Browser] DOM

디딩·2022년 11월 10일

Section

목록 보기

17/18

🕖 DAY +16 / 2022. 11. 10

SEB FE / Section1 / Unit10 / JS/Browser DOM

📌 Today I Learned

DOM

💬 DOM 기초 개요

DOM이란 Document Object Model입니다. document를 객체로 구현했다고 생각하면 됩니다.
DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.

html
-head
--title
--meta
--link
-body
--header#header
---nav
---div
--main
--footer
---"hello"
--script

같은 구조로 되었습니다. 즉 계층적 구조로 되어있는데요. header, main, footer, script의 부모는 body이고, head와 body의 부모는 html이라고 할 수 있습니다. head와 body는 형제자매 관계이겠죠. header는 body의 자식이고요. footer의 안에는 태그 대신 "hello"라는 문자가 들어있습니다. 전 시간에 다룬 텍스트 노드죠.

이걸 잘 생각해보면 객체로 표현할 수 있습니다.

{
  document: {
    html: {
      head: {
        title: ...
      },
      body: {
        header: ...
      }
    }
  }
}

이렇게 들어갈 수 있습니다. 위와 같이 만든 게 DOM입니다. 정말 객체 모양으로 표현됐죠? 가장 위는 document고요. 자식으로 갈 때는 html 태그를 건너 뛰고, head와 body로 갑니다. head와 body는 각각 document.head, document.body로 접근할 수 있습니다.

[Node와 Element] https://velog.io/@dding/node-elemnet

💬 HTML에 JavaScript 적용하기

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다. HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행합니다.

스크립트 위치
https://velog.io/@dding/html-script

📂 예제 1

다음 HTML 문서에서 body 요소의 자식 요소(element)는 총 몇 개인지 고르세요.

<html>
  <body>
    <div id="nav">
      <div class="logo"></div>
      <div class="menu-wrapper">
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="profile-photo"></div>
      </div>
    </div>
    <div id="news-contents">
      <div class="news-content-wrapper">
        <div class="news-picture"></div>
        <div class="news-title"></div>
        <div class="news-description"></div>
      </div>
    </div>
    <div id="footer"></div>
  </body>
</html>

body 요소의 자식 요소는 총 3개입니다. id가 nav, news-contents, footer 인 3가지 요소입니다.

자바스크립트에서 DOM은 document 객체에 구현되어 있습니다. 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있습니다. 한번, body를 찾아보겠습니다.

DOM 구조를 조회할 때에는 console.dir 이 유용합니다. console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력합니다.

console.dir(document.body) 를 통해 출력된 객체에서, children 속성을 찾을 수 있습니다. children 속성에 nav, news-contents, footer 가 자식으로 있는 것을 확인할 수 있습니다. 물론 document.body.children 으로 바로 조회할 수도 있습니다.

📂 예제 2

다음 HTML 문서에서 id의 이름이 news-contents 인 요소의 부모 요소는 무엇인지 고르세요.

<html>
  <body>
    <div id="nav">
      <div class="logo"></div>
      <div class="menu-wrapper">
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="profile-photo"></div>
      </div>
    </div>
    <div id="news-contents">
      <div class="news-content-wrapper">
        <div class="news-picture"></div>
        <div class="news-title"></div>
        <div class="news-description"></div>
      </div>
    </div>
    <div id="footer"></div>
  </body>
</html>

id가 news-contents 인 div 요소는 <body> 요소의 자식 요소입니다. 반대로 <body> 요소는 id가 news-contents div 요소의 부모 요소입니다. 이 관계를 자바스크립트에서 확인합니다. id가 news-contents 인 엘리먼트를 조회하려면, document.body.children 의 첫 번째 요소를 조회합니다.

document.body.children[1]

div#news=contents
	accessKey: ""
    ...

document.body 의 children을 조회할 때마다, 매번 document.body 로부터 찾아가는 일은 정말 번거롭습니다. 따로 변수 선언을 해서 이 정보를 저장해두면, 주소를 참조하기 때문에 언제든지 접근할 수 있습니다. 변수 newsContents 를 따로 선언하여 id가 news-contents 인 요소를 할당합니다.

let newsContents = document.body.children[1]

console.log(newsContents)

div#news=contents
	accessKey: ""

💬 DOM 다루기

📂 CREATE

document 객체의 createElement 메서드를 이용하여<div> 요소를 만듭니다.

document.createElement('div')

// 새롭게 생성한 div element를 변수에 할당합니다.
const tweetDiv = document.createElement('div')

create만 한 요소는 현재 공중부양 중이다. 아무것도 연결되어 있지 않기 때문이다.

📂 APPEND

// 변수 tweetDiv에 담긴 새로운 <div> 요소를 <body> 요소에 append 합니다.
document.body.append(tweetDiv)

화면상으론 아무것도 보이지 않는 게 정상이다. 개발자 도구 Elements 탭에서 확인 가능하다.

📂 READ

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있습니다. 셀렉터로는 HTML 요소("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용됩니다.

참고로 querySelector는 셀렉터를 조회한다는 의미를 가지고 있습니다. query의 의미가 "질문하다"라는 것을 알고 있다면 역할을 쉽게 유추하실 수 있습니다. 이 query라는 단어는 개발자 간에 "ㅇㅇㅇ를 조회한다"라는 의미를 "쿼리를 날리다"라는 jargon(특정 영역에서만 사용되는 단어)로 굳어졌기 때문에 알고 있어야 합니다.

querySelector

querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.

const oneTweet = document.querySelector('.tweet')

여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll 을 사용합니다.

const tweets = document.querySelectorAll('.tweet')

CREATE에서 생성한 div 요소를 container에 넣을 준비를 마쳤습니다. 다음 코드를 입력하면, container의 맨 마지막 자식 요소로 tweetDiv를 추가합니다.

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

📂 UPDATE

// 빈 div 태그를 업데이트 한다
const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>

빈 div 태그를 업데이트하여, 보다 다양한 작업을 할 수 있습니다. 먼저, textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다.

CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다.

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

생성한 엘리먼트에 텍스트를 채웠고, 클래스를 추가하여 스타일링을 적용했습니다. 이번에는 append를 이용해 container의 자식 요소로 추가합니다.

const container = document.querySelector('#container')
container.append(oneDiv)

📂 DELETE

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

innerHTML 을 이용하면, 아주 간단하게 모든 자식 요소를 지울 수 있습니다. 컨테이너의 모든 자식 요소를 지우려면, 다음과 같이 입력합니다.

document.querySelector('#container').innerHTML = '';

innerHTML 을 이용하는 방법은 분명 간편하고 편리한 방식이지만, innerHTML은 보안에서 몇 가지 문제를 가지고 있습니다. 이 방법을 대신할 다른 메서드를 사용합니다. removeChild 는 자식 요소를 지정해서 삭제하는 메서드입니다. 모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있습니다. 다음의 코드는 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드입니다.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}
// container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거합니다.

removeChild 와 while 을 이용해 자식 요소를 삭제하면, 제목에 해당하는 H2 "Tweet List"까지 삭제됩니다. 이를 방지하기 위한 방법은 여러 가지가 있습니다. 자식 요소가 담고 있는 문자열을 비교해 "Tweet List"만 남기거나, 새로운 변수를 생성하고 Tweet List를 할당해뒀다가 반복문이 끝난 뒤에 새롭게 추가할 수도 있습니다. 또는 자식 요소를 하나만 남기게 할 수도 있습니다.

// container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거합니다.
const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

또는 직접 클래스 이름이 tweet인 요소만 찾아서 지우는 방법도 있습니다.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}