DOM 요소 선택 / 변경

DOM 요소 선택

자바스크립트에서 HTML의 요소를 선택해보자.
6가지의 방법을 통해서 요소를 선택할 수 있다.

---

1) HTML 태그 이름으로 선택하기

getElementsByTagName()
HTML 태그 이름을 이용하여 HTML 요소를 선택합니다.

 

위의 메서드를 사용하여 HTML요소에 접근, 생성, 변경할 수 있다.

let selectTagName = document.getElementByTagName("p");
//모든 <p> 요소를 선택한다.
for (let i = 0; i < selectTagName.length; i++) {
//<p>태그의 수만큼 
selectTagName.item(i).style.color = "red"; }
// 선택된 모든 <p>의 텍스트 색상을 변경함.

 

item()메서드는 해당 HTML 객체 집합(obejct collection)에서 전달받은 인덱스에 해당하는 요소를 반환

---

2) id로 선택하기

getElementsById()
id속성을 이용하여 HTML 요소를 선택합니다.

 

id속성을 사용하여 HTML 요소를 선택합니다.

id속성을 사용하면 해당 id를 가지고 있는 첫 번째 요소만을 선택합니다.

let selectId = document.getElementById('me');
// id가 'me'인 요소를 선택한다.
selectId.style.color = "blue";
// 'me'인 요소의 텍스트 색상을 변경한다.

id 속성 을 사용하는 경우
고유한 식별을 목적으로 할 경우.
영역 구분 / 데이터 연결하기 위한 식별자

---

3) class로 선택하기

getElementsByClassName()
class속성을 이용하여 HTML 요소를 선택합니다

let selectClass = document.getElementByClassName('my');
// 클래스명이 'my'인 모든 요소를 선택한다.
for (elt i = 0; i < selectClass.length; i++) {
// 클래스 수 만큼
selectClass.item(i).style.color = "red";}
// 클래스명이 'my'인 모든 요소의 텍스트 색상을 변경한다.

class 속성 을 사용하는 경우
재사용을 목적으로 하는 식별자

---

4) name으로 선택하기

getElementsByName()
name속성을 이용하여 HTML 요소를 선택합니다.

let selectName = document.getElementByName('suin');
// 네임명이 'suin'인 모든 요소를 선택한다.
for (let i = 0; i < selectName.length; i++) {
// 네임 수 만큼
selectName.item(i).style.color = "red";}
// 네임명이 'suin'인 모든 요소의 텍스트 색상을 변경한다.

name 속성 을 사용하는 경우
form 컨트롤 요소의 값(value)을 서버로 전송하기 위한 식별자

---

5) CSS 선택자(selector)로 선택하기

getSelectorAll()
CSS 선택자(아이디, 클래스, 속성, 속성값 등)를 이용하여 HTML 요소를 선택합니다.

 

getElementsById()는 한 요소만 반환했지만, getSelectorAll()에서는 id값을 사용해도 모든 요소를 반환한다.

let selectAll = document.getSelectorAll('li.suin');
// <li>요소인 것 중에서 클래스가 'suin'인 요소를 선택
for (let i = 0; i < selectAll.length; i++) {
//  위의 선택 수 만큼
selectAll.item(i).style.color = "red";}
// 선택된 모든 요소의 텍스트 색상을 변경한다.

 

getSelectorAll() 메서드는 익스플로러 8과 그 이하는 지원하지 않는다.

---

6) HTML 객체 집합(object collection)로 선택하기

object collection 메서드
HTML DOM에서 제공하는 객체 집합(object collection)을 이용하여 HTML 요소를 선택합니다.

let url = document.documentURI;	//HTML 문서의 URI를 반환하는 메서드.
document.write(url);	//https://velog.io/write?id=4fd068f2-4366-4912-97cb-ba6da9e0cd162

---

DOM 요소 변경

DOM요소를 선택하는 내용을 소개했다.
이제 DOM 요소의 내용과 스타일을 변경해보자.

---

1) DOM 요소 내용 변경하기

1). innerHTML 프로퍼티를 이용하여 손쉽게 HTML의 요소 내용을 변경할 수 있다.

let str = document.getElementById("text");
//id명이 'text'인 요소를 선택
str.innerHTML = "요소 변경";
//선택 요소의 내용을 "요소 변경"으로 변경한다.

2). HTML요소의 속성 이름을 이용하여 속성 값을 변경할 수 있다.

let link = document.getElementById("link");
// 아이디가 "link"인 요소를 선택함.
link.href = "/javascript/intro";
// 해당 요소의 href 속성값을 변경함.
link.innerHTML = "자바스크립트 수업 바로 가기!";
// 해당 요소의 내용을 변경함.

1.youtube가기의 글씨를 '네이버가기로 바꾸기'버튼을 클릭해서

2. 네이버가기로 변경

---

2) DOM 요소 스타일 변경하기

HTML DOM을 이용하여 요소의 스타일을 변경할 수 있다.

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

let str = document.getElementById("text"); 
// 아이디명이 "str"인 요소를 선택
function changeRedColor() { str.style.color = "red"; }   
// 해당 요소의 글자색을 빨간색으로 변경함.
function changeBlackColor() { str.style.color = "black"; } 
// 해당 요소의 글자색을 검정색으로 변경함.

결괏값

'빨간색 글자!'라는 버튼을 클릭 시