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"); // 아이디명 접근할 때
728x90
'Programming > JavaScript' 카테고리의 다른 글
[JS] DOM에 대해서 - 토끼는 개발자 (0) | 2021.09.04 |
---|---|
[JS] 크롬 브라우저에서 개발자 도구 콘솔에 자바스크립트 사용하기 - 토끼는 개발자 (0) | 2021.08.19 |
[JS] 자바스크립트 파일 외부에서 연결하기 - 토끼는 개발자 (0) | 2021.08.17 |
[JS] 글자 클릭하면 글자색이 바뀌는 자바 스크립트 / 클릭 이벤트 - 토끼는 개발자 (0) | 2021.08.16 |
[JS] 5. HTML 자동 완성 기능 / HTML Snippets - 토끼는 개발자 (0) | 2021.08.14 |