DOM

유슬기·2023년 1월 8일

코드스테이츠

프론트엔드

목록 보기

19/64

DOM이란?

Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다.

DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다.

console.dir

console.log와 달리 DOM을 객체의 모습으로 출력해 DOM 구조를 조회할 때 유용하다.

console.dir.png

하지만 너무 많은 속성이 보인다. (HTML 엘리먼트에 지정할 수 있는 다양한 속성이 이미 객체 내에 존재함)

여기서 body의 자식 요소를 조회하려면? → document.body.children으로 조회하면 된다.

children

자바스크립트로 부모 요소 찾기

Node.parentElement를 사용하면 된다.

// 변수 선언 및 body의 [1]번째 자식 요소를 찾아 할당
const newsContents = document.body.children[1]

// newsContents의 부모 요소를 찾기
// 구문: element.parentElement
const parentEl = newsContents.parentElement

parentNode / parentElement, childNodes / children의 차이

모든 자식 엘리먼트의 class 이름 확인하기

id의 이름이 nav인 div 엘리먼트를 포함해서, 모든 자식 엘리먼트의 class 이름을 console.log를 사용하여 확인하는 방법을 의사 코드(pseudocode)로 작성하세요.

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

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의 자식 엘리먼트가 있는지 검색합니다 (없음)
 //자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
}

DOM 다루기

아래와 같은 HTML이 있을 때, 자바스크립트로 DOM을 다루는 방법

<body>
    <div id="container">
      <h2>Tweet List</h2>
      <div class="tweet">hello</div>
      <div class="tweet">world</div>
      <div class="tweet">code</div>
      <div class="tweet">states</div>
    </div>
  </body>

Create

DOM을 이용하여 HTML Element를 추가하는 방법

// 변수 선언 및 새로 생성한 div 요소를 변수에 할당
const tweetDiv = document.createElement('div')

<body>
    <div id="container">
      <h2>Tweet List</h2>
      <div class="tweet">hello</div>
      <div class="tweet">world</div>
      <div class="tweet">code</div>
      <div class="tweet">states</div>
    </div>
<!-- 새로 생성한 div 요소가 연결이 되지 않아 개발자 도구에서 보이지 않음 -->
  </body>

이 때, tweetDiv 요소는 DOM 트리에 연결이 되어있지 않음

Append

DOM을 이용하여 HTML Element를 부모 노드에 포함하는 방법

// append 메서드를 사용하여 tweetDiv를 <body>에 넣기
document.body.append(tweetDiv)

<body>
    <div id="container">
      <h2>Tweet List</h2>
      <div class="tweet">hello</div>
      <div class="tweet">world</div>
      <div class="tweet">code</div>
      <div class="tweet">states</div>
    </div>
		<div></div> <!-- JS로 생성한 tweetDiv -->
  </body>

Read

DOM을 이용하여 HTML Element를 조회하는 방법

// querySelector로 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회
const oneTweet = document.querySelector('.tweet')
// querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 엘리먼트를 유사 배열(Array-like Object)로 받아오기
const tweets = document.querySelectorAll('.tweet')

get으로 시작하는 DOM 조회 메서드도 있다. (이전 방식)

// getElementById와 querySelector로 동일한 엘리먼트 받아오기
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

Update

DOM을 이용하여 HTML Element를 변경하는 방법

const container = document.querySelector('#container') // 조회
const oneDiv = document.createElement('div'); // 생성
container.append(oneDiv) // container에 oneDiv 추가

element에 text 넣기

oneDiv.textContent = 'dev'; // text 넣기
console.log(oneDiv) // <div>dev</div>

element에 class 추가하기

oneDiv.classList.add('tweet'); // class 추가하기
console.log(oneDiv); // <div class="tweet"></div>

element에 있는 class 삭제하기

// oneDiv가 <div class="tweet tweet2"></div> 일 때,
oneDiv.classList.remove('tweet'); // class='tweet' 삭제하기
console.log(oneDiv); // <div class="tweet2"></div>

element에 id 추가하기

oneDiv.id = 'add-id'; // id 추가하기
console.log(oneDiv); // <div id="add-id"></div>

Delete

DOM을 이용하여 HTML Element를 삭제하는 방법

// 삭제하려는 요소의 위치를 알고 있는 경우
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다

// id="container"인 요소 아래의 모든 요소 삭제하기
document.querySelector('#container').innerHTML = '';

innerHTML을 이용하면 간편하지만, 보안에서 몇 가지 문제를 가지고 있다. innerHTML이 아닌 다른 메서드를 사용하여 요소를 삭제할 수 있다.

removeChild() 메서드로 자식 요소 삭제하기

// 모든 자식 요소 삭제하기

const container = document.querySelector('#container');
// container의 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제(while문 이용)
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

// 첫째 자식 요소 1개만 남기기

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

// class 이름으로 요소를 찾아 삭제하기

// class="tweet"인 요소를 찾기
const tweets = document.querySelectorAll('.tweet')

// 
tweets.forEach(function(tweet){
    tweet.remove();
})

// 또는, 아래 코드도 동일하게 작동한다

for (let tweet of tweets){
    tweet.remove()
}

추가 학습

class와 id 이외의 속성을 추가하려면 어떻게 해야할까? → setAttribute(name, value) 메서드를 이용하면 된다.

// 속성 추가하기
// 구문: element.setAttribute(속성명, 속성값)

oneDiv.setAttribute("name", "example"); // name="example" 속성 추가
console.log(oneDiv);  // <div name="example"></div>

// 속성 변경하기
oneDiv.setAttribute("name", "changed"); // name 속성 값을 "changed"로 변경
console.log(oneDiv);  // <div name="changed"></div>

엘리먼트의 속성을 삭제할 수도 있을까?

// 속성 삭제하기
// 구문: element.removeAttribute(속성명)

// <div name="example"></div> 이러한 요소가 있을 때,
oneDiv.removeAttribute("name"); // name 속성을 삭제
console.log(oneDiv);  // <div></div>

속성값 조회도 가능하다.

// 속성값 조회하기
// 구문: element.getAttribute(속성명)
// <div class= "tweet test"></div> 이러한 요소가 있을 때,
const getClassList = oneDiv.getAttribute("class");
console.log(getClassList); // tweet test