DOM 요소의 선택
HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 한다.
자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같다.
- HTML 태그 이름(tag name)을 이용한 선택
- 아이디(id)를 이용한 선택
- 클래스(class)를 이용한 선택
- name 속성(attribute)을 이용한 선택
- CSS 선택자(selector)를 이용한 선택
- HTML 객체 집합(object collection)을 이용한 선택
HTML 태그 이름(tag name)을 이용한 선택
getElementsByTagName() 메소드는 HTML 태그 이름을 이용하여 HTML 요소를 선택한다.
var selectedItem = document.getElementsByTagName("li"); // 모든 <li> 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.
}※ item() 메소드는 해당 HTML 객체 집합(obejct collection)에서 전달받은 인덱스에 해당하는 요소를 반환한다.
※ HTML 요소의 style 프로퍼티를 이용하면, 해당 요소의 CSS 스타일을 변경할 수 있다.
아이디(id)를 이용한 선택
getElementById() 메소드는 아이디를 이용하여 HTML 요소를 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript DOM Element</title>
</head>
<body>
<h1>아이디를 이용한 선택</h1>
<ul>
<li>첫 번째 아이템이에요!</li>
<li id="even">두 번째 아이템이에요!</li>
<li>세 번째 아이템이에요!</li>
<li id="even">네 번째 아이템이에요!</li>
<li>다섯 번째 아이템이에요!</li>
</ul>
<script>
var selectedItem = document.getElementById("even"); // 아이디가 "even"인 요소를 선택함.
selectedItem.style.color = "red"; // 선택된 요소의 텍스트 색상을 변경함.
</script>
</body>
</html>
자바스크립트에서 아이디(id)를 이용한 선택은 해당 아이디를 가지고 있는 요소 중에서 첫 번째 요소 단 하나만을 선택한다. 따라서 여러 요소를 선택하고 싶을 때는 태그 이름이나 클래스와 같은 다른 방법을 사용해야 한다.
클래스(class)를 이용한 선택
getElementsByClassName() 메소드는 클래스 이름을 이용하여 HTML 요소를 선택한다.
<ul>
<li class="odd">첫 번째 아이템이에요!</li>
<li>두 번째 아이템이에요!</li>
<li class="odd">세 번째 아이템이에요!</li>
<li>네 번째 아이템이에요!</li>
<li class="odd">다섯 번째 아이템이에요!</li>
</ul>
<script>
var selectedItem = document.getElementsByClassName("odd"); // 클래스가 "odd"인 모든 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.
}
</script>
name 속성을 이용한 선택
getElementByName() 메소드는 HTML 요소의 name 속성을 이용하여 HTML 요소를 선택한다.
<p name="first">첫 번째 단락이에요!</p>
<ul>
<li name="first">첫 번째 아이템이에요!</li>
<li>두 번째 아이템이에요!</li>
<li>세 번째 아이템이에요!</li>
<li>네 번째 아이템이에요!</li>
<li>다섯 번째 아이템이에요!</li>
</ul>
<script>
var selectedItem = document.getElementsByName("first"); // name 속성값이 "first"인 모든 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.
}
</script>
CSS 선택자(selector)를 이용한 선택
querySelectorAll() 메소드는 CSS 선택자(아이디, 클래스, 속성, 속성값 등)를 이용하여 HTML 요소를 선택한다.
var selectedItem = document.querySelectorAll("li.odd"); // 클래스가 "odd"인 요소 중에서 <li> 요소만을 선택함.
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.
}※ querySelectorAll() 메소드는 익스플로러 8과 그 이전 버전에서 지원하지 않는다.
HTML 객체 집합(object collection)을 이용한 선택
HTML DOM에서 제공하는 객체 집합(object collection)을 이용하여 HTML 요소를 선택할 수 있다.
var title = document.title; // <title> 요소를 선택함.
document.write(title); // <title> 안의 글 출력DOM 요소의 내용 변경
HTML DOM을 이용하면 HTML 요소의 내용(content)이나 속성값 등을 손쉽게 변경할 수 있다.
HTML 요소의 내용을 변경하는 가장 쉬운 방법은 innerHTML 프로퍼티를 이용하는 것이다.
<h1>innerHTML을 이용한 요소의 내용 변경</h1>
<p id="text">이 문장을 바꿀 것입니다!</p>
<script>
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다!";
</script>실행 결과
이 문장으로 바뀌었습니다!
HTML 요소의 속성 이름을 이용하면 속성값도 변경할 수 있다.
var link = document.getElementById("link"); // 아이디가 "link"인 요소를 선택함.
link.href = "/javascript/intro"; // 해당 요소의 href 속성값을 변경함.
link.innerHTML = "자바스크립트 수업 바로 가기!"; // 해당 요소의 내용을 변경함.DOM 요소의 스타일 변경
HTML DOM을 이용하면 HTML 요소의 스타일(style)도 손쉽게 변경할 수 있다.
style 프로퍼티를 이용하여 HTML 요소에 CSS 스타일을 적용한다.
// 아이디가 "text"인 요소를 선택함.
var str = document.getElementById("text");
// 해당 요소의 글자색을 빨간색으로 변경함.
function changeRedColor() { str.style.color = "red"; }
// 해당 요소의 글자색을 검정색으로 변경함.
function changeBlackColor() { str.style.color = "black"; }'Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 노드로의 접근 (0) | 2022.07.04 |
|---|---|
| [JavaScript] 노드 (0) | 2022.07.04 |
| [JavaScript] Document 객체 (0) | 2022.07.04 |
| [JavaScript] DOM의 개념 (0) | 2022.07.04 |
| [JavaScript] Array 메소드 (0) | 2022.07.04 |