JavaScript
객체
- 내장 객체
- 브라우저 객체
- 문서 객체(DOM)
- 사용자 정의 객체
문서 객체 모델(Document Object Model)
- 객체 지향 모델로서 구조화된 문서를 표현하는 방식
- HTML 문서에 접근하기 위한 표준 모델
- 표준은 대부분의 브라우저에서 DOM을 구현하는 기준
- 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공
- 웹 브라우저에서 보여지는 HTML 문서 태그 요소에 대한 정보와 문서에 대한 여러 가지 속성을 제공
- document 객체의 하위 객체를 이용하여 문서 내에서 일어나는 다양한 기능 제어
DOM 사용 시기
- HTML 문서가 로드되고 나서 파싱 작업을 거쳐 DOM 트리 생성
- DOM 문서가 로드될 때 모든 DOM을 사용할 수 있게 되는 파일
문서 내의 요소(태그) 제어 메소드
createElement() : 요소 노드 생성
createTextNode(text) : 텍스트 노드 생성
appendChild(node) : 객체에 노드 연결
setAttribute(name, value) : 객체 속성 설정
getAttribute(name) : 객체의 속성 반환
getElementById(id): 태그의 id 속성이 id와 일치하는 문서 객체 반환
getElementByName(name): 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 반환
getElementsByTagName(태그명): 태그명과 일치하는 문서 객체를 배열로 반환
removeChild(child): 문서 객체의 자식 노드 제거
querySelector(선택자): 1개의 선택자 선택. 동일한 요소가 여러 개인 경우 첫 번째 요소만 선택
querySelectorAll(선택자): 동일한 요소가 여러 개인 경우 모든 요소 선택
문서 내의 요소(태그) 제어 메소드를 사용하여 요소를 선택할 때 자바스크립트 위치 주의
- 잘못된 위치
- 문서 내에서 요소(객체)들이 생성되기 전에 자바스크립트를 선언하면 요소를 선택할 수 없음
<head>
<script type="text/javascript">
var box = document.getElementById('box');
</script>
</head>
<body>
<div id="box">
box
</div>
</body>
- 올바른 위치
- 요소(태그) 다음에 자바스크립트를 사용했기 때문에 요소 선택 가능
<html>
<head>
</head>
<body>
<div id="box">
<script type="text/javascript">
var box = document.getElementById('box');
box.InnerHTML = "변경";
</script>
</div>
</body>
</html>
- 올바른 위치
- 윈도우 로드 완료 후 자바스크립트 실행
- 윈도우 로드 이벤트 확인 후에 자바스크립트 코드로 처리
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('box');
box.InnerHTML = "변경";
}
</script>
</head>
<body>
<div id="box">box</div>
</body>
</html>
문서 내의 요소(태그) 제어 메소드
createElement("태그명") : 요소(태그) 생성createTextNode("출력할 문자열") : 문자열 생성appendChild(노드) : 노드 연결 (부착)
요소 (태그) 제어 메소드 예제1
createElement.html
- <h3> 태그 생성
- 문자열 (text) 생성
- text를 h3에 연결 -> h3를 body에 연결
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
window.onload = function() {
// 요소 생성
var h3 = document.createElement('h3');
// 텍스트 노드 생성
var text = document.createTextNode("출력할 텍스트 : 홍길동");
// 문서에 출력. 텍스트를 h3에 연결
h3.appendChild(text);
//h3 를 body에 연결(부착)
document.body.appendChild(h3);
}
</script>
</head>
<body>
</body>
</html>
요소 (태그) 제어 메소드 예제2
createElemetn2.html
- <img> 생성
- 속성 설정
- 문서에 출력(body 연결)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
window.onload = function() {
// 요소 생성
var img = document.createElement('img');
// 속성 설정
img.src = "image/bird.jpg";
img.width = 250;
img.height = 180;
img.title = "새";
//h3 를 body에 연결(부착)
document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
getElementById()
- id를 통해 문서 내에서 요소(태그)를 참조하는 메소드
- 지정한 id 속성값을 갖는 개체 중 첫 번째 개체 참조
- 사용
var 참조변수 = document.getElementById('id');<input id = "id">
getElementById() 예제1
getElementById1.html
- 제목 변경 버튼을 누르면 h1의 내용이 바뀌는 프로그램
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
function change() {
// 태그의 id 속성값이 'header'인 객체 반환
var header = document.getElementById('header');
// 요소의 텍스트 내용 변경
header.innerHTML = "제목이 변경되었습니다";
}
</script>
</head>
<body>
<h1 id="header">제목</h1>
<button id="btn" onclick="change()">제목 변경</button>
</body>
</html>
getElementById() 예제2
getElementById2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
function changeImg() {
var img = document.getElementById('imageA');
var hint = document.getElementById('hint');
var btn = document.getElementById('changeButton');
img.src = "image/B.png";
hint.innerHTML = "새로운 이미지로 변경되었습니다.";
changeButton.innerHTML = "완료";
}
</script>
</head>
<body>
<div>
<img id="imageA" src="image/A.png">
<div id="hint">[변경] 버튼을 누르면 이미지가 바뀝니다.</div> <br><br>
<button id="changeButton" onclick="changeImg()">변경</button>
</div>
</body>
</html>
querySelector()
- 1개의 선택자 선택
- 동일한 요소가 여러개인 경우 첫 번째 요소만 선택
querySelecotr.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
window.onload = function() {
var header = document.querySelector('h1');
header.style.color = 'skyblue';
header.style.backgroundColor = 'black';
header.innerHTML = "JavaScript";
};
</script>
</head>
<body>
<h1>Header</h1>
<h1>Header</h1>
<h1>Header</h1>
</body>
</html>
querySelectorAll()
- 동일한 요소가 여러 개인 경우 모든 요소 선택
querySelecotrAll.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript querySelectorAll()</title>
<script type="text/javascript">
window.onload = function() {
// 배열로 만들어짐 -> for문으로 처리
var headers = document.querySelectorAll('h1');
for(var i = 0; i<headers.length; i++){
var header = headers[i];
header.style.color = 'skyblue';
header.style.backgroundColor = 'black';
header.innerHTML = "JavaScript";
}
};
</script>
</head>
<body>
<h1>Header</h1>
<h1>Header</h1>
<h1>Header</h1>
</body>
</html>
getElementsByTagName(태그명)
- 문서 내의 모든 요소를 배열 컬렉션으로 전달받아서 참조할 수 있게 해주는 메소드
- 참조 값들을 배열로 만들어서 전달
var tdArr = document.getElementsByTagName('td');
- 문서 내의 모든 <td> 태그 가져옴
- <td> 태그 수가 배열 크기가 됨
- for문 사용
getElementsByTagName(태그명) 예제
getElementsByTagName.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript getElementsByTagName()</title>
<style type="text/css">
div {margin:0 auto; width: 600px; text-align: center;}
table{ margin: 0 auto; width: 100%;}
td {width: 50px; height: 30px;}
</style>
<script type="text/javascript">
window.onload = function() {
var tdArr = document.getElementsByTagName('td');
var setNumberBtn = document.getElementById('setNumberBtn');
var setColorBtn = document.getElementById('setColorBtn');
var clearNumberBtn = document.getElementById('clearNumberBtn');
var clearColorBtn = document.getElementById('clearColorBtn');
setNumberBtn.onclick = function() {
for(var i = 0; i < tdArr.length; i++){
tdArr[i].innerHTML = i;
}
}
setColorBtn.onclick = function() {
for(var i = 0; i < tdArr.length; i++){
var color = ["red", "orange", "yellow", "violet", "pink", "green", "gold"];
tdArr[i].style.background = color[i];
}
}
clearNumberBtn.onclick = function() {
for(var i = 0; i < tdArr.length; i++){
tdArr[i].innerHTML = "";
}
}
clearColorBtn.onclick = function() {
for(var i = 0; i < tdArr.length; i++){
tdArr[i].style.background = "none";
}
}
}
</script>
</head>
<body>
<div>
<table border="1">
<tr>
<td></td><td></td><td></td>
<td></td><td></td><td></td> <td></td>
</tr>
</table>
<br><br>
<button id="setNumberBtn">셀에 번호 채우기</button>
<button id="setColorBtn">셀에 색상 채우기</button>
<br><br>
<button id="clearNumberBtn">셀에 번호 지우기</button>
<button id="clearColorBtn">셀에 색상 지우기</button>
</div>
</body>
</html>
