DOM 스크립트
DOM (Document Object Model)
html태그를 자바스크립트가 제어 가능한 형태로 변환된 객체
- DOM 객체 생성
- DOM 정보 확인
- DOM 텍스트 정보 변경
- DOM 스타일 정보 변경
- DOM에 이벤트 연결
- DOM값 가져오기
- DOM에 태그 추가
1. 변경할 태그 요소 DOM 객체 생성
const h1 = document.querySelector('h1');
const a = document.querySelector('a');
문서 통째로 객체 생성
const htmlEl = document.documentElement
2. DOM 정보 확인
console.dir(h1);
console.dir(a);
3. DOM 텍스트 정보 변경
// h1.innerText = '김영희';
// h1.innerHTML = '<span>김판섭</span>';
4. DOM 스타일 정보 변경
h1.style.color = 'aqua';
for문을 이용해서, 스타일 한 번에 바꾸기
const errs = form.querySelectorAll('span');
// 전송버튼 클릭할때마다 모든 에러문구를 일단 다 찾은 뒤 화면에서 숨김처리
errs.forEach((text, idx) => {
text.style.display = 'none';
});
5-1. 이벤트 연결할 DOM 객체 생성
const btn1 = document.querySelector('.btn1');
const btn2 = document.querySelector('.btn2');
const btn3 = document.querySelector('.btn3');
클릭 요소를 DOM 배열로 선택
(같은 태그가 연달아 있는 데 클래스 지정하기 귀찮은 경우)
const btns = document.querySelectorAll('button');
console.log(btns);
5-2. 클릭 이벤트로 DOM 속성 변경
btn1.addEventListener('click', () => {
h1.innerText = '김영희';
});
btn2.addEventListener('click', () => {
h1.style.color = 'orange';
});
btn3.addEventListener('click', () => {
a.innerText = '네이트';
a.href = 'https://www.nate.com/';
a.target = '_blank';
});
btns[2].addEventListener('click', () => {
a.innerText = '네이트';
a.href = 'https://www.nate.com/';
a.target = '_blank';
});
5-3. 이벤트 (event)
웹상에서 사용자, 혹은 시스템에 일으키는 행동
- 사용자 이벤트
- click, mouseenter, mouseleave, scroll, resize
- 시스템 이벤트
- load, error, pending, fulfilled, rejected
- 이벤트 연결 (이벤트 바인딩)
- DOM.addEventListener('이벤트명', 이벤트 핸들러)
6. DOM값 가져오기 getComputedStyle()
JS는 html외의 css파일은 접근불가하므로 css에 있는 스타일 정보를 가져오는 것이 아닌 화면에 이미 렌더링된 결과화면을 다시 역으로 계산해서 가져옴
- const styleInfo = getComputedStyle(box);
- console.log(styleInfo.backgroundColor);
7. DOM에 태그 추가
1. 태그 문자열이 담길 변수 생성 (let tags='')
2. 배열을 반복 돌면서 data.프로퍼티명 형식으로 콘솔 출력
3. 반복문 안쪽에 아래와 같은 형식으로 구조 생성
tags += `
원하는 태그 구조
`;
4. 반복문 밖에서 해당 tags를 innerHTML로 꽂아넣기
※ 자식 요소로 추가하고 싶다면. append()를 사용한다.
단, 텍스트는 추가 안되므로 create 요소를 만들어서 추가해야 한다.
const div = document.createElement('div');
const span = document.createElement('span');
span.textContent = data;
div.append(span);
기존 태그
<div>sss</div>
DOM 객체 생성
const members = ['David', 'Andy', 'Emily'];
const div = document.querySelector('div');
태그 작성
let tags = '';
members.forEach((data, idx) => {
tags += `<h2><span>${data}</span></h2>`;
});
console.log(tags);
div.innerHTML = tags;
실습 예제, 클릭으로 사각형 회전 (DOM 속성 정보 변경)
style.css
.box {
width: 300px;
height: 300px;
margin: 50px;
background-color: aqua;
transform: 0deg;
}
main.js
const box = document.querySelector('.box');
const btns = document.querySelectorAll('button');
let count = 0;
btns[0].addEventListener('click', () => {
box.style.transform = `rotate(${--count * 30}deg)`;
});
btns[1].addEventListener('click', () => {
box.style.transform = `rotate(${++count * 30}deg)`;
});
Position 지정
- 자잘한 요소들을 좌표 값을 이용해서 자유롭게 배치
- 부모 프레임에 position: relative 설정
(자식이 absoulte를 적용하려면, 부모는 값이 무엇이든 position을 선언해야 함)
(자식이 absoulte를 적용하려면, 부모는 값이 무엇이든 position을 선언해야 함)
- 배치할 요소에 position: absolute;
- 가로(left, right), 세로 좌표값(top, bottom)설정
- absolute를 활용하면 블록요소를 겹치도록 처리 가능
실습 예제1, 버튼을 누르면 레이어가 나타남
btnCall: 메뉴를 나타나게 하는 버튼
mobileMenu: 나타날 메뉴
btnClose: 나타날 메뉴 닫기 버튼
<section class="frame">
<button class="btnCall">menu</button>
<nav class="mobileMenu">
<button class="btnClose">close</button>
</nav>
</section>
<nav> 쿼리의 초기 값 = .mobileMenu
<nav> 나타났을 때 값 = .mobileMenu.on
.frame {
width: 350px;
height: 700px;
border: 1px solid black;
margin: 50px auto;
position: relative;
overflow: hidden;
}
/* 비활성화 상태일때 (on클래스 없을때) */
.frame .mobileMenu {
width: 100%;
height: 20%;
background-color: aqua;
position: absolute;
top: 0px;
right: -100%;
opacity: 0;
transition: 0.5s;
}
.frame .btnCall {
position: absolute;
right: 50px;
top: 50px;
}
/* 활성화 상태일때 (on클래스 있을때) */
.frame .mobileMenu.on {
right: 0%;
opacity: 1;
}
.frame .mobileMenu .btnClose {
position: absolute;
top: 50px;
left: 50px;
}
버튼을 클릭했을 때, <nav>의 클래스명만 바꿔준다.
const btnCall = document.querySelector('.btnCall');
const mobileMenu = document.querySelector('.mobileMenu');
const btnClose = document.querySelector('.btnClose');
//메뉴 활성화 처리 이벤트
btnCall.addEventListener('click', () => {
mobileMenu.classList.add('on');
});
//메뉴 비활성화 처리 이벤트
btnClose.addEventListener('click', () => {
mobileMenu.classList.remove('on');
});
버튼 하나만 가지고 on/off 만들기
btnToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('on');
})
실습 예제2, API를 이용해 외부 서버데이터 내 웹문서에 가져오기
index.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>
<script type="module" src="main.js"></script>
</head>
<body>
<section></section>
</body>
</html>
main.js
const api_key = 'AIzaSyAA1--4yowu_MLnUqDB7a200vEhqphM84Q';
const pid = 'PLXVj76JGLotR4xaw0HyL9VwOa5y6efr_j';
const num = 3;
const base_url = 'https://www.googleapis.com/youtube/v3/playlistItems';
const req_url = `${base_url}?part=snippet&playlistId=${pid}&key=${api_key}&maxResults=${num}`;
const section = document.querySelector('section');
//외부 데이터 불러오는 패턴
fetch(req_url).then((data)=>{
return data.json();
})
.then((json)=>{
// console.log(json);
const youtubeArr = json.items;
console.log(youtubeArr);
let tags = ''
youtubeArr.forEach((data, idx)=>{
// console.log(data.snippet.title);
// console.log(data.snippet.description);
tags += `<article>
<h2>${data.snippet.title}</h2>
<img src=${data.snippet.thumbnails.high.url}>
<p>${data.snippet.description}</p>
</article>
`;
})
// console.log(tags);
section.innerHTML = tags;
});
Tags:
웹개발_교육
