Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
Tags
- JSP
- github
- 웹표준
- SQLD후기
- 기초
- 코딩공부
- 바닐라스크립트
- sqld52회차
- 애니메이션
- 텍스트조절
- SQL
- jQuery
- 웹개발키워드
- 바닐라자바스크립트
- TweenMax.js
- git
- Slide
- 로또 회차
- 프론트앤드키워드
- CSS
- 바닐라 자바스크립트
- VANILLA
- sqld
- Python
- 팝업레이어
- 웹접근성
- 마우스커서
- asp
- JS
- IP차단
Archives
- Today
- Total
단비의 코딩 공부 blog
[Vanilla JS]study 9일차 - DOM 본문
1. 문서객체선택1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<!-- 정적 생성 : html에서 직접적으로 마크업하는것 -->
<h1 id="title01">제목태그</h1>
<h1 id="title02">제목태그</h1>
<!-- 문서객체를 먼저 읽어야 스크립트가 문서객체를 인식! 해당태그아래 작성 -->
<script>
//동적생성 : js에서 문서객체를 생성하는 것
//document : 문서객체
//모든 객체는 속성과 메서드를 갖고있음
//문서객체선택1 : id명으로 문서객체를 선택
var title01 = document.getElementById('title01');
//style : 문서객체의 css속성을 컨트롤하는 속성
title01.style.color = 'red';
</script>
</body>
</html>2. 문서객체선택2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<!-- 나열해서 태그 작성 -->
<h1>제목태그</h1> <!--인덱스 번호 배당 1-->
<h1>제목태그</h1> <!--인덱스 번호 배당 2-->
<h1>제목태그</h1> <!--인덱스 번호 배당 3-->
<script>
//문서객체선택2 : 태그명으로 선택 - 무조건 복수로 인식
var title = document.getElementsByTagName('h1');
title[0].style.color = 'red';
title[1].style.color = 'green';
title[2].style.color = 'blue';
</script>
</body>
</html>
3. 문서객체선택3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<h1 class="title">제목태그</h1>
<h1 class="title">제목태그</h1>
<h1 class="title">제목태그</h1>
<script>
//문서객체선택3 - 클래스로 선택 - 복수로 인식
var title = document.getElementsByClassName('title');
title[0].style.color = 'red';
title[1].style.color = 'green';
title[2].style.color = 'blue';
</script>
</body>
</html>4. 문서객체선택4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<h1 class="title">제목태그</h1>
<h1 class="title">제목태그</h1>
<h1 class="title">제목태그</h1>
<script>
//문서객체선택4 - css선택자로 선택 - 배열로 선택
var title = document.querySelector('.title');
var titleAll = document.querySelectorAll('.title');
//title.style.color = 'red'; //첫번째 요소만 선택 - 배열번호를 쓰지 않음
title.style.textDecoration = 'underline'; //첫번째 요소만 선택 - 배열번호를 쓰지 않음
titleAll[0].style.color = 'red';
titleAll[1].style.color = 'green';
titleAll[2].style.color = 'blue';
</script>
</body>
</html>5. 준비구문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script>
//준비구문 : 창을 먼저 읽고(문서객체 다 읽고) 스크립트 구문을 실행
//제이쿼리와는 다르게 자바스크립트에서는 준비 구문을 한번만 작성해야함
window.onload = function(){
var title = document.querySelector('.title');
title.style.color = 'red';
}
</script>
</head>
<body>
<h1 class="title">제목태그</h1>
<h1 class="title">제목태그</h1>
<h1 class="title">제목태그</h1>
</body>
</html>6. 문서객체생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<!-- 정적생성 -->
<h1>제목태그1</h1>
<script>
//동적생성 : JS가 요소를 생상하는 것
//메서드방식
var h2 = document.createElement('h2'); //태그를 새롭게 생성하는 메서드
var text = document.createTextNode('제목태그2'); //텍스트컨텐츠를 새롭게 생상하는 메서드
h2.appendChild(text);
//body의 자속으로 마지막에 추가
//body : 문서객체의 body태그를 의미
document.body.appendChild(h2);
</script>
</body>
</html>7. 문서객체생성 - 속성방식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<h1></h1>
<script>
//문서객체선택
var h1 = document.querySelector('h1');
//innderHTML = 값; - 문서객체 내부에 HTML요소 추가
h1.innerHTML = '<a href="#">링크태그</a>';
</script>
</body>
</html>8. 텍스트추가속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style>
span{display: none;}
</style>
</head>
<body>
<h1>테스트<span>01</span></h1>
<h1>테스트<span>02</span></h1>
<h1>테스트<span>03</span></h1>
<h2></h2>
<h2></h2>
<h2></h2>
<script>
//문서객체선택
var h1 = document.getElementsByTagName('h1');
var h2 = document.getElementsByTagName('h2');
alert(h1[0].innerHTML); //태그인식 - 태그도 가져옴
alert(h1[1].innerText); //태그미인식 + display:none; 처리된 것은 가져오지 않음
alert(h1[2].textContent); //태그미인식 + display:none; 처리된 것은 가져옴
var a = '<a href = "#">링크태그</a>';
//문서객체에 텍스트를 추가
h2[0].innerHTML = a;
h2[1].innerText = a;
h2[2].textContent = a;
</script>
</body>
</html>9. 태그속성관련 메서드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<script>
//이미지객체 생성
var img = document.createElement('img');
document.body.appendChild(img);
//태그속성컨트롤메서드
//1. 게터 : getAttribute('속성명')
//2. 세터 : setAttribute('속성명',값)
img.setAttribute('src','test.jpg');
img.setAttribute('width',300);
alert(img.getAttribute('width'));
</script>
</body>
</html>10. child관련 메서드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="box">
<h1>제목태그1</h1>
<p>문단태그</p>
</div>
<script>
var box = document.getElementById('box');
var h1 = document.querySelector('#box > h1');
var p = document.querySelector('#box > p');
//1. appendChild(요소) : 문서객체의 마지막 자손으로 요소를 추가
var h2 = document.createElement('h2');
h2.textContent = '제목태그2';
box.appendChild(h2);
//2. removeChild(요소) : 문서객체의 자손을 제거
box.removeChild(p);
//3. replaceChild(새로운요소, 이전요소) : 이전요소를 새로운요소로 변경
var h3 = document.createElement('h3');
h3.textContent = '제목태그3';
box.replaceChild(h3,h1);
</script>
</body>
</html>11. 시계만들기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>제이쿼리 탁상시계</title>
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="clock">
<h2 class="hour"></h2>
<h2 class="minute"></h2>
<h2 class="second"></h2>
<h4 class="weekday"></h4>
<h3 class="year"></h3>
<h3 class="month"></h3>
<h3 class="date"></h3>
</div>
<script src="common.js"></script>
</body>
</html>@import url('https://fonts.googleapis.com/css?family=Electrolize');
*{ padding: 0; margin: 0; font-family: 'Electrolize', sans-serif; }
.clock{ width: 680px; height: 160px; margin: 50px; padding: 30px 40px; box-sizing: border-box; background-color: lightgray; border-radius: 15px; }
.clock h2{ float: left; width: 100px; height: 100px; background-color: #000000; margin-right: 20px; color: #FFFFFF; text-align: center; line-height: 100px; font-size: 65px; text-shadow: 0px 0px 5px yellow; border-radius: 5px; }
.clock h4{ float: left; width: 240px; height: 45px; margin-bottom: 10px; background-color: #000000; color: #FFFFFF; text-align: center; line-height: 50px; font-size: 35px; text-shadow: 0px 0px 3px yellow; border-radius: 5px; text-transform: uppercase; }
.clock h3{ float: left; width: 50px; height: 45px; margin-right: 20px; background-color: #000000; color: #FFFFFF; text-align: center; line-height: 50px; font-size: 30px; text-shadow: 0px 0px 3px yellow; border-radius: 5px; }
.clock .year{ width: 100px; }
.clock .date{ margin-right: 0; }//시계가 표시되는 함수선언 - 생각만 하고 있는 상태
function clock(){
//문서객체선택
var time = document.querySelectorAll('.clock > h2');
var date = document.querySelectorAll('.clock > h3');
var weekday = document.querySelector('.clock > .weekday');
//오늘을 담는 변수
var today = new Date();
//각각의 값을 담는 변수
var timeData = [today.getHours(), today.getMinutes(), today.getSeconds()];
var dateData = [today.getFullYear(), today.getMonth() + 1, today.getDate()];
var day = today.getDay();
//요일을 배열에 담기
var week = ['sun','mon','tues','wednes','thurs','fri','satur'];
//반복
for(var i in timeData){
//데이터가 10보다 작으면 앞에 0을 붙이기
if(timeData[i] < 10){
timeData[i] = '0' + timeData[i];
}
if(dateData[i] < 10){
dateData[i] = '0' + dateData[i];
}
time[i].textContent = timeData[i];
date[i].textContent = dateData[i];
}
weekday.textContent = week[day] + 'day';
}
//초기실행 - 모든데이터가 보이게 처리
clock();
//1초마다 - 데이터 변경돼서 보이게 처리
setInterval(clock,1000);12. 고전이벤트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<h1>제목태그</h1>
<script>
//이벤트 : 명령을 발생시키는 시점
//고전이벤트 : 객체명.on이벤트타입 = 콜백함수;
//h1태그를 클릭하면 글자색을 빨간색으로 변경
var h1 = document.querySelector('h1');
h1.onclick = function(){
//this : 객체가 자신의 코드블록 { } 내부에서 자신을 호출할 때 사용
this.style.color = 'red';
}
</script>
</body>
</html>13. 이벤트 추가 메서드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<h1>제목태그</h1>
<script>
//이벤트 : 명령을 발생시키는 시점
//addEventListener('이벤트타입', 콜백함수)
//h1태그를 클릭하면 글자색을 빨간색으로 변경
var h1 = document.querySelector('h1');
h1.addEventListener('click', function(){
this.style.color = 'red';
});
</script>
</body>
</html>14. 이벤트 제거 메서드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<h1>제목태그</h1>
<script>
//이벤트 : 명령을 발생시키는 시점
//removeEventListener('이벤트타입', 콜백함수)
//h1태그를 클릭하면 경고창 띄우기, 5초뒤에는 경고창 안뜨게 처리
var h1 = document.querySelector('h1');
function popup(){
alert('클릭되었습니다.');
}
h1.addEventListener('click', popup);
setTimeout(function(){
h1.removeEventListener('click', popup)
}, 5000);
</script>
</body>
</html>15. 인라인이벤트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<!-- 인라인 이벤트 : 태그속성으로 이벤트를 작성하는 것 -->
<h1 onclick="this.style.color='red';">제목태그</h1>
<script>
</script>
</body>
</html>16. 마우스이벤트1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
<style>
div{width: 200px; height: 100px; border: 3px solid black;}
</style>
</head>
<body>
<button>red</button>
<button>green</button>
<button>blue</button>
<hr>
<div></div>
<script>
//이벤트의 종류
//1. 마우스 이벤트
//2. 키보드 이벤트
//3. 폼관련 이벤트
//4. 창관련 이벤트
//5. 기타 이벤트
//버튼을 클릭하면 해당텍스트로 box의 배경색을 변경
var box = document.querySelector('div');
var btn = document.querySelectorAll('button');
//명령을 함수에 담기
function bgChange(){
var color = this.textContent;
box.style.backgroundColor = color;
}
for(var i in btn){
btn[i].onclick = bgChange;
}
</script>
</body>
</html>17. 마우스이벤트2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<h1>제목태그1</h1>
<h1>제목태그2</h1>
<h1>제목태그3</h1>
<script>
//mouseenter : 문서객체에 마우스가 들어갔을 때(자손요소가 있어서 이벤트 중복이 일어나지 않음)
//mouseleave : 문서객체에서 마우스가 떠났을 때(자손요소가 있어서 이벤트 중복이 일어나지 않음)
//h1에 마우스를 올리면 배경색 - 검정색, 글자색 - 노란색 처리, 마우스를 내리면 원래대로 처리
//문서객체선택
var h1 = document.getElementsByTagName('h1');
for(var i in h1){
h1[i].addEventListener('mouseenter', function(){
this.style.color = 'yellow';
this.style.backgroundColor = 'black';
});
h1[i].addEventListener('mouseleave', function(){
this.style.color = 'black';
this.style.backgroundColor = 'transparent';
});
}
</script>
</body>
</html>18. 키보드 이벤트1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<label for="dollarBox">미국 USD</label><br>
<input type="text" id="dollarBox" value="1">
<hr>
<label for="wonBox">한국 KRW</label><br>
<input type="text" id="wonBox">
<script>
//키보드이벤트
//keyup : 키보드를 눌렀다 뗐을 때
//value : 폼관련 태그의 value값 속성
//문서객체선택
var dollarBox = document.getElementById('dollarBox');
var wonBox = document.getElementById('wonBox');
var dollar = 1425;
wonBox.value = dollar;
//dollarBox에서 키보드를 눌렀다 뗐을 때 wonBox에 달러 * 사용자 수치로 wonBox에 결과를 표시하시오.
//단, 0보다 크게적었을 때 처리, 그렇지 않은 경우 전부 0으로 다시 표시
dollarBox.addEventListener('keyup',function(){
//dollarBox의 value값을 담는 변수
var v = this.value;
if(v >= 0){
wonBox.value = dollar * v;
}else{
this.value = 0;
wonBox.value = 0;
}
});
</script>
</body>
</html>19. 키보드이벤트2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<label for="coupon">쿠폰번호입력</label><br>
<input type="text" id="coupon" placeholder="8자리입력" maxlength="8">
<script>
//쿠폰에서 글자를 입력했을 때 대문자로 변경하시오.
var coupon = document.getElementById('coupon');
coupon.addEventListener('keyup', function(){
var v = this.value; //현재 입력된 값
this.value = v.toUpperCase(); //대문자로 변경(String객체의 메서드)
});
//keyup : 키보드를 눌렀다 뗐을 때
//keydown : 키보드를 누르고 있을 때(특수키인식)
//keypress : 키보드를 누르고 있을 때(특수키미인식)
</script>
</body>
</html>20. 입력양식이벤트1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<label for="coupon">쿠폰번호입력</label><br>
<input type="text" id="coupon" placeholder="8자리입력" maxlength="8">
<script>
//focus : 입력양식 + a태그에 초점을 받았을 때
//blur : 입력양식+ a태그에 초점이 벗어났을 때
//쿠폰에 초점을 받으면 배경색을 노란색으로, 초점이 벗어나면 흰색으로 처리
var coupon = document.getElementById('coupon');
coupon.addEventListener('focus', function(){
this.style.backgroundColor = 'yellow';
});
coupon.addEventListener('blur', function(){
this.style.backgroundColor = 'white';
});
</script>
</body>
</html>21. 입력양식이벤트2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<input type="checkbox" id="chk01" class="check">
<label for="chk01">약관1</label>
<input type="checkbox" id="chk02" class="check">
<label for="chk02">약관2</label>
<input type="checkbox" id="chk03" class="check">
<label for="chk03">약관3</label>
<hr>
<input type="checkbox" id="allChk">
<label for="allChk">모두 동의</label>
<script>
//문서객체선택
var chk01 = document.getElementById('chk01');
var chk02 = document.getElementById('chk02');
var chk03 = document.getElementById('chk03');
var check = document.querySelectorAll('.check');
var allChk = document.getElementById('allChk');
//checked : 체크박스나 라디오버튼에 체크상황을 컨트롤
// true/false로 값을 처리
//change : form관련 태그에 값이 변경되었을 때
allChk.addEventListener('change', function(){
var chk = this.checked;
if(chk){ //체크가 되었다면
for(var i in check){
check[i].checked = true;
}
}else{ //미체크 되었다면
for(var i in check){
check[i].checked = false;
}
}
});
//각각 체크박스에 change이벤트 처리
for(var i in check){
check[i].addEventListener('change',function(){
if(chk01.checked && chk02.checked && chk03.checked){
allChk.checked = true;
}else{ //하나라도 미체크라면
allChk.checked = false;
}
});
}
</script>
</body>
</html>
22. 숫자에따른 성별체크하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<input type="text" placeholder="생년월일입력" maxlength="6"> -
<input type="text" id="first" maxlength="1" style="width: 15px;">XXXXXX
<hr>
<input type="radio" id="male" name="gender">
<label for="male">남자</label>
<input type="radio" id="female" name="gender">
<label for="female">여자</label>
<script>
//문서객체담기
var first = document.getElementById('first');
var male = document.getElementById('male');
var female = document.getElementById('female');
first.onkeyup = function(){
var num = this.value;
if(num == 1 || num == 3){
male.checked = true;
}else if(num == 2 || num == 4){
female.checked = true;
}else if(num == ''){
}else{
male.checked = false;
female.checked = false;
alert('1~4사이 정수로 입력해주세요.');
}
}
</script>
</body>
</html>23. resize이벤트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
</head>
<body>
<h1>가로폭 : <span id="text01"></span></h1>
<h1>세로높이 : <span id="text02"></span></h1>
<script>
//resize : 창의 사이즈가 변경되었을 때
//문서객체 선택
var text01 = document.getElementById('text01');
var text02 = document.getElementById('text02');
function reSize(){
text01.textContent = this.innerWidth;
text02.textContent = this.innerHeight;
}
//초기실행 호출
reSize();
window.addEventListener('resize',reSize);
</script>
</body>
</html>24. scroll이벤트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - 이벤트</title>
<style>
body{height: 3000px;} /*스크롤바 생성*/
button{position: fixed; left: 10px; top: 10px;}
</style>
</head>
<body>
<button>500px 아래로 ▽</button>
<script>
//scroll : 창의 스크롤바를 움직였을 때
window.addEventListener('scroll', function(){
document.body.style.backgroundColor = 'beige';
});
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
//scrollTo() : 스크롤바의 위치를 변경
window.scrollTo({
left : 0,
top : 500,
behavior : 'smooth' //자연스럽게 내려가게 처리
});
});
</script>
</body>
</html>
'javascript&jquery' 카테고리의 다른 글
| [Vanilla JS]study 11일차 - ES6 (0) | 2023.03.13 |
|---|---|
| [Vanilla JS]study 10일차 - DOM2 (0) | 2023.03.10 |
| [Vanilla JS]study 8일차 - BOM (1) | 2023.01.27 |
| [Vanilla JS]study 7일차 - 기본내장객체 로또생성하기 (0) | 2023.01.11 |
| [jquery]버튼 클릭 시 텍스트 크기 조절 (0) | 2022.12.23 |
'javascript&jquery' Related Articles
more
