16일차

JiHun·2023년 5월 1일

부트캠프

목록 보기

16/56

DOM

JavaScript를 이용하여 HTML을 조작해보자.

DOM 기초

DOM(Document Object Model)
HTML 요소를 Object처럼 조작할 수 있는 Model이다.
HTML을 분석하여 HTML에 접근할 수 있는 구조가 있다. 이 구조를 DOM이다. DOM을 이용하여 웹 페이지를 동적으로 만들 수 있다.

DOM은 문서를 표현하고 저장하고, 조작하는 방법을 제공하고, 자바스크립트와 같은 스크립티 언어를 이용해 DOM을 수정할 수 있다.

HTML을 객체로 표현해서 트리구조를 만든다.

HTML에 JavaScript 적용

HTML에 JavaScript를 적용하는 방법

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

웹 브라우저가 코드를 해석하다가 <script>요소를 만나면 다 멈추고 <script> 요소를 먼저 실행한다. 따라서, 태그들을 다 읽은 후 DOM을 사용하는게 더 낫다. DOM을 사용하려면 <script>를 <head>에 넣는것 보다 <body>에 넣는게 에러를 줄일 수 있다.

JavaScript에서 DOM은 document 객체에 구현되어있다. 브라우저에서 작동되는 JavaScript코드에서 어디에서나 documen 객체를 조회할 수 있다.

console.log(document.body);로 조회하면 그냥 HTML 형태로 조회가 된다.

console.dir(document.body);로 조회하면 DOM을 객체의 모습으로 출력한다. HTML 엘리먼트에 지정할 수 있는 다양한 속성이 출력된다. 속성을 둘러보다보면 자식요소를 찾을 수 있는 children을 볼 수 있다. document.body.children으로 바로 조회할 수 있습니다.
document.body.children의 속성까지 조회할 수 있으며, document.body.children[0].parentElement처럼 부모요소도 조회 수 있다.

DOM 다루기

CRUD(Create, Read, Update, Delete)는 어느 개발에서도 가장 기본적인 개발환경이다. 이 개발환경을 구축하기 위해서 순서대로 배워보자.

CREATE

document.createElement('div') document 객체의 createElement 메서드를 이용해서 <div>요소를 만든다. 새롭게 생성한 div element를 변수를 선언하고 결과를 할당한다.

const createDiv = document.createElement('div');

이렇게 만들면 웹 페이지에서 변화는 없다. div를 만들기만 했다. 트리구조에서 연결되지 않은 노드만 그린거다.

APPEND

document.body.append(createDiv)

append라는 메서드를 이용해서 만들어놨던 createDiv를 body의 마지막 요소로 추가한다.

READ

이제는 HTML에 있는 요소 DOM으로 읽는 작업을 알아보자.

const oneDiv = document.querySelector('.div');
const divs = document.querySelectorAll('.div');

querySelectorAll 메서드를 쓰게 되면 .div를 다 읽어오며 배열 같은 객체(Array-like Object)를 불러옵니다. 배열의 for문을 적용할 수도 있다.

UPDATE

새로운 DOM 객체를 만들고, 기존의 DOM 객체이 붙이고, DOM 객체를 선택해서 조회까지 할 수 있었다.

const oneDiv = document.createElement('div')
oneDiv.textContent = 'dev'
oneDiv.classList.add('tweet');
console.log(oneDiv);   // <div class="tweet">dev</div>

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

새로 만들고 textContent 추가하고 class를 추가하고 container의 마지막 자식 요소로 추가한다.

div.setAttribute("name", "hello")  // <div name="hello"></div>

class 추가하는거 말고도 name 특성을 설정해 줄수 있다.

DELETE

마지막으로 삭제하는 법을 알아보자. 삭제하려는 위치를 알고 있는 경우.

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

removeChild()라는 자식 요소를 지정해서 삭제하는 메서드도 있다.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

firstChild 메서드를 이용해서 while 반복문으로 모든 자식 요소 삭제

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

while 반복문으로 첫번째 자식요소만 남겨두기.

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

클래스 이름으로 찾은 요소들을 배열 형태로 할당한 다음, forEach() 메서드를 사용해서 같은 클래스 이름을 가진 요소들만 삭제 한다.

이벤트 객체

웹 페이지에서 클릭이나 input에 뭘 적는다거나 이렇게 하는 일을 이벤트라고 한다. 이벤트 핸들러를 적절한 엘리먼트에 적용해서 사용자가 특정 이벤트를 발생시켰을 때 이벤트 핸들러가 작동 하도록 한다.

let menus = document.querySelectorAll("button");

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


function handleClick(event) {
	let currentMenu = event.target.textContent;
    console.log(currentMenu + "를 클릭하셨습니다."
}