1. HTML에 이미 존재하는 JAVASCRIPT 가져오는 방법
1) getElementById(id)
; 한번에 하나의 객체만
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script>
window.onload = function(){
//문서객체가져오기
var header1 = document.getElementById('header1');
var header2 = document.getElementById('header2');
//문서객체 변경
header1.innerHTML = 'innerHTML Header1';
header2.innerHTML = 'innerHTML Header2';
};
</script>
</head>
<body>
<h1 id="header1">Header1</h1>
<h1 id="header2">Header2</h1>
</body>
</html>
2) 한번에 여러개 객체 가져오기
- getElementsByName(name) : 태그의 name속성이 name과 일치하는 문서객체를 배열로 가져옴.
- getElementsByTagName(tagName) : tagName과 일치하는 객체를 배열로 가져옴.
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script>
window.onload = function(){
//문서객체가져오기
var header = document.getElementsByTagName('h1');
//문서객체 변경
header[0].innerHTML = 'innerHTML Header1';
header[1].innerHTML = 'innerHTML Header2';
};
</script>
</head>
<body>
<h1>Header1</h1>
<h1>Header2</h1>
</body>
</html>
for 문으로 변경 . 변경 시 for in 을 사용하면 안된다. 다른 속성값을 모두 가져오기 때문에 .
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script>
window.onload = function(){
//문서객체가져오기
var header = document.getElementsByTagName('h1');
//문서객체 변경
for(var i=0; i<header.length; i++){
header[i].innerHTML = 'innerHTML Header'+ (i+1);
}
};
</script>
</head>
<body>
<h1>Header1</h1>
<h1>Header2</h1>
</body>
</html>
for in 을 사용하면
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
<script>
window.onload = function(){
//문서객체가져오기
var header = document.getElementsByTagName('h1');
var output = '';
//문서객체 변경
for(var i in header){
output += i + '<br>';
}
document.body.innerHTML = output;
};
</script>
</head>
<body>
<h1>Header1</h1>
<h1>Header2</h1>
</body>
</html>
'WEB > Javascript' 카테고리의 다른 글
| 14. 이벤트 (0) | 2013.04.16 |
|---|---|
| 13.DOM - 문서객체 스타일 조작 및 제거 (0) | 2013.04.16 |
| 11. DOM - 객체생성 (0) | 2013.04.15 |
| 10.브라우저 객체 모델과 html페이지 실행순서 (0) | 2013.04.15 |
| 9. 생성자함수와 prototype (0) | 2013.04.15 |