DOM
동일한 문서를 표현하고 저장하고 조작하는 방법을 제공합니다.
DOM은 원본 HTML 문서의 객체 기반 표현 방식입니다.
DOM의 개체 구조는 트리로 표현됩니다. 루트 요소인 <html>에 <head> <body> 태그로 나뉘게 되고 각각의 자식요소를 갖게 됩니다.
DOM은 HTML 문서에 대한 인터페이스입니다. 뷰포트에 무엇을 렌더링 할지 결정하기 위해 사용되며, 페이지의 콘텐츠 및 구조, 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.
- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.
- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
- 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.
Document 객체
document 객체는 웹페이지 그 자체를 의미합니다.
웹페이지에 존재하는 HTML 요소 접급시 반드시 document 객체부터 시작해야 합니다.
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
document 객체는 위와 같은 작업을 도와주는 다양한 메소드를 제공합니다.
HTML 요소 생성/선택 메소드
-
document.createElement('생성요소')
요소 생성 가능 -
document.getElementsBytagName(태그이름)
해당 태그이름의 요소를 모두 선택 -
document.getElementById(아이디이름)
해당 아이디의 요소를 선택함 -
document.getElementsByClassName(클래스이름)
해당 클래스에 속한 요소를 모두 선택함 -
document.getElementsByName(속성값)
해당 name 속성값을 가지는 요소를 모두 선택함 -
document.querySelectorAll(선택자)
해당 선택자로 선택되는 요소를 모두 선택함
꿈꾸는 개발자!