DOM 문서 구조
- 브라우저에서 열리는 문서이면서 HTML, Mark Up언어로 이루어져 결국 브라우저에서 확인하면 이 문서 단위로 문서를 확인할 수 있음
- 이러한 구조를 구성하는데 있어서 시맨틱 태그를 권장함, 의미론적인 문서를 써야, 그 의도가 명확해짐
- 구조화 된 태그를 쓰고 익숙해지고 지키려고 노력해야함
Node, Tree
- 이러한 HTML 문서를 가져오는 것을 DOM이라고 함, HTML을 객체로 모델링하는 것임
- JS로 HTML에 접근해서 변경을 줄 수 있는 것임, 표현을 해 내는 것
- HTML은 문서이고 이 문서를 조작하는 언어가 JS임, 이를 조작하게끔 해주는게 DOM을 토대로 가지고 조작해서 처리할 수 있음
- 앞서 우리가 아는 HTML 태그 하나하나가 Node라고 볼 수 있고 생각할 수 있음
- 그리고 이러한 Node가 Tree형태로 되어 있다고 볼 수 있음(HTML 태그 구조를 본다면)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- 이러한 Node 내부의 태그가 바뀐 것이고 그 안에 다양한 메소드와 속성들을 가지고 있음
- DOM 조작을 위한 다양한 메소드와 속성들을 가지고 있는거고 그것을 JS로 컨트롤해서 처리할 수 있다는 것임
DOM 속성
- 기본적으로 개발자 도구에서 뽑아 놓은 li 태그등의 DOM 속성은 매우 많이 여러가지 있음
document.querySelector를 통해서 다양한 속성 & 메소드를 쓸 수 있음
DOM 선택
getElementByIdElement 태그의 id를 바라보고 해당 태그의 DOM을 가져올 수 있음- ID 단위로 가져와서 처리하는 것
- 그 다음으로
getElementsByClassName을 통해 Class명을 토대로 태그의 DOM을 가져옴(s가 붙은 것은 모든 자식의 Element를 가져오기 때문임) getElementsByTagName을 통해서 Tag명을 통해서 해당 태그의 DOM을 가져올 수 있음(우리가 아는 HTML 태그명들)- 하지만 위의 메소드들은 좀 불편한 감이 있는데, 이를 보완하기 위해 자주 쓰는 게
querySelector와querySelectorAll임 querySelector는 유효한 식별자 하나만 가져오는데, ID도 가능하고 Class도 가능하고 태그도 가능함(#은 ID,.은 Class를 통해 가져옴)querySelectorAll을 사용하게 되면 해당하는 모든 유효한 식별자를 다 가져옴(div.note)등 여러가지 조합을 해서 식별자를 가져올 수 있음- 그리고 예시와 같이 querySelector로 불러온 것을 또 그 해당하는 변수의 값에서 불러오는 추가적인 조치를 할 수도 있음
const nav = document.querySelector('#nav-access');
nav.querySelectorAll('li');DOM 조작
- 앞서 배운 DOM 선택으로 가져오고 이에 대해서 조작을 할 수 있음(예시처럼 가능, 네이버, 구글 웹 페이지 활용)
const searchButton = document.querySelector('.gN089b')
searchButton.classList.add('zero-base') // classList에 추가
searchButton.classList.remove('gN089b') // classList에 삭제
searchButton.classList.contains('zero-base') // classList에 포함되었는지 확인- 아래와 같이 text를 바꿀 수도 있음
const linkDirect = document.querySelector('.link_direct')
linkDirect.textContent
linkDirect.textContent = 'ZERO'- 리스트를 추가하고 뺄 수도 있음
const partnerBox = document.querySelector('.partner_box')
const el = document.querySelector('.link_partner')
partnerBox.removeChild(el)
const el2 = document.createElement('div')
el2.textContent = 'NEW'
partnerBox.appendChild(el2)
// HTML을 통쨰로 넣어서 바꿀 수 있음
partnerBox.innerHTML = '<h3 class="title">Zero Base</h3>'DOM 다루기
- window 객체가 최상위 객체로 존재하는데, 이 때 document객체의 경우 DOM에 접근할 수 있는 진입점 객체임
- 이를 통해서 JS로 페이지 요소를 변화시키거나 생성 & 삭제 할 수 있음, 전역 객체로써 쓸 수 있음
- 아래와 같이 주요한 DOM을 다루는 것은 다음과 같음
// 특정 요소 찾기
document.getElementById('아이디')
document.querySelector('css')
document.getElementByClassName('class')
document.getElementsByTagName('tag')
// 요소 만들기
document.createElement(tag)
Node.appendChild(Node)
Node.insertBefore(newNode, refNode)
// 인접 노드 접근
Node.children // 자식들
Node.firstElementChild, Node.lastElementChild // 첫번쨰, 마지막 자식
Node.previouseElementSibling, nextElementSibiling // 이전 형제, 이후 형제
Node.parentElement // 부모- 이를 직접 본다면 아래와 같이 확인하고 처리할 수 있음
<div id='test'>
테스트용
</div>Node {
id: 'test',
tagName: 'div',
innerHTML: '테스트용',
style: 스타일 객체,
}// DOM 변경하기
Node.innerHTML = '테스트용 수정';
Node.style.color = 'red';
Node.hidden = true;브라우저 객체
- 앞서 window 최상위 객체 하위에 브라우저 기능을 이용할 수 있는 진입점 객체로써 location, history, navigator 객체가 있음, 각각 아래와 같이 구성되어서 쓸 수 있음
- navigator 정보를 활용해서 브라우저 & 운영체제에 따른 처리를 다르게 할 수도 있음, Location을 통해서 정보에 대해서 따로 가져와서 확인할 수 있음
- history를 통해서 불러와 그 상태에 따라 뒤로가기, 앞으로 가기 등을 할 수 있음
Navigator {
language: 선호하는 언어,
maxTouchPoints: 동시 터치 지점 수,
userAgent: 브라우저 정보,
platform: 운영체제 정보
}
Location {
href: 현재 URL,
pathname: URL 경로,
reload: 새로고침 함수,
}
// location.href = '이동할 URL' => 직접 해당 사이트로 이동할 수 있음, 쓰기도 가능
History {
back: 뒤로 가기 수행,
forward: 앞으로 가기 수행,
}- 브라우저 환경에서는 window 객체를 통해 사용자와 상호작용을 할 수 있음
window {
alert: 경고 메시지 출력 함수,
confirm: 확인 메시지 출력 함수,
prompt: 입력 메시지 출력 함수,
setTimeout: n초 후에 함수를 실행하는 타이머 함수,
setInterval: n초 마다 함수를 실행하는 타이머 함수
}
// 타이머 함수 사용법
let timerId = setTimeout(() => {
console.log('3 seconds end');
}, 3000);
clearTimeout(timerId);
let timerId = setInterval(() => {
console.log('every 3 seconds');
}, 3000);
clearInterval(timerId);이벤트
이벤트란?
- JS를 끄면 웹 페이지가 정상적으로 작동 및 상호작용이 안되는데 그 이유는 JS에서 이벤트를 통해서 여러가지 상호작용을 하고 처리하기 떄문임
addEventListener를 통해 다양한 이벤트를 추가하고 처리할 수 있음(click등)
const resetButton = document.querySelector('.reset');
resetButton.addEventListener('click', function () {
alert('안녕하세요');
});-
이벤트 타입이 아주 많음, 클릭 뿐 아니라, 키다운, 등등, 이러한 이벤트가 감시되면 위처럼 타입을 정해둔 것이 트리거로 실행이 됨
-
활동이 발생했다는 신호로 함수(핸들러)를 연결시켜 활동 발생 시 동작하게(트리거되게) 함
-
대표적인 DOM 이벤트
click: 요소를 마우스 왼쪽 버튼으로 눌렀을 때 발생
change: 내부 값이 바뀌었을 때 발생
mouseover: 마우스 커서가 요소 위로 들어왔을 때 발생
mouseout: 마우스 커서가 요소 밖으로 나갔을 때 발생
focus: 요소에 포커스 했을 때 발생
Blur: 요소가 포커스를 잃었을 때 발생
keydown: 키보드를 눌렀을 때 발생
keyup: 키볻를 뗐을 때 발생
drag: 요소가 드래그 되었을 때 발생
...// 예시
<div onclick='함수이름/>
Node.onclick = (event) => {};
Node.addEventListener(
event,
handler,
);- 이벤트는 하위 요소에서 상위 요소로 가는 버블링이 발생함 이 때
event.stopPropagation으로 버블링을 중지시킬 수 있음 - 그리고 이벤트 캡처링도 발생함
이벤트 객체
- DOM Node가 이벤트 객체를 가지고 있다고 생각하면 편함, 메소드도 다양함
- 예시
// 함수를 넘기면 이벤트 객체를 넘겨줌(이벤트 타겟은 resetButton임)
const resetButton = document.querySelector('.reset');
resetButton.addEventListener('click', function (event) {
console.dir(event);
});이벤트 핸들러
- HTML 태그의 인라인 형태로 바로 이벤트를 넣을 수도 있음
<button onclick="alert('HELLO WORLD')">
<strong class="increment">+</strong>
</button>- remove도 가능함
const resetButton = document.querySelector('.reset');
resetButton.addEventListener('click', function (event) {
console.dir(event);
});
resetButton.removeEventListener('click', function (event) {
console.dir(event);
});- 함수를 넘기는 것 외에도, 이벤트 전파 여부 등을 알 수도 있음, 그리고 아래와 같이 처리해서도 가능
const resetButton = document.querySelector('.reset');
const onReset = function (event) {
console.log(event.target);
}
resetButton.addEventListener('click', onReset);- 위와 같이 js를 토대로 하면 어지간한 기능들은 다 만들 수 있음
측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다