innerHTML 과 innerText 차이점
버튼을 눌렀을 때 div 영역에 내용을 출력하는데 사용하는 프로퍼티 innerHTML, innerText
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn">눌러요</button>
<div id="div1"></div>
<script type="text/javascript">
var d = document.getElementById('div1');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
d.innerHTML = '<h1>HELLO~~</h1>'
//d.innerText = '<h1>안녕~~</h1>'
});
</script>
</body>
</html>태그를 문자열에 입력하면 태그로 인식해서 태그에 맞게 출력됨
태그를 입력해주어도 문자열 그대로 받아드려서 문자열 그대로 출력됨
DOM 요소 선택자
HTML 문서의 요소(들) 선택을 위해 사용
선택 방식
- id속성으로 요소를 선택 - getElementById('id')
- 태그 이름으로 선택 - getElementsByTagName('div')
- 클래스속성으로 선택 - getElementsByClassName('class')
- css 선택자를 활용하여 선택 - querySelector('.class')
- 단점 : 같은 클래스를 갖는 요소를 선택할 경우
getElementsByClassName은 모든 요소를 선택하지만,
querySlector는 해당 요소들 중 첫번째 요소만 선택
다수의 요소를 선택하는 경우 선택 결과는 배열로 저장
단일 요소(id로 선택)의 경우는 하나의 변수로 저장
1. 태그 종류 / 클래스명 / id명 으로 검색하여 각자 스타일 적용됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Element Finder</title>
</head>
<body>
<h1>h1 tag1</h1>
<h1>h1 tag2</h1>
<h1>h1 tag3</h1>
<h1>h1 tag4</h1>
<h2 class="head2">h2 class</h2>
<h2 class="head2">h2 class</h2>
<h2 class="head2">h2 class</h2>
<h2 class="head2">h2 class</h2>
<h3 id="head3">h3 id</h3>
</body>
<script type="text/javascript">
//태그 종류로 검색
var elemTag = document.getElementsByTagName('h1');
console.log(elemTag);//다수의 요소를 선택하는 경우 선택 결과는 배열로 저장
elemTag[0].style.backgroundColor = 'red';//배열에 저장되었으니까 배열 번호를 선택해서 스타일 따로 적용시킬 수 있음. '-'대신 대문자로 스타일 적어주면됨
elemTag[0].style.color = 'white';
elemTag[1].style.backgroundColor = 'yellow';
//클래스명으로 검색
var elemClass = document.getElementsByClassName('head2');//지정 클래스에 해당하는 다수의 요소를 선택하는 경우 선택 결과는 배열로 저장
console.log(elemClass);
var i;
for (i = 0; i < elemClass.length; i++) {
if (i % 2 == 0) {
elemClass[i].style.backgroundColor = 'olive';
}
}
//id명으로 검색
var elemId = document.getElementById('head3');
console.log(elemId);
elemId.style.backgroundColor = 'blue';
elemId.style.color = '#f4f4f4';
</script>
</html>
2. css 선택자를 활용하여 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>Element Control</h2>
<h3>쿼리 셀렉터는 css의 셀렉터를 차용한 것입니다.</h3>
<p class="ex">하지만 복수개의 엘리먼트는 수용하지 못합니다.</p>
<span id="sample"></span><br>
<a href="http://www.naver.com" target="_blank">네이버</a>
<div>
<p>특정 요소의 자식 요소를 선택할 수도 있습니다.
</div>
<button>p 태그</button>
<button>p의 ex클래스</button>
<button>아이디</button>
<br>
<button>자식요소</button>
<button>속성</button>
</body>
<script type="text/javascript">
// var btn = document.getElementsByTagName('button');//버튼이 순서대로 배열에 저장됨 -> 0~4번
var btn = document.querySelectorAll('button');
btn[0].addEventListener('click', function(){
document.querySelector('p').style.backgroundColor='red';
});
btn[1].addEventListener('click', function(){
document.querySelector('.ex').style.backgroundColor='green';
});
btn[2].addEventListener('click', function(){
document.querySelector('#sample').innerHTML='그래서 하나의 아이디나 첫번째 요소를' + ' 지목할 때 유용합니다.';
});
btn[3].addEventListener('click', function(){
document.querySelector('div p').style.backgroundColor='gray';
});
btn[4].addEventListener('click', function(){
document.querySelector('a[target="_blank"]').style.border='10px solid red';
});
</script>
</html>
.querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드(같은 류의 모든 요소를 배열로 저장)
p태그 찾기
c클래스명 찾기
id 찾기
자식 요소 찾기
속성 찾기
요소 속성 변경
- 속성 값 직접 변경
요소.속성 = 값; - setAttribute 함수 활용
요소.setAttribute('속성', '값');
속성값 바꾸기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 속성 변경</title>
</head>
<body>
<img id="image" src="images/dotori.jpg" title="도토리1"><br>
<button id="btnimg">변경</button>
<hr><!-- ---------------------------------------------- -->
<h3 id="head3">버튼을 누르면 글자색이 바뀝니다.</h3>
<button id="btnColor">색상변경</button>
<hr>
<h3>속성값 가져오기 예제</h3>
<input type="text" value="아무내용....">
<button id="btnt">눌러라</button>
</body>
<script type="text/javascript">
//속성값 바꾸기
var elem = document.getElementById('image');
var btn = document.getElementById('btnimg');
btn.addEventListener('click', function(){
elem.setAttribute('src', 'images/dotori2.jpg');//(변경할 속성, 변경할 값)
elem.setAttribute('title', '도토리2');
});
</script>
</html>
이미지 속성 및 타이틀 속성값 바뀜
버튼 누를시 글자색 바꾸기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 속성 변경</title>
</head>
<body>
<img id="image" src="images/dotori.jpg" title="도토리1"><br>
<button id="btnimg">변경</button>
<hr><!-- ---------------------------------------------- -->
<h3 id="head3">버튼을 누르면 글자색이 바뀝니다.</h3>
<button id="btnColor">색상변경</button>
<hr>
<h3>속성값 가져오기 예제</h3>
<input type="text" value="아무내용....">
<button id="btnt">눌러라</button>
</body>
<script type="text/javascript">
//버튼 누를시 글자색 바꾸기
var head = document.getElementById('head3');
var btnc = document.getElementById('btnColor');
var fcolor = ['red', 'green', 'blue', 'gray'];
var i = -1;
btnc.addEventListener('click', function(){
i++;
if (i == fcolor.length) {
i = 0;//색상 변경이 순환되도록 처리
}
head.setAttribute('style', 'color: ' + fcolor[i] + ';');
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 속성 변경</title>
</head>
<body>
<img id="image" src="images/dotori.jpg" title="도토리1"><br>
<button id="btnimg">변경</button>
<hr><!-- ---------------------------------------------- -->
<h3 id="head3">버튼을 누르면 글자색이 바뀝니다.</h3>
<button id="btnColor">색상변경</button>
<hr>
<h3>속성값 가져오기 예제</h3>
<input type="text" value="아무내용....">
<button id="btnt">눌러라</button>
</body>
<script type="text/javascript">
//type변경
var tags = document.getElementsByTagName('input');
var btntag = document.getElementById('btnt');
btntag.addEventListener('click', function(){
var att = tags[0].type;//입력이 하나만 있어도 기본 형태가 배열이기때문에 배열로 불러와줘야함
console.log(att);
att = tags[0].value;
console.log(att);
var type = tags[0].getAttribute('type');
if (type == 'text') {
tags[0].type = 'button';
tags[0].value = '클릭';
tags[0].setAttribute('onclick', 'alert("Hi~~~")');
}
if (type == 'button') {
tags[0].type = 'text';
tags[0].value = '아무내용....';
//속성 제거 : .removeAttribute('속성');
tags[0].removeAttribute('onclick');//위에 onclick속성이 남아있어서 remove해줌!
}
});
</script>
</html>tags[0].removeAttribute('onclick'); 을 해주는 이유
: 위에 onclick속성이 남아있어서 remove해줌! -> alert창 뜨지 않게 해줌!!
type이 text면 버튼으로 바꿔주고
type이 버튼이면 text으로 바꿔준다
요소 속성 값 얻기
- 속성 값 직접 구하기
변수 = 요소.속성; - getAttribute 함수 활용
변수 = 요소.getAttribute('속성');
실습 문제
입력 문자수 제한하기
10글자 이상 입력을 제한하는 입력 형식을 작성하시오.
참고 사항. substring(시작번호, 끝번호)
- 시작 번호부터 끝번호 전까지의 문자열을 추출
예) var str = '0123456789';
var str2 = str.substring(1, 8);
//str2 == '1234567'
문자열 길이 : str.length
1 ~ 5자 이내 일 때는 글자색 - 검정색
6 ~ 9자 이내 일때는 글자색 - 오렌지색
10자 일 때는 글자색 - 빨간색
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력 제한 처리</title>
</head>
<body>
입력한 값 : <span></span>
<br>
<input id="input" type="text" onkeyup="going()" placeholder="10자까지만 입력가능"><span id="span">(0자 입력)</span>
<h4 id="typing"></h4>
</body>
<script type="text/javascript">
var input = document.getElementById('input');
function going() {
var msg = document.getElementById('input').value;
var str = msg.substring(0, 10);
var strcnt = str.length;
if (strcnt <= 5) {
input.style.color='black';
}
if (strcnt >= 6 && strcnt <= 9) {
input.style.color='orange';
}
if (strcnt == 10) {
input.style.color='red';
alert("10자까지만 입력 가능합니다!")
}
document.getElementById('span').innerHTML= "(" + strcnt + "자 입력)";
}
</script>
</html>
브라우저 객체 모델(Browser Object Model, BOM)
BOM은 브라우저에서 제공하는 기능을 처리하는 javascript.
- 대화창(경고창-alert, 확인창-confirm, 입력창-prompt)
- 화면 크기 screen 관련 함수들.
- 뒤로가기, 앞으로가기 관련 함수(페이지 전환 관련 변수)
- 타이머 관련 함수.
1. 화면 크기(Screen) 관련
screen - 모니터(화면) 크기, 작업표시줄 제외 크기
window - 브라우저(창) 크기
document.body.clientXXXXXX - 페이지의 크기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>화면 크기 정보</title>
</head>
<body>
<p>내 모니터 크기 : <span id="scrSize"></span></p>
<p>내 모니터 크기(작업표시줄 제외) : <span id="avilSize"></span></p>
<p>브라우저 크기 : <span id="winSize"></span></p>
<p>페이지 크기 : <span id="pageSize"></span></p>
</body>
<script type="text/javascript">
//모니터 크기 저장 변수
var swidth = screen.width;
var sheight = screen.height;
//작업 표시줄 제외 모니터 크기 저장 변수
var awidth = screen.availWidth;
var aheight = screen.availHeight;
//브라우저 크기 저장 변수
var wwidth = window.innerWidth;
var wheight = window.innerHeight;
//페이지 크기 저장 변수
var pwidth = document.body.clientWidth;
var pheight = document.body.clientHeight;
//각 span 요소에 대한 변수 방법1)
var spansc = document.getElementById('scrSize');
var spanav = document.getElementById('avilSize');
var spanwn = document.getElementById('winSize');
var spanpg = document.getElementById('pageSize');
//각 span 요소에 대한 변수 방법2)
//span을 배열로 묶어서 사용할 수도 있음
//var spans = document.getElementByTagName('span');
spansc.innerHTML = swidth + "X" + sheight;
spanav.innerHTML = awidth + "X" + aheight;
spanwn.innerHTML = wwidth + "X" + wheight;
spanpg.innerHTML = pwidth + "X" + pheight;
</script>
</html>
타이머 기능 구현
setTimeout : 지정된 시간 후 동작 후 종료
setInterval : 지정된 시간 후 동작을 반복
clearInterval : 반복적으로 동작하는 타이머 제거
setTimeout(함수, 시간);
setInterval(함수, 시간);
-> 시간값은 밀리세컨드 단위(1/1000 초)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>타이머</title>
</head>
<body>
<button onclick="inter()">시작</button>
<button onclick="stop()">정지</button>
<button onclick="setTime()">경고창</button>
<h1 id="msg">0</h1>
</body>
<script type="text/javascript">
var msg = document.getElementById('msg');
var x = 0;//msg에 출력될 내용 저장 변수
var myTime;//타이머
function inter() {
myTime = setInterval(function(){//타이머기능을 하는 함수(보통 편하게 익명함수 사용) 작성
x++;//x는 시간의 역할이 아니라 그냥 하나씩 증가하는 변수이고 그걸 출력해줌 -> 단위시간만큼 msg가 출력되기때문에 단위시간에 따라 타이머 설정가능
msg.innerHTML = x;//x를 증가시켜서 msg에 출력한다
}, 1000);//1000 -> 시간값, 단위: 밀리세컨드(1/1000)
}
function stop() {
clearInterval(myTime);
/* //정지 시 카운터 초기화할 경우
x= 0;
msg.innerHTML = x;
*/
}
function setTime() {//버튼을 누른 시점에서 설정시간 이후에 경고창 알림 뜨게하기
setTimeout(function() {
alert('3초가 지났습니다.');
}, 3000);
}
</script>
</html>
페이지 전환 내장 객체 : location
<a> 태그와 같은 성질을 가지는 객체.
페이지의 주소 정보를 저장.
href 프로퍼티에 값을 변경하면 페이지를 변경할 수 있음.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시간차 페이지 이동</title>
</head>
<body>
<p>이동할 페이지 : 'http://www.google.com'</p>
<h1><span id="count">5</span>초 후 페이지가 이동됩니다.</h1>
</body>
<script type="text/javascript">
var cnt = 5;
var msg = document.getElementById('count');
//화면에 카운트 다운을 보여주기 위한 타이머
setInterval(function(){
cnt--;
msg.innerHTML = cnt;
}, 1000);
setTimeout(function() {
alert("페이지가 이동됩니다.");
location.href = "http://www.google.com";//a태그와 같은 역할을 하는 녀석
}, 5000);
</script>
</html>
이동 제어
- 뒤로가기
- 앞으로가기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이동 제어</title>
</head>
<body>
<!-- 브라우저의 뒤로가기, 앞으로 가기 버튼 -->
<button>뒤로가기</button>
<button>앞으로가기</button>
</body>
<script type="text/javascript">
var btns = document.getElementsByTagName('button');
//btns[0] : 뒤로가기 버튼, btns[1]: 앞으로가기 버튼
btns[0].addEventListener('click', function(){
window.history.back();
});
btns[1].addEventListener('click', function(){
window.history.forward();
});
</script>
</html>
