자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법.
요소 노드
- 모든 HTML 태그를 의미.텍스트 노드
- 태그의 텍스트 내용.속성 노드
- 태그의 속성.주석 노드
- 주석.getElementById(id)
- id명으로 접근.getElementsByClassName(class)
- 클래스명으로 접근하며 여러 요소가 배열 형태로 저장.getElementsByTagName(tag)
- 태그명으로 접근하며 여러 요소가 배열 형태로 저장.querySelector()
- id명이나 선택자를 사용해 접근.querySelectorAll()
- 클래스명이나 태그명의 선택자를 사용해 접근. 여러 노드가 노드 리스트 형태로 저장.getAttribute(속성)
- 태그에서 사용한 속성값을 가져온다.setAttribute(속성, 값)
- 태그의 속성을 특정한 값으로 지정한다.요소.addEventListner(이벤트, 함수, 캡처 여부)
document.요소명.style.속성명
createElement()
- 새로운 요소 노드를 만든다. createTextNode()
- 새로운 텍스트 노드를 만든다.appendChild()
- 텍스트 노드를 요소 노드의 자식으로 연결한다.appendChild()
- 요소 노드를 DOM에 연결한다.createElement()
- 새로운 요소 노드를 추가한다.createAttribute()
- 새로운 속성 노드를 추가한다.속성값 지정하기
- 속성값을 프로퍼티로 지정한다.setAttributeNode()
- 속성 노드를 요소 노드의 자식으로 연결한다.appendChild()
- 요소 노드를 DOM에 연결한다.parentNode 프로퍼티로 부모 노드를 찾아서 부모 노드에서 삭제한다.
부모노드.removeChild(자식노드)