01 문서 객체 모델의 기본 용어와 개념
기본 예제 10-1-1
실행 순서에 따른 문서 객체 사용 오류
해당 코드가 실행되지 않는 이유, script의 위치가 h1보다 위에 있기 때문에 h1 값을 찾을 수 없어서 오류
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
</style>
<script>
document.querySelector('h1').style.backgroundColor = "red";
</script>
</head>
<body>
<h1>header</h1>
<h2>header</h2>
</body>
</html>10-1-2
이를 보완하기 위해서 querySelector로 지정해준다.
즉 body 안 h1 아래에 script 파일을 넣어준다. 하지만 가독성이 좋지 않다.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Document Object Model</title>
<style>
</style>
</head>
<body>
<h1>Process - 1 </h1>
<h2>Process - 2 </h2>
<script>
document.querySelector('h1').style.backgroundColor = "red";
document.querySelector('h1').style.border = "2px solid green";
document.querySelector('h2').style.color = "blue";
document.querySelector('h2').style.fontStyle = "bold";
</script>
</body>
</html>10-1-3
그래서 window.onload = function(){} 기능을 이용한다. 로딩시 document.querySelector 기능으로 찾게 하기
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
</style>
<script>
window.onload = function () {
var h1 = document.querySelector('h1');
var h2 = document.querySelector('h2');
h1.style.backgroundColor = "yellow";
h1.style.color = "green";
h2.style.color = "white";
h2.style.backgroundColor = "green";
h2.style.fontSize = "30px";
h2.style.fontWeight = "bold";
// 아래는 오류가 뜸
// document.querySelector('h1').style.backgroundColor = "yellow";
// document.querySelector('h2').style.backgroundColor = "green";
// document.querySeletor('h2').style.color = "white";
// document.querySelector('h2').style.fontWeight = "bold";
};
</script>
</head>
<body>
<h1>Process - 1 </h1>
<h2>Process - 2 </h2>
</body>
</html>02 문서 객체 선택
기본 예제 10-2-1 문서객체 선택
getElementById 를 이용
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
</style>
<script>
window.onload = function() {
var box = document.getElementById("box");
box.style.color = "orange";
box.style.backgroundColor = "red";
box.style.fontSize = "30px";
box.style.fontWeight = "bold";
box.innerText = "From JavaScript";
// document.getElementById("box").backgroundColor = "red";
// document.getElementById("box").color = "orange";
};
</script>
</head>
<body>
<div id = "box">box</div>
</body>
</html>10-2-2 querySelect 메소드를 사용하여 문서 객체 1개 선택하기
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
</style>
<script>
window.onload = function(){
var header = document.querySelector('h1');
header.style.backgroundColor = "red";
header.style.color = "orange";
header.innerHTML = "From JavaScript";
}
</script>
</head>
<body>
<h1>header</h1>
<h2>header</h2>
</body>
</html>10-2-3 querySelectAll 메소드를 사용하여 문서 객체 여러개 선택하기
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
</style>
<script>
window.onload = function() {
// document.querySelector('h1').style.backgroundColor = "red";
// document.querySelector('h1').style.color = "orange";
// document.querySelector('h1').innerText = "From JavaScript";
var headers = document.querySelectorAll('h1');
for(var i = 0; i < headers.length; i++){
headers[i].style.backgroundColor = "red";
headers[i].style.color = "orange";
headers[i].innerText = "From JavaScript";
}
// for(var i = 0; i < headers.length; i++){
// var header = headers[i];
// header.style.backgroundColor = "red";
// header.style.color = "orange";
// header.innerText = "From JavaScript";
// }
}
</script>
</head>
<body>
<h1>header</h1>
<h1>header</h1>
<h1>header</h1>
</body>
</html>
03 문서 객체 조작
기본 예제 10-3 글자조작
textContent > 문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경
innerHTML > 문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
</style>
<script>
// window.onload = function(){
// var output = '';
// for (var i = 0; i < 10; i++){
// output = output + '<h1>Header' + i + + '</h1>';
// }
// // document.body.textContent = output;
// document.body.innerHTML = output;
// };
// 11월 1일부터부터 11월 10까지 쓰고 싶으면?
window.onload = function() {
var output = "";
for(var i = 1; i <= 10; i++){
output += "<h1> 11월" + i + "일</h1>";
}
document.body.innerHTML = output;
};
//이렇게 하면 불가능한 이유 결국 document.body.innerHTML로 출력되는 화면은 하나이기 때문에!
//하나씩 바뀌는 셈이다.
</script>
</head>
<body>
</body>
</html>
자바스크립트 스타일 식별자 변환
'-'를 사용할 수 없기 때문에 다음 글자를 대문자로 바꾼다.
background-color > backgroundColor
* 문자열을 사용한 스타일 속성 접근
. 대신에 두 가지 모두 사용 가능하다.
1) document.body.style['backgroundColor'] = 'red';
2) document.body.style['background-color'] = 'red';
기본 예제 10-4 스타일 조작 / 한 번 더 해보기
<!DOCTYPE html>
<html>
<head>
<title>DOM Basic</title>
<meta charset = "utf-8">
<script>
//이벤트 연결
window.onload = function() {
var output = '';
for(var i = 0; i < 256; i++){
output += '<div></div>';
}
document.body.innerHTML = output;
//문서 객체를 선택합니다.
var divs = document.querySelectorAll('div');
for(var i = 0; i < divs.length; i++){
var div = divs[i];
//스타일을 적용합니다.
div.style.height = '2px';
div.style.background = 'rgb(' + i + ',' + i + ',' + i + ')';
}
};
</script>
</head>
<body>
</body>
</html>
- 속성 조작
setAttribute (속성이름, 속성값) : 속성 지정
getAttribute (속성이름) : 속성 추출
자바의 getter 와 setter 와 같은 기능
image.src = 'rint.png';
alert(image.src)제이쿼리의 속성 조작 메소드?
기본 예제 10-5 문서 객체 속성 조작
10-5-1 img 태그 속성 조작하기
image.height = 100px; 이 아니라
image.width = 100; 으로 입력해야 한다.
why? style 속성으로 입력한 것이 아니라서, style로 입력하면 px 입력 가능하다.
image.style.width = "200px";
image.style.height = "200px";<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style>
</style>
<script>
window.onload = function() {
var image = document.getElementById("image");
image.src = 'http://placehold.it/300x200';
image.width = 200;
image.height = 100;
}
</script>
</head>
<body>
<img id = "image" src = "lucky1.jpg" alt = "image가 표시되지 않음">
</body>
</html>
10-5-2 body 태그 속성 조작하기
setAttribute("속성", "속성값"), getAttribute("속성") > 속성값을 리턴한다.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>DOM Basic</title>
<script>
window.onload = function(){
document.body.setAttribute('data-custom', 'value');
var dataCustom = document.body.getAttribute('data-custom');
alert(dataCustom);
}
</script>
</head>
<body>
</body>
</html>
10-6 문서 객체를 사용한 시간표시
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<script>
window.onload = function () {
var clock = document.getElementById('clock');
setInterval(function() {
var now = new Date();
clock.innerHTML = now.toString();
}, 1000);
};
</script>
</head>
<body>
<h1 id = 'clock'></h1>
</body>
</html>
04 이벤트
window.onload = function() {};
코드에서 onload를 이벤트 속성이라고 한다. on을 제외한 load를 이벤트 이름 또는 이벤트 타입이라고 한다.
이벤트 속성에 넣는 함수를 이벤트 리스너 또는 이벤트 핸들러라고 한다.
onblur onfocus onfocusin onfocusout onload onresize onscroll onunload onclick ondbclick onmousedown onmouseup onmousemove onmouseover onmouseout onmouseenter onmouseleave onchange onselect onsubmit onkeydown onkeypress onkeyup onerror
1- 이벤트 연결
문서 객체에 이벤트를 연결하는 방식을 이벤트 모델이라고 한다.
이벤트 모델은 DOM 레벨에 따라서 2가지로 구분할 수 있다.
DOM 레벨 0 : 인라인 이벤트 모델 / 고전 이벤트 모델
DOM 레벨 2 : 마이크로소프트 인터넷 익스플로러 이벤트 모델 표준 이벤트 모델
DOM 레벨 0의 이벤트 연결방식은 쉬워서 널리 사용하지만, 이벤트를 중복해서 연결할 수 없는 단점이 있다.
반면 DOM 레벨 2의 이벤트 연결 방식은 이벤트를 중복해서 연결할 수 있지만, 웹 브라우저 종류에 따라 연결하는 방식이 달라 문제가 된다.
이는 J Query 라이브러리 등을 사용해 극복할 수 있다.
- 인라인 이벤트 모델
html 태그 내부에 자바스크립트 코드를 넣어 이벤트를 연결하는 방식, 전세계 추세로 거의 사용하지 않지만 여전히 사용하는 웹사이트가 있다.
기본 예제 10-7 이벤트 연결
10-7-1 인라인 이벤트 모델 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Event Basic</title>
</head>
<body>
<button onclick = "alert('hi')">버튼</button>
</body>
</html>10-7-2 script 태그에 인라인 이벤트 모델 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Inline Event</title>
<style>
</style>
<script>
function buttonClick() {
alert("클릭했구만!");
}
</script>
</head>
<body>
<button onclick = "buttonClick()">버튼</button>
</body>
</html>10-8-1 고전 이벤트 모델
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Traditional Event</title>
<script>
window.onload = function() {
var button = document.getElementById("button");
button.onclick = function(){
alert("hihhi");
};
}
</script>
</head>
<body>
<button id = "button">버튼</button>
</body>
</html>10-8-2 이벤트 발생 객체
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Traditional Event</title>
<body>
<button id = "button">버튼 - </button>
<script>
var button = document.getElementById("button");
button.onclick = function() {
this.textContent = this.textContent + 'o';
</script>
</body>
</head>
</html>
기본 예제 10-9 이벤트 정보
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Event Object</title>
<script>
window.onload = function(event) {
alert(event);
};
</script>
</head>
<body>
</body>
</html>기본 예제 10-10 기본이벤트 제거
button.onclick = function(){}
return 값을 false로 준다.
<a> 태그
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Traditional Event - Default Event </title>
<style>
</style>
<script>
window.onload = function() {
var button = document.getElementById("button");
button.onclick = function(){
return false;
};
};
</script>
</head>
<body>
<a id = "button" href = "naver.com">버튼</a>
</body>
</html>
'자바스크립트' 카테고리의 다른 글
| onclick : 버튼 클릭시 글자변경 (0) | 2021.01.19 |
|---|---|
| hover, addClass, removeClass (0) | 2020.11.08 |
| #아이디 .클래스 와 #아이디.클래스 의 차이 (0) | 2020.11.07 |
| Chapter 11. jQuery 라이브러리 (0) | 2020.11.07 |
| 연습하기 (0) | 2020.11.05 |