DOM (Document Object Model)

What is DOM?

DOM은 Document Object Model의 약자로 HTML요소를 Javascript Object처럼 조작할 수 있는 모델입니다.

자바스크립트를 통해 DOM으로 HTML을 조작할 수 있습니다.

 

HTML에 Javascript 적용하기

HTML에 Javascript를 적용하기 위해서는 <script> 태그를 이용합니다.

// HTML 파일과 같은 디렉토리에 존재하는 myScript.js을 불러옵니다.
<script src="myScript.js"></script>

script 태그를 추가하는 두가지 대표적인 사례가 존재합니다. 하나는 head 태그에 추가하는 방법, 다른 하나는 /body 가 끝나기 전에 추가하는 방법입니다. 비교했을때 head 태그에 추가할 경우 제대로 출력을 하지않아 script 태그는 body가 끝나기 전에 추가해 사용합니다.

 

CREATE - createElement

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

APPEND - append, appendChild

document.body.append(tweetDiv) // 변수 tweetDiv를 body에 넣어줍니다

READ - querySelector, querySelectorAll

const oneTweet = document.querySelector('.tweet') // 클래스 이름이 tweet인 HTML Element를 조회합니다
const tweets = document.querySelector('.tweet) // 클래스 이름이 tweet인 모든 HTML Element를 유사 배열로 받아옵니다

const oneTweet = document.getElementById('tweet') // querySelector와 비슷한 역할을 하는 오래된 방식

UPDATE - textContent, classList.add

tweetDiv.textContent = 'dev'; // 비어있는 div 엘리먼트에 문자열을 입력합니다
console.log(oneDiv) // <div>dev<div>

tweetDiv.classList.add('tweet') // <div class="tweet">dev<div> // tweet 클래스를 추가합니다

DELETE - remove, removeChild

tweetDiv.remove() // append 했던 엘리먼트를 삭제합니다

// innerHTML을 이용하는 방법은 분명 간편하고 편리한 방식이지만, innerHTML은 보안에서 몇가지 문제를 가지고있습니다.
document.querySelector('#container').innerHTML = ''; // id가 container인 엘리먼트 아래 모든 엘리먼트를 지웁니다

// 대신할 메서드로 반복문을 통해 자식엘리먼트가 남아있지 않을 때까지 첫번째 자식엘리먼트를 삭제하는 코드입니다.
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}
// 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()
}

이벤트 객체

사용자가 버튼을 클릭하면, 그 버튼의 textContent을 이용해 메뉴의 이름을 가져올 수 있습니다. 사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져옵니다.

다시 말해 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll)을 트리거로 발생한 이벤트 정보를 담은 객체입니다.

<button>카페라떼</button>
  <script>
    let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

    let btnAmericano = menus[0];
    let btnCaffelatte = menus[1];

    function handleClick() {
      // 아래의 빈 칸(____)을 채우세요.
      // console.log("working?");
      let currentMenu = event.target.textContent; // TODO
      console.log(currentMenu + "를 클릭하셨습니다.");
    }

    btnAmericano.onclick = handleClick;
    btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.
</script>