자바스크립트 - DOM (Document Object Model)
DOM은 웹브라우저가 HTML 페이지를 인식하는 방식
DOM을 사용해서 HTML 페이지에 태그를 추가/수정/제거
xml/json 등의 데이터를 클라이언트 측에서 받아서 처리하는 경우에 주로 쓰인다.
HTML 페이지는 정적인데 자바스크립트로 문서 객체를 생성하는 것은 동적이다.
- createElement(태그 이름) / createTextNode(문자)
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
// 변수를 선언합니다.
var header = document.createElement('h1');
var textNode = document.createTextNode('Hello DOM');
// 노드를 연결합니다.
header.appendChild(textNode);
document.body.appendChild(header);
};
</script>
</head>
<body>
</body>
</html>
-createElement / appendChild : <body>에 이미지 넣기
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
// 변수를 선언합니다.
var img = document.createElement('img');
img.setAttribute('src', 'Penguins.jpg');
img.setAttribute('width', 500);
img.setAttribute('height', 350);
// setAttibute() 메서드를 사용하지 않으면 불가능합니다.
img.setAttribute('data-property', 350);
// 노드를 연결합니다.
document.body.appendChild(img);
};
</script>
</head>
<body>
</body>
</html>
<head>
<script>
window.onload = function () {
// 변수를 선언합니다.
var img = document.createElement('img');
img.src = 'Penguins.jpg';
img.width = 500;
img.height = 350;
// 노드를 연결합니다.
document.body.appendChild(img);
};
</script>
</head>
<body>
</body>
-innerHTML
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
// 변수를 선언합니다.
var output = '';
output += '<ul>';
output += ' <li>JavaScript</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '</ul>';
// innerHTML 속성에 문자열을 할당합니다.
document.body.innerHTML = output;
};
</script>
</head>
<body>
</body>
</html>
-getElementById(특정 id의 태그만 적용)
<head>
<script>
window.onload = function () {
// 문서 객체를 가져옵니다.
var header1 = document.getElementById('header_1');
var header2 = document.getElementById('header_2');
// 문서 객체의 속성을 변경합니다.
header1.innerHTML = 'with getElementById()';
header2.innerHTML = 'with getElementById()';
};
</script>
</head>
<body>
<h1 id="header_1">Header</h1>
<h1 id="header_2">Header</h1>
</body>
-getElementsByTagName(문서 내 태그 전체 적용)
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script>
window.onload = function () {
// 문서 객체를 가져옵니다.
var headers = document.getElementsByTagName('h1');
headers[0].innerHTML = 'With getElementsByTagName()';
headers[1].innerHTML = 'With getElementsByTagName()';
};
</script>
</head>
<body>
<h1>Header</h1>
<h1>Header</h1>
</body>
</html>
-getElementById를 이용한 해당 문서 객체의 스타일 적용
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
// 문서 객체를 가져옵니다.
var header = document.getElementById('header');
// 문서 객체의 스타일을 바꿔줍니다.
header.style.border = '2px Solid Black';
header.style.color = 'Orange';
header.style.fontFamily = 'Helvetica';
};
</script>
</head>
<body>
<h1 id="header">Header</h1>
</body>
</html>
-removeChild(문서의 특정 태그 삭제)
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
// 문서 객체를 가져옵니다.
var willRemove = document.getElementById('will_remove');
// 문서 객체를 제거합니다.
document.body.removeChild(willRemove);
};
</script>
</head>
<body>
<h1 id="will_remove">Header</h1>
</body>
</html>
-시계 구현
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
// 변수를 선언합니다.
var clock = document.getElementById('clock');
// 매 1초마다 함수를 실행합니다.
setInterval(function () {
var now = new Date();
clock.innerHTML = now.toString();
}, 1000);
};
</script>
</head>
<body>
<h1 id="clock"></h1>
</body>
</html>