1. 용어 : 태그, 문서객체, 노드
태그 : HTML, BODY,..
문서객체 : 태그를 자바스크립트에서 이용할수 있는 객체로 만드는 것
예) var header = document.getElementById('header');
- 요소노드 : HTML 태그
- 텍스트노드 : 요소노드 안에 있는 글자
2. 문서객체 만들기
- createElement(tagName) : 요소노드 생성
- createTextNode(text) : 텍스트 노드 생성
1)텍스트노드를 갖는 문서객체 생성
예)
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<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>
2) 텍스트 노드를 갖지 않는 노드 생성
예)
- 대표적 태그 : img
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script>
window.onload = function(){
//변수 선언
var img = document.createElement('img');
//속성 지정.
img.src = 'image/001.jpg';
img.width = 100;
img.height = 200;
//노드를 연결
document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
3) 문서 객체 속성 메서드
- setAttribute(name, value) : 객체의 속성 지정
- getAttribute(name) : 객체의 속성 가져옴
예)
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script>
window.onload = function(){
//변수 선언
var img = document.createElement('img');
//속성 지정.
img.setAttribute('src', 'image/001.jpg');
img.setAttribute('width', 100);
img.setAttribute('height', 200);
img.setAttribute('data-property', 350);
//노드를 연결
document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
4) innerHTML 이용 문서객체 만들기
예)
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script>
window.onload = function(){
//변수 선언
var output = '';
output += '<ul>';
output += ' <li>javascript</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '</ul>';
//노드를 연결
document.body.innerHTML=output;
}
</script>
</head>
<body>
</body>
</html>
'WEB > Javascript' 카테고리의 다른 글
| 13.DOM - 문서객체 스타일 조작 및 제거 (0) | 2013.04.16 |
|---|---|
| 12. DOM - 문서 객체 가져오기 (0) | 2013.04.16 |
| 10.브라우저 객체 모델과 html페이지 실행순서 (0) | 2013.04.15 |
| 9. 생성자함수와 prototype (0) | 2013.04.15 |
| 8. 객체지향- 함수를 사용한 객체생성 예제 (0) | 2013.04.15 |