[JavaScript] DOM이 뭔가요? ----- getElementById(), getElementByClassName(), getElementByTagName(), querySelector(), querySelectorAll()

DOM : Document Object Model

 

브라우저에서 자바스크립트가 html 요소를 제어할 수 있도록 제공하는 API이다. (API에 관한 설명은 아래에_)

 

 

JavaScript는 html 요소를 추가하거나 변경과 같은 조작을 위해 만들어진 언어이다. 

이러한 html파일을 javascript로 어떻게 제어할 수 있을까?

 

모든 브라우저에는 웹문서를 해석(parding)하는 웹 렌더링 엔진이 있다. 

이 렌더링 엔진은 html 코드를 해석하여 모든 요소를 객체화하여 자바스크립트가 접근할 수 있게끔한다. 

이렇게 문서를 객체화하였다하여 Document Object Model(문서 객체 모델)이라고 부른다. 

이 DOM은 트리 형태로 되어있고 각각의 요소를 노드라고 부른다. 

우리는 원하는 노드에 접근하여 변경하면되는데 

요소에 접근하기 위해서 가장 먼저 접근해야하는 노드는 DOM트리의 최상위노드인 document이다. 

 

출처 : https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/

 

 

 

 

요소에 접근하기 위해 자주 쓰이는 document의 함수로는

getElementById(), getElementByClassName(), getElementByTagName(), querySelector(), querySelectorAll() 등이 있다. 

 

 

 

📌 getElementById()

document.getElementByID('아이디명');

해당 아이디를 가진 요소를 배열 형태로 가져온다. 

 

 

 

📌 getElementByClassName()

document.getElementByClassName('클래스명');

해당 클래스를 가진 요소를 배열 형태로 가져온다. 

 

 

 

📌 getElementByTagName()

document.getElementByTagName('태그명');

해당 태그 요소를 배열 형태로 가져온다. 

 

 

 

📌 querySelectorAll()

document.querySelectorAll('css 선택자');

//예시
document.querySelectorAll('#redBox');
document.querySelectorAll('.container');
document.querySelectorAll('.cont span');

선택자 조건에 부합하는 모든 element를 배열 형태로 가져온다. 

 

querySelectorAll()과querySelector() 이 두 함수는 

css에서 쓰는 선택자처럼 복합 선택자를 이용할 수 있다.

 

 

 

📌 querySelectorAll()

document.querySelector('css 선택자');

선택자 조건에 부합하는 element 한 개만 가져온다. 

다른 함수와 다르게 배열이 아닌 딱 하나의 요소만 가져온다.

만약 조건에 맞는 요소가 여러 개라면 첫 번째 요소를 가져온다. 

 

 

 

 

 

 

 

📫

 

API란??

 

API : 애플리케이션 프로그래밍 인터페이스(Application Programming Interface) 

소프트웨어와 소프트웨어가 지정된 형식으로 서로 소통하기 위한 수단을 API라고 한다.

 

브라우저는 Web API를 통해 자바스크립트로 부터 특정 동작들을 지시받는다. 

 

REST API : HTTP 요청을 보낼 때 어떤 URI에 어떤 메소드를 사용할 지 개발자들 사이에 약속된 형식 

 

     - GET : 데이터를 조회

     - POST : 새로운 데이터 추가 

     - PUT : 데이터를 통째로 변경

     - PATCH : 데이터 중 일부를 변경

     - DELETE : 데이터 삭제