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