[javascript] DOM이란? - 1 (문서 객체 모델)

 

DOM

document object model의 약자로 HTML이나 XML 문서에 접근하기 위한 일종의 인터페이스이다.

문서의 요소를 정의하고 요소에 접근하는 방법을 제공한다.

 

DOM은 nodes와 objects로 문서를 표현하며, 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

 

DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

 

DOM_mdn web docs

 

DOM의 활용

//id로 태그 선택하기
document.getElementById('id이름');

//class로 태그 선택하기
document.getElementsByClassName('class이름');

//태그 이름으로 태그 선택하기
document.getElementsByTagName('tag이름')

//css 선택자로 태그 선택하기  //#과 . 사용 구분할 것
document.querySelector('#id이름');
document.querySelector('.class이름');
document.querySelectorAll('#id이름');
document.querySelectorAll('.class이름');

 

태그를 콘솔에 출력할 때 >

• getElementsByClassName에 존재하지 않는 선택자의 이름을 넣으면 undefined이 리턴된다.
• getElementsById와 querySelector에 존재하지 않는 선택자의 이름을 넣으면 null이 리턴된다.
• getElementsByClassName을 사용하면 HTMLcollection이라는 유사배열의 형태로 출력된다.
• querySelectorAll을 사용하면 NodeList라는 유사배열의 형태로 출력한다.

getElementsByClassName과 querySelectorAll에 존재하지 않는 선택자의 이름을 넣으면 null이나 undefined이 아닌 비어있는 유사배열이 리턴된다는 것을 유의해야 한다.