DOM

😀DOM을 알면?

단순히 정보를 보여주는 웹페이지가 아니라, 동적인 기능이 있는 웹앱을 만들고 싶다면, DOM을 알아야 해요.

• javascript로 html에서 데이터를 가져올 수 있어요.

• 웹페이지에 보여지는 데이터를 변경할 수 있어요.

• 인터렉티브한 웹어플리케이션을 만들 수 있어요.

😮DOM이란? Document Object Model

• HTML, XML 문서의 프로그래밍 interface입니다.

• DOM은 프로그래밍 언어(우리는 javascript)가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다.

🙆DOM API 사용하기

• 검색어를 입력받는 DOM에 접근하기 위해 아래 검색 input의 태그 예시를 살펴봅시다.

<input id="search" class="search-input-style">

🔍DOM 객체 찾기

tag로 찾기

document.getElementsByTagName('input');

id로 찾기

• 가장 빨라요.

document.getElementById('search');

className으로 찾기

document.getElementsByClassName('search-input-style');

cssSelector로 찾기

• 일치하는 첫번째 엘리먼트를 찾아줘요.

  document.querySelector('.search-input-style');

• 일치하는 모든 엘리먼트를 찾아줘요.

  document.querySelectorAll('.search-input-style');