DOM(Document Object Model)
JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다.
HTML에 자바스크립트를 적용하기 위해서는 <script> 태그를 이용한다.
웹 브라우저가 <script> 요소를 만나면 HTML 해석을 일시정지하고 <script> 요소를 먼저 실행한다.
DOM 구조 조회할 때 -> console.dir()
console.dir()은 DOM을 객체의 모습으로 출력한다.
CREATE
HTML Element를 추가
// div element를 변수 createDiv에 할당
const createDiv = document.createElement('div')APPEND
HTML Element를 부모 노드에 포함
// createDiv를 트리 구조에 연결
document.body.append(tweetDiv)READ
HTML Element를 조회
querySelector
- querySelector의 첫 번째 인자로 선택자(selector)를 전달하여 확인
- 선택자 : 태그 선택자, id 선택자, class 선택자 등
// 클래스 이름이 box인 HTML 요소 조회
const oneBox = document.querySelector('.box')querySelectorAll
클래스 이름이 box인 요소가 여러 개 있을 때 여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll을 사용한다.
- 이렇게 조회한 HTML 요소들은 배열처럼 for문을 사용하실 수 있지만 배열은 아니다.
-> Array-like Object
// querySelectorAll로 클래스 이름이 box인 모든 HTML 요소를 유사 배열로 받아온다.
const boxes = document.querySelectorAll('.box')get으로 시작하는 DOM 조회 메서드
querySelector와 비슷한 역할을 하는 오래된 방식
- getElementById('container')
container의 맨 마지막 자식 요소로 boxDiv를 추가
const container = document.querySelector('#container')
const boxDiv = document.createElement('div')
container.append(boxDiv)UPDATE
HTML Element를 변경
<div> 엘리먼트 생성
const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>textContent - 엘리먼트에 문자열 입력
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>classList.add - 엘리먼트에 클래스 추가
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>container의 자식 요소로 추가
const container = document.querySelector('#container')
container.append(oneDiv)setAttribute 메서드 - class와 id 말고는 다른 attribute를 추가
https://developer.mozilla.org/ko/docs/Web/API/Element/setAttribute
DELETE
HTML Element를 삭제
remove 메서드 - 먼저 삭제하려는 요소의 위치를 알고 있는 경우
// id가 container인 요소 아래에 oneDiv를 추가하고, remove로 삭제
const container = document.querySelector('#container')
const oneDiv = document.createElement('div')
container.append(oneDiv)
oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.여러 개의 자식 요소 삭제
innerHTML
innerHTML을 이용하면, 아주 간단하게 모든 자식 요소를 삭제할 수 있지만 보안 문제를 가진다.
// id가 container인 요소 아래의 모든 요소를 삭제
document.querySelector('#container').innerHTML = '';removeChild - 자식 요소를 지정해서 삭제하는 메서드
- 반복문 활용
// 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제
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);
}특정 클래스 이름을 가진 요소만 찾아서 삭제
// 클래스 이름이 box인 요소만 찾아서 제거
const boxes = document.querySelectorAll('.box')
tweets.forEach(function(box){
box.remove();
})
// or
for (let box of boxes){
box.remove()
}이벤트 객체
이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체
let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // for 문으로도 충분히 구현할 수 있는 내용입니다.
// 사용자가 버튼을 클릭하면, 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있다.
function handleClick(event) {
// 아래의 빈칸(____)을 채우세요.
let currentMenu = e.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");Onclick vs AddEventListener
https://nangman14.tistory.com/27
https://poiemaweb.com/js-event
이벤트 종류
https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
https://jenny-daru.tistory.com/17
