DOM
웹 페이지를 구조화된 객체로 제공하여 다른 프로그래밍 언어가 페이지 구조에 접근, 조작할 수 있는 방법을 제공
= 문서 구조, 스타일, 내용등을 변경할 수 있도록 함
모두 document 객체의 자식으로 구성됨
DOM 선택
DOM 조작
웹페이지를 동적으로 만들기 (=웹페이지 조작)
조작 순서
- 조작하고자 하는 요소를
선택 - 선택된 요소의 콘텐츠 또는 속성을
조작
선택 메서드
/// 요소 한 개 선택
document.querySelector(selector)
/// 요소 여러 개 선택
doment.querySelectorAll(selector)-
document.querySelector(selector)
제공한 CSS selector를 만족하는 첫번째 element 객체를 반환 (없다면 null 반환) -
doment.querySelectorAll(selector)
제공한 CSS selector를 만족하는 NodeList를 반환
DOM 조작
속성(Attribute) 조작
- 클래스 속성 조작
- 일반 속성 조작
- 클래스 속성 조작
classList요소의 클래스 목록을 DOMTokenList(유사 배열) 형태로 반환
classList 메서드
element.classList.add()
/ 지정한 클래스 값을 추가
element.classList.remove()
/ 지정한 클래스 값을 제거
element.classList.toggle()
/ 클래스가 존재한다면 제거하고 false를 반환(존재하지 않으면 클래스를 추가하고 true를 반환)- 속성 조작
속성 조작 메서드
element.getAttribute()
/ 해당 요소에 지정된 속성 값을 반환 (조회)
element.setAttribute(name, value)
/ 지정된 요소의 속성 값을 설정
/ 속성이 이미 있으면 기존 값을 갱신
그렇지 않으면 지정된 이름과 값으로 새 속성이 추가
element.removeAttribute()
/ 요소에서 지정된 이름을 가진 속성 제거
/ nullHTML 콘텐츠 조작
textContent 요소의 텍스트 콘텐츠를 표현
const h1Tag = document.querySelector('.heading')
h1.textContent = '내용 수정'DOM 요소 조작
DOM 요소 조작 메서드
document.createElement(tagName)
/ 작성한 tagName의 HTML 요소를 생성하여 반환
Node.appendChild()
/ 한 Node를 특정 부모 Node의 자식 NodeList 중 마지막 자식으로 삽입
/ 앞에 있는거의 자식으로 괄호 안에 요소가 들어가
/ 추가된 Node 객체를 반환
Node.removeChild()
/ DOM에서 자식 Node를 제거
/ 제거된 Node를 반환Style 조작
style 해당 요소의 모든 style 속성 목록을 포함하는 속성
const pTag = document.querySelector('p')
pTag.style.color = 'crimson'
pTag.style.fontSize = '2rem'참고
Node
- DOM의 기본 구성 단위
- DOM 트리의 각 부분은 Node라는 객체로 표현됨
- Document Node = HTML 문서 전체를 나타내는 노드
- Element Node = HTML 요소를 나타내는 노드 (ex.
<p>) - Attribute Node : HTML 요소의 속성을 나타내는 노드
NodeList
- DOM 메서드를 사용해 선택한 Node의 목록
- 배열과 유사한 구조를 가짐
- Index로만 각 항목에 접근 가능
- 다양한 배열 메서드 사용 가능
- querySelector로 선택한 NodeList는 실시간 반영 X
Element
- Node의 하위 유형
- Element는 DOM 트리에서 HTML 요소를 나타내는 특별한 유형의 Node
<p>,<div>,<span>,<body>등의 HTML 태그들이 Element 노드를 생성
Parsing
브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정
조금씩이라도 꾸준하게