DOM 요소

DOM 요소의 선택

HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 함

자바스크립트에서 특정 HTML 요소를 선택하는 방법

1. HTML 태그 이름(tag name)을 이용한 선택

2. 아이디(id)를 이용한 선택

3. 클래스(class)를 이용한 선택

4. name 속성(attribute)을 이용한 선택

5. CSS 선택자(selector)를 이용한 선택

6. 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 요소를 선택.

 

예제

var selectedItem = document.getElementById("even"); // 아이디가 "even"인 요소를 선택함.

selectedItem.style.color = "red"; // 선택된 요소의 텍스트 색상을 변경함.

코딩연습 ▶

자바스크립트에서 아이디(id)를 이용한 선택은 해당 아이디를 가지고 있는 요소 중에서 첫 번째 요소 단 하나만을 선택

따라서 여러 요소를 선택하고 싶을 때는 태그 이름이나 클래스와 같은 다른 방법을 사용해야 함

---

클래스(class)를 이용한 선택

getElementsByClassName() 메소드

클래스 이름을 이용하여 HTML 요소를 선택

 

예제

var selectedItem = document.getElementsByClassName("odd"); // 클래스가 "odd"인 모든 요소를 선택함.

for (var i = 0; i < selectedItem.length; i++) {

    selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.

}

코딩연습 ▶

---

name 속성을 이용한 선택

getElementByName() 메소드

HTML 요소의 name 속성을 이용하여 HTML 요소를 선택

 

예제

var selectedItem = document.getElementsByName("first"); // name 속성값이 "first"인 모든 요소를 선택함.

for (var i = 0; i < selectedItem.length; i++) {

    selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.

}

코딩연습 ▶

---

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);

코딩연습 ▶

---

DOM 요소의 내용 변경

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 DOM을 이용하면 HTML 요소의 스타일(style)도 손쉽게 변경

style 프로퍼티를 이용하여 HTML 요소에 CSS 스타일을 적용

 

예제

var str = document.getElementById("text");                 // 아이디가 "text"인 요소를 선택함.

function changeRedColor() { str.style.color = "red"; }     // 해당 요소의 글자색을 빨간색으로 변경함.

function changeBlackColor() { str.style.color = "black"; } // 해당 요소의 글자색을 검정색으로 변경함.

코딩연습 ▶

---

참고

http://www.tcpschool.com/javascript/js_dom_element

코딩교육 티씨피스쿨