Dom :문서 객체 모델 (The Document Object Model)
DOM은 트리형 구조로 문서의 구조화된 표현을 제공한다.
DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다
웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용 할 수 있게 연결시켜주는 역할을 한다.
예시로 javescript에서 html css 연결할때 사용한다.
DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.
DOM 그리고 Javascript
- DOM은 웹페이지의 객체 지향 표현이자 자바스크립트 같은
스크립팅 언어를 이용해 DOM을 수정 할 수 있다. - DOM은 프로그래밍 언어는 아니지만, DOM이
없다면 자바스크립트 언어는
웹페이지 요소들과 관련된 모델이나 개념들에 대한 정보를 얻지 못한다.
속성
dataset : 특정 데이터를 DOM요소에 저장
Element.classList:활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.
Element.id:요소의 식별자를 나타내며, HTML의 전역적인 id 속성을 반영
Element.getElementsByClassName: 주어진 클래스를 가진 모든 자식 엘리먼트의
실시간 HTMLCollection 을 반환합니다.
Element.tagName :요소의 호출된 태그명을 가져온다.
querySelector() :document.querySelector(selectors);
문서의 첫 번째 요소부터 시작해 자식 노드의 수를 기준으로 순회한다.
querySelectorAll()
lement.innerHTML:요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정
template : html 코드 작성할때 사용하고 같은 형식을 여러번 출력할때 사용한다.
자바스크립트에서 html 코드를 작성하지 않고 selector를 이용하여 template를 호출하여
사용 가능
Element.getAttribute(name) : 속성의 값을 획득
Element.setAttribute(name, value) : 속성의 값을 설정
Element.hasAttribute(name) : 속성의 존재여부를 확인
Element.removeAttribute(name) : 속성을 제거
