자바스크립트 활용하기 💡"DOM편 "
프론트엔드 개발자라면 자바스크립트(JavaScript)라는 프로그래밍 언어를 아는 것과 동시에
DOM에 대해서 반드시 알고 있어야만 웹 개발을 제대로 시작 할 수 있다.
웹에 띄울 페이지가 실제로 사용할 수 있는 페이지로
혹은, 우리가 필요한 정보가 모여있는 웹 페이지로 구현하려면 HTML, CSS로도 충분하지 않다.
그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 써야만 하기 때문이다.
그렇다면 DOM이란 무엇이고, 어떻게 자바스크립트와 DOM을 이용해
인터랙티브한 기능을 어떤 매서드를 이용해 조작할 수 있는지 알아보자.
* 인터렉티브 사전 뜻: 인터랙티브(Interactive)는 '상호 간'이라는 뜻을 지닌 인터(Inter-)와 '활동적'이라는 뜻을 지닌 액티브(Active)의 합성어입니다. 상호활동적인, 곧 쌍방향이라는 의미를 지니고 있습니다. 인간과 기술의 만남을 인터랙티브로 표현할 수 있습니다.
DOM (Document Object Model) 필요한 이유는?
단순히 HTML 과 CSS의 정적인 페이지에서 동적으로 웹페이지를 변경하려면 문서를 조작하기 위한 DOM을 알아야 한다.
DOM
문서 객체 모델(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근 할 수 있는 방법을 제공하여 문서 구조 및 스타일, 내용 등을 변경할 수 있게 도와준다.
즉 DOM은 자바스크립트와 같은 프로그래밍 언어가 문서의 구조에 접근할 수 있는 방법을 제공하고, 변경할 수 있게 해주며 단순히 정보를 보여주는 웹페이지가 아니라, 동적인 기능이 있는 웹어플리케이션을 만들고 싶다면 DOM이 필요하다.
DOM API 키워드
1. '메서드'로 HTML DOM 객체를 찾는 키워드
getElement 혹은 getElements를 이용해 element에 대한 조건을 전달하면
조건에 부합하는 특정 element를 반환한다.
⭐ element 1개만 반환 : getElement, querySelector
⭐ element 여러개 반환 : getElements, querySelectorAll
DOM 활용하기
1. 검색을 입력받는 DOM에 접근을 하기 위한 예시
<input id="search" class="search-input-style">
4가지로 활용 해 보기.
1. tag로 찾기
document.getElementsByTagName('input')
2. id로 찾기
document.getElementById('search')
3. className으로 찾기
document.getElementsByClassName('search-input-style')
4. cssSelector로 찾기
/*일치하는 첫번째 엘리먼트*/
document.querySelector('.search-input-style')
/*일치하는 모든 엘리먼트*/
document.querySelectorAll('.search-input-style')
참고링크