[JS] DOM 요소에 접근하는 방법 / DOM 접근 함수(메서드) 소개 - 토끼는 개발자

 

DOM(Document Object Model)에 접근하는 방법

DOM은 웹 문서의 모든 요소를 문서화해놓고, 자바스크립트를 사용할 때 문서화 한 각 요소별로 접근할 수 있도록 도와주는데 이 DOM 요소에 접근하는 방법(DOM 메서드/함수)을 소개합니다.

 

첫 번째 방법. 태그로 접근하는 함수 사용
getElementsByTagName()

기본형태 

지정한 태그를 가진 모든 요소에 접근한다.

document.getElementsByTagName("태그명");

예시

문서에서 <h2> 태그로 표현된 모든 요소에 접근해서 글씨 색을 빨간색으로 하겠다는 의미

var a = document.getElementsByTagName("h2").style.color="red";

 

 

두 번째 방법. class로 접근하는 함수 사용
getElementsByClassName()

기본형태 

지정한 클래스를 가진 모든 요소에 접근

document.getElementsByClassName("클래스명");

예시

문서에서 지정해준 클래스 이름을 가진 모든 요소에 접근해서 배경을 빨간색으로 하겠다는 의미

var b = document.getElementsByClassName("className").style.backgroundColor="red";

 

 

세 번째 방법. id로 접근하는 함수 사용
getElementById()

기본형태 

지정한 아이디를 가진 요소에 접근  *유일한 별명을 가지고 있는 단 한 개의 요소에 접근한다고 이해

document.getElementById("아이디명");

예시

문서에서 지정해준 아이디를 가진 요소에 접근해서 배경을 파란색으로 하겠다는 의미

var c = document.getElementById("idName").style.color="blue";

 

 

네 번째 방법.
querySelector()

기본형태 

문서에서 지정한 첫 번째 요소에 접근

- 지정 요소가 클래스일 때 : '.클래스명'

- 지정 요소가 아이디일 때 : '#아이디명'

document.querySelector(".className"); // 클래스명 접근할 때
document.querySelector("#idName");    // 아이디명 접근할 때

 

 

다섯 번째 방법. 
querySelectorAll()

기본형태 

문서에서 지정한 모든 요소에 접근

- 지정 요소가 클래스일 때 : '.클래스명'

- 지정 요소가 아이디일 때 : '#아이디명'

document.querySelectorAll(".className"); // 클래스명 접근할 때
document.querySelectorAll("#idName");    // 아이디명 접근할 때