문서객체모델
DOM ( Document Object Model)
- 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식
- 좁은 의미로는 document 객체와 관련된 객체 집합
- 사용시 HTML 페이지에 태그를 추가, 수정, 제거할 수 있음
- ‘태그’ - HTML 페이지에 존재하는 html이나 body 태그
- 문서 객체 - 태그를 자바스크립트에서 이용할 수 있는 객체로 만든 것
HTML 태그를 자바스크립트로 가져오는 방법
| 매서드 | 설명 |
|---|---|
| getElementById(id) | 태그의 id 속성이 id와 일치하는 문서 객체를 가져옴 |
| getElementsByName(name) | 태그의 name속성이 name과 일치하는 문서 객체를 배열로 가져옴 |
| getElementsByTagName(tagName) | tagName과 일치하는 문서 객체를 배열로 가져옴 |
getElementsByName(name)
<script type="text/javascript">
window.onload=function(){
//태그명을 통해서 태그를 탐색해서 문서 객체로 반환
//복수의 태그가 존재할 수 있기 때문에 배열로 반환
let spans = document.getElementsByTagName('span');
//span 태그의 내용을 변경
spans[0].innerHTML = '달빛이 찬란한 호수';
spans[1].innerHTML = '흰눈이 눈 부신 들판';
};
</script>
</head>
<body>
<span>하늘</span><br>
<span>하늘</span>
</body>달빛이 찬란한 호수
흰눈이 눈 부신 들판getElementById(id)
<script type="text/javascript">
window.onload = function(){
//getElementById(id) : 태그의 id 속성이 지정한 id와
// 일치하는 문서 객체를 가져옴
let header1 = document.getElementById('header_1');
let header2 = document.getElementById('header_2');
//태그의 내용 변경
header1.innerHTML = '하하';
header2.innerHTML = '호호';
};
</script>
</head>
<body>
<h1 id="header_1">Header</h1>
<h1 id="header_2">Header</h1>
</body>하하
호호getElementsByTagName(tagName)
<script type="text/javascript">
window.onload=function(){
let allSpans = document.getElementsByTagName('span');
let output='';
for(let i=0;i<allSpans.length;i++){
output += allSpans[i].innerHTML + '\n';
}
//alert(output);
//id가 foo인 태그을 호출하고 해당 태그의 하위 태그 중 span를
//호출해서 내용을 출력
let foo = document.getElementById('foo');
let fooSpans = foo.getElementsByTagName('span');
let output2 = '';
for(let i=0;i<fooSpans.length;i++){
output2 += fooSpans[i].innerHTML + '\n';
}
alert(output2);
};
</script>
</head>
<body>
<p id="foo">
<span>a</span>
<span>b</span>
<span>c</span>
</p>
<p id="bar">
<span>x</span>
</p>
</body>a b c
xinnerHTML
문서 객체의 innerHTML 속성 사용해 객체 생성
innerHTML 프로퍼티에 값을 설정하면 브라우저에서는 그 내용을 파싱하고, 해석 결과를 해당 요소의 자식 요소로 만듬.
var output = ‘<h1>Hello World!!</h2>’;
document.body.innerHTML = output;
성장과 도전을 기록합니다