- DOM이란?
HTML 문서가 브라우저에서 로드될 때, 브라우저는 해당 문서를 해석하고 각 요소를 표현하는 객체의 트리 구조를 생성한다. 이렇게 생성된 객체 트리(Tree)를 DOM(Document Object Model, 문서객체모델)이라고 한다. 이 객체 트리를 통해 JavaScript와 같은 스크립트 언어는 문서의 요소들에 접근하고 수정할 수 있다.
- node란?
node란 DOM Tree를 구성하는 요소로, 웹페이지를 형성하는 HTML 태그와 텍스트, 그리고 속성 등을 하나의 블록으로 취급하는 것이다. 노드들은 서로 계층 구조로 연결되어 있으며, 자식 노드, 부모 노드, 형제 노드와 같은 관계를 형성하고 있다. DOM Tree의 최상단 노드는 "document"이다.
- DOM 요소의 속성과 메소드
node는 객체로써 고유한 속성과 메소드를 가질 수 있다. 속성은 해당 객체의 특성을 나타내는 값을 가져오거나 설정하는 데 사용되며, 메서드는 해당 객체가 수행하는 작업을 나타내는 함수이다.
document.getElementById("demo").innerHTML = "Hello World!";위에서 getElementById()는 node의 메소드이고 innerHTML은 node의 속성이다.
- DOM 제어 메소드
문서 객체 생성과 선택
document.createElement(tagName): 새로운 HTML 요소를 생성합니다.document.getElementById(id): id 속성을 기준으로 요소를 선택합니다.document.getElementsByTagName(name): 태그 이름을 기준으로 요소를 선택합니다.document.getElementsByClassName(name): 클래스 이름을 기준으로 요소를 선택합니다.document.querySelector(selector): CSS 선택자를 이용하여 요소를 선택합니다.document.querySelectorAll(selector): CSS 선택자를 이용하여 모든 요소를 선택합니다.
문서 객체 조작
element.innerHTML: 해당 요소 내부의 HTML 코드를 변경합니다.element.textContent: 해당 요소 내부의 텍스트를 변경합니다.element.setAttribute(attr, value): 해당 요소의 속성 값을 변경합니다.element.getAttribute(attr): 해당 요소의 속성 값을 가져옵니다.element.style.property: 해당 요소의 스타일 값을 변경합니다.element.appendChild(child): 해당 요소의 하위 요소로 child를 추가합니다.element.removeChild(child): 해당 요소의 하위 요소 중 child를 삭제합니다.element.classList.add(class): 해당 요소의 클래스에 새로운 클래스를 추가합니다.element.classList.remove(class): 해당 요소의 클래스 중에서 특정 클래스를 제거합니다.element.classList.toggle(class): 해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다.
이벤트 처리
element.addEventListener(type, listener): 해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다.element.removeEventListener(type, listener): 해당 요소에서 등록된 함수를 제거합니다.event.preventDefault(): 이벤트가 발생했을 때 기본 동작을 취소합니다.event.stopPropagation(): 이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다.
기타
window.location.href: 현재 페이지의 URL을 가져옵니다.window.alert(message): 경고 메시지를 출력합니다.window.confirm(message): 확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.
황세민