자바스크립트 DOM/문서제어 - 자바스크립트 강좌 5강
getElementsByTagName/getElementsByClassName/getElementById
이번 강좌에서는 자바스크립트를 이용하여 문서의 객체를 제어하는 기술에 대해 공부하겠습니다.
※DOM이란?
Document Object Model의 약자입니다.
자바스크립트를 이용하여 웹페이지를 제어하기 위한 객체 모델을 의미하죠.
window 객체의 document 프로퍼티를 이용하여 통해서 제어가 가능합니다.
△getElementsByTagName
문서를 제어하려면, 먼저 제어할 대상을 찾아야 합니다.
CSS에서 선택자를 이용하는 방법과 흡사하지만 약간의 차이가 있습니다.
getElementsByTagName은 태그명을 이용하여 제어할 대상을 찾는 방법입니다.
사용법)
document.getElementsByTagName("태그명");
예제)
1. 스크립트 코드
<script>
function spanChange(){
var sapnObj = document.getElementsByTagName("span");
for(var i=0; i < sapnObj.length; i++){
sapnObj[i].style.color = "red";
}
}
</script>
2. 본문 코드
<body>
<div id="wrap">
<span> Learning Javascript! </span>
<input type="button" value="span변경" onclick="spanChange()">
</div>
</body>
결과)
코드설명)
본문에서 버튼을 클릭하면 spanChange라는 메소드를 실행합니다.
spanChange 메소드에서는 먼저 getElementsByTagName을 이용하여 span태그의 객체를 변수에 저장합니다.
그리고 for문을 이용하여 span태그의 갯수만큼 스타일을 red로 지정하는 명령을 실행합니다.
*for문장을 간단히 설명하겠습니다.
for(시작값; 실행값; 인자증가){
실행 명령어
}
위 for문 에서는 i라는 인자값에 0을 주고, sapnObj.length를 이용하여 sapnObj의 갯수만큼, i라는 인자를 1씩 증가시키면서 명령을 실행하는 for문을 설정했습니다.
이 코드를 응용하여 예제를 하나 더 만들어 보겠습니다.
예제)
1. 자바스크립트 코드
<script>
function spanChange(){
var sapnObj = document.getElementsByTagName("span");
for(var i=0; i < sapnObj.length; i++){
if(i == "1"){
sapnObj[i].style.color = "blue";
}else{
sapnObj[i].style.color = "red";
}
}
}
</script>
2. 본문 코드
<body>
<div id="wrap">
<span> Learning HTML! </span> </br>
<span> Learning CSS! </span> </br>
<span> Learning Javascript! </span> </br>
<input type="button" value="span변경" onclick="spanChange()">
</div>
</body>
결과)
코드설명)
getElementsByTagName을 이용하여 문서를 제어하는 방법은 첫 번째 예제와 같습니다.
다만 if문을 사용하여 i라는 인자의 값이 1일 경우 파란색, 아닐경우 붉은색 으로 명령을 실행합니다.
*주의사항
getElementsByTagName을 이용하여 문서를 제어할 경우 반드시 for문을 사용하여야 합니다. for문을 사용하지 않으려면 반드시 인덱스값을 직접 지정해 주어야 합니다. 한 문서에 같은 종류의 태그는 여러개가 존재 할 수 있고, 각각의 태그들을 제어해야하기 때문에 그렇습니다. 그리고 반드시 대소문자 구분을 정확히 하여야 합니다.
인덱스 예제)
var sapnObj = document.getElementsByTagName("span");
sapnObj[0].style.color = "blue";
->sapnObj[인덱스]
△getElementsByClassName
눈치채셨나요?
클래스명을 이용하여 문서를 제어할 수 있습니다.
예제)
1. 스크립트 코드
<script>
function spanChange(){
var sapnObj = document.getElementsByClassName("span");
for(var i=0; i < sapnObj.length; i++){
sapnObj[i].style.color = "blue";
}
}
</script>
2. 본문 코드
<body>
<div id="wrap">
<span class="span"> Learning HTML! </span> </br>
<span class="span"> Learning CSS! </span> </br>
<span class="span"> Learning Javascript! </span> </br>
<input type="button" value="span변경" onclick="spanChange()">
</div>
</body>
결과)
△getElementById
아이디 값을 이용하여 문서를 제어합니다.
예제)
1. 스크립트 코드
<script>
function spanChange(){
var sapnObj = document.getElementById("span");
sapnObj.style.color = "blue";
}
</script>
2. 본문 코드
<body>
<div id="wrap">
<span id="span">
Learning HTML! </br>
Learning CSS! </br>
Learning Javascript! </br>
</span>
<input type="button" value="span변경" onclick="spanChange()">
</div>
</body>
결과)
*주의사항
getElementById는 getElementsByTagName, getElementsByClassName과 달리 for문을 사용하지 않습니다. 이유는 바로 아이디값은 반드시 하나만 존재하여야 하기 때문입니다. 다른말로 아이디는 중복이 되어선 안된다는 의미이죠. 그렇기에 TagName, ClassName과 다르게 getElements(복수형)가 아닌 getElement(단수형)를 사용합니다. 반드시 철자와 대소문자 구분에 신경을 쓰셔야 합니다.
'코딩이야기 > Javascript' 카테고리의 다른 글
| 자바스크립트 폼 유효성 검증 - 자바스크립트 강좌 7강 (0) | 2016.11.08 |
|---|---|
| 자바스크립트 이벤트 - 자바스크립트 강좌 6강 (5) | 2016.06.04 |
| 자바스크립트 팝업/window - 자바스크립트 강좌 4강 (0) | 2016.04.17 |
| 자바스크립트 location/navigator - 자바스크립트 강좌 3강 (3) | 2016.04.15 |
| 자바스크립트 윈도우 객체 / 자바스크립트 강좌 2강 alert, confirm, prompt, if~else (2) | 2016.04.09 |