[JavaScript] DOM 요소

2022. 7. 4. 20:32·Language/JavaScript
728x90

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
'Language/JavaScript' 카테고리의 다른 글
  • [JavaScript] 노드로의 접근
  • [JavaScript] 노드
  • [JavaScript] Document 객체
  • [JavaScript] DOM의 개념
arajo
arajo
  • arajo
    아라 메모장
    arajo
  • 전체
    오늘
    어제
    • 분류 전체보기 (509)
      • Language (298)
        • HTML (55)
        • CSS (11)
        • JavaScript (70)
        • TypeScript (8)
        • Python (33)
        • Java (119)
        • C (0)
        • C# (2)
      • Programming (92)
        • Programming (14)
        • Web (51)
        • Apache (1)
        • MySQL (23)
        • AWS (3)
      • Framework | Library (26)
        • Framework | Library (3)
        • Vue.js (2)
        • React.js (5)
        • React Native (4)
        • Node.js (1)
        • Ajax (1)
        • Bootstrap (8)
        • Spring (1)
        • Flutter (1)
      • etc (2)
      • 휴식 (19)
        • 책 (13)
        • 일기 (5)
        • 게임 일기 (1)
      • A (71)
        • 공부 (18)
        • 기타 (6)
        • 일 (47)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    자바스크립트
    event
    타입스크립트
    react
    TypeScript
    제어문
    Java
    MySQL
    HTML
    파이썬
    JavaScript
    web
    next.js
    객체
    Python
    object
    CSS
    리액트
    변수
    array
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
arajo
[JavaScript] DOM 요소
상단으로

티스토리툴바