티스토리 뷰
https://www.edwith.org/boostcourse-web/lecture/16699/
[LECTURE] 2) DOM과 querySelector : edwith
들어가기 전에 우리가 댓글을 입력할 때 댓글이 바로 화면에 추가되는 걸 볼 수 있죠? 이외에도 받은 이메일함의 개수가 증가하기도 하고요. 이렇게 HTML 내의 구조와 데이터는 변경... - 부스트코스
www.edwith.org
DOM: Document Object Model
DOM은 HTML 문서를 구조화된 nodes, property, method를 갖고 있는 객체(object)로 표현한다. (웹 페이지의 객체 지향 표현)
객체의 트리 형태이다. 여기서 document는 최상위 객체다.
자바스크립트를 통해 DOM의 요소(페이지 컨텐츠:table, header, div 등)을 조작 가능하다.
어떻게 접근하는가?
document.getElementById("id");
id를 문자열로 그대로 입력한다.
document.querySelector(selectors);
css selector의 문법을 활용한다. (id = #, class = ., 자식 > 등 사용 가능)
document.querySelectorAll(selectors);
셀렉터와 일치하는 element들의 NodeList를 반환
참고 자료: https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C
DOM 소개
이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다.
developer.mozilla.org
'서비스 개발 > 웹' 카테고리의 다른 글
| [네이버 부스트코스 웹 프로그래밍] Ajax, CORS, Visual Studio Code Live Server Extension (0) | 2020.02.24 |
|---|---|
| [네이버 부스트코스 웹 프로그래밍] Event Listener (0) | 2020.02.23 |
| [네이버 부스트코스 웹 프로그래밍] JavaScript setTimeout과 비동기 (0) | 2020.02.23 |
| [네이버 부스트코스 웹 프로그래밍] JavaScript Call Stack, VScode에서 디버그 설정 (0) | 2020.02.23 |
| [네이버 부스트코스 웹 프로그래밍] JavaScript 함수, 함수표현식, 호이스팅, 아규먼트 (0) | 2020.02.23 |